说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

【探秘ES6】系列专栏:剩余参数和默认参数

HTML文档下载 WORD文档下载 PDF文档下载
新一代JavaScript标准ES6正式发布。【探秘ES6】系列专栏将一一剖析ES6的诸多新特性,让Web开发者对此有清晰全面的了解。本文为系列的第五篇,带你了解ES6的剩余参数和默认参数。

ES6作为新一代JavaScript标准,正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,Mozilla Web开发者博客推出了《ES6 In Depth》系列文章。CSDN已获授权,将持续对该系列进行翻译,供大家学习借鉴。本文为该系列的第五篇。

本文讲述的是有关ES6剩余参数(Rest parameters)和默认参数(Defaults parameters)的使用。

剩余参数(Rest parameters)

当需要创建一个可变函数API时,该函数需要实现任意数目参数的输入。例如,String.prototype.concat方法可接受任意数目的字符串参数输入。而在ES6中,可利用剩余参数来转变实现思路。

以下将结合实例说明。containsAll是一个可变函数,用于检测字符串是否包含成分子串。例如,containsAll("banana", "b", "nan")返回true,containsAll("banana", "c", "nan")则返回false。

采用传统写法的代码如下:

function containsAll(haystack) {  for (var i = 1; i < arguments.length; i++) {    var needle = arguments[i];    if (haystack.indexOf(needle) === -1) {      return false;    }  }  return true;}

该方法的核心是利用了参数对象,以数组的方式向函数传入参数。它完全满足需求,但可读性差。其函数参数仅是唯一的haystack,因此很难一眼就看出到底包含了哪些参数。此外,在进行递归运算时,需要注意初始位置的索引号是1而不是0,因为arguments[0]对应的是haystack参数。最后假若需要在haystack的前或后添加别的参数,那么就不得不对循环进行更新。如果换用剩余参数,这些问题皆可一一迎刃而解。

使用剩余参数的代码如下:

function containsAll(haystack, ...needles) {  for (var needle of needles) {    if (haystack.indexOf(needle) === -1) {      return false;    }  }  return true;}

该方法实现了与传统写法一样的功能,区别是使用了特殊的语法...needles。那么对于containsAll("banana", "b", "nan"),其运算过程是怎么样的呢?首先haystack被第一个参数banana填充;位于needles前的符号...表明needles为剩余参数;以后的其它参数会被放入一个数组然后再分配给变量needles,本例中为["b", "nan"];之后的判断过程按常规执行。(注:这里使用了for-of 循环语法)

要提醒一点,只有位于最末的参数可被标记为剩余参数。位于剩余参数之前的参数与普通参数的处理方式是一样的。所有的额外参数都会被放入一个数组然后再分配给剩余参数。如果没有额外参数,剩余参数则为一个空数组;剩余参数不能被赋值为undefined。

默认参数(Default parameters)

很多时候,函数对传入的参数不一定全都进行处理,同时默认参数亦可以替代传入参数来进行使用。JavaScript一直以来在默认参数的处理上都显得比较笨拙;无值参数会被看作undefined。ES6里引入了特殊的默认参数处理方式。

请看下面的例子。

function animalSentence(animals2="tigers", animals3="bears") {    return `Lions and ${animals2} and ${animals3}! Oh my!`;}

对上述函数中每个参数来说,=之后的赋值表达式作用是为参数进行默认取值。因此, animalSentence() 返回“Lions and tigers and bears! Oh my!”,animalSentence("elephants") 返回“Lions and elephants and bears! Oh my!”,animalSentence("elephants", "whales") 返回“Lions and elephants and whales! Oh my!”。

使用默认参数时,有几点需要留意。

  • 不同于Python,默认值表达式在函数调用的时候进行求值。也就是说,默认表达式可以使用已定义的参数值。例如把上述动物例子的函数改为较特别的方式:

function animalSentenceFancy(animals2="tigers",    animals3=(animals2 == "bears") ? "sealions" : "bears"){  return `Lions and ${animals2} and ${animals3}! Oh my!`;}

其结果是:animalSentenceFancy("bears") 返回的是 “Lions and bears and sealions. Oh my!”。

  • 取值undefined的作用等于是没有传入任何东西。因此,animalSentence(undefined, "unicorns") 返回的是 "Lions and tigers and unicorns! Oh my!"
  • 没有显式定义的默认参数等同于undefined,因此:

function myFunc(a=42, b) {...}

等同于

function myFunc(a=42, b=undefined) {...}

小结

ES6对剩余参数和默认参数使得JS函数的声明更具可读性和表达性,不妨动手试试。(译者:伍昆 责编:陈秋歌)

原文链接:ES6 In Depth: Rest parameters and defaults

本译文遵循Creative Commons Attribution Share-Alike License v3.0 

相关阅读:

【探秘ES6】系列专栏:ES6简介

【探秘ES6】系列专栏:迭代器和for-of循环

【探秘ES6】系列专栏:生成器

【探秘ES6】系列专栏:模版字符串

欢迎加入CSDN前端交流群:218126086,进行前端技术交流。  

中文版Evernote百宝箱上线:开发者海外推广新渠道 360产品被爆收集用户隐私 桌面安全路在何方 销售额达一万亿元 阿里巴巴成世界最大电商 共享软件海外营销策略与实战分析(武汉站)成功落幕 你未必知道的CSS故事:揭开leading的面纱 我先开MODEM,再开主机,启动进入系统前 Jsp和Asp...... 打不开"ws2.lib"??? 我是一个菜鸟,请教一下动态实现对话框! 如何做小一些的登录框,居中显示的,有提交功能(好像是废话) linux7.2下安装oracle817时遇到点问题,求助 XML有描述心理测试的规范吗? 求助,最近在linux7.2下安装oracle817时遇到问题 疑难杂症 英语电子邮件范文假如现在是10月3日,你的秘书给你 配好的柠檬酸缓冲液可以保存多久?请问PH为4.0 怎么配ph=9的柠檬酸缓冲液ph=9的柠檬酸缓冲液 如何配制柠檬酸缓冲液? 甘油怎么写?分子式? 法拉第电磁感应定律是谁总结的 甘油的分子式是什么. 电磁感应定律是谁总结的 关于法拉第电磁感应定律对于交流发电机怎样从法拉第电 尸检报告排除阿拉法特钋中毒 不排除其沙特威胁将疏远美国 分析称美地缘政治印度德里频发未成年人性侵案 作案者为星巴克CEO辩解在中国高定价 称报道伊朗暂停提炼20%纯度铀浓缩 距武器一日三枣终身不老 红枣6种吃法让营养葛优早年赌场照片曝光 无奈回复\"看上海发短信示爱骚扰女学生教师被调离岗优朋普乐成立4K研究院一车一终端 7成的哥不知最强骑士修罗轮回劫诛魔春秋冷情书生末日之假面修罗南五台山旅游终南山旅游甘泉公园旅游仿宋古城旅游游击将军府旅游
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘