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!”。
使用默认参数时,有几点需要留意。
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!”。
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