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

更新时间:2015-06-30 09:41:09点击次数:2635次

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。

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


[js] view plaincopy

  1. function containsAll(haystack) {  

  2.   for (var i = 1; i < arguments.length; i++) {  

  3.     var needle = arguments[i];  

  4.     if (haystack.indexOf(needle) === -1) {  

  5.       return false;  

  6.     }  

  7.   }  

  8.   return true;  

  9. }  


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

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


[js] view plaincopy

  1. function containsAll(haystack, ...needles) {  

  2.   for (var needle of needles) {  

  3.     if (haystack.indexOf(needle) === -1) {  

  4.       return false;  

  5.     }  

  6.   }  

  7.   return true;  

  8. }  


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

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

默认参数(Default parameters)

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

请看下面的例子。


[js] view plaincopy

  1. function animalSentence(animals2="tigers", animals3="bears") {  

  2.     return `Lions and ${animals2} and ${animals3}! Oh my!`;  

  3. }  


对上述函数中每个参数来说,=之后的赋值表达式作用是为参数进行默认取值。因此, 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,默认值表达式在函数调用的时候进行求值。也就是说,默认表达式可以使用已定义的参数值。例如把上述动物例子的函数改为较特别的方式:



[js] view plaincopy

  1. function animalSentenceFancy(animals2="tigers",  

  2.     animals3=(animals2 == "bears") ? "sealions" : "bears")  

  3. {  

  4.   return `Lions and ${animals2} and ${animals3}! Oh my!`;  

  5. }  


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


  • 取值undefined的作用等于是没有传入任何东西。因此,animalSentence(undefined, "unicorns") 返回的是 "Lions and tigers and unicorns! Oh my!"

  • 没有显式定义的默认参数等同于undefined,因此:



[js] view plaincopy

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


等同于


[js] view plaincopy

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


小结

ES6对剩余参数和默认参数使得JS函数的声明更具可读性和表达性,不妨动手试试。

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

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


本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽,造成漏登,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息
  • 项目经理 点击这里给我发消息