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

0顶
0踩

2015-06-30 15:45 by 副主编 mengyidan1988 评论(0) 有4305人浏览

javascript 前端开发

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

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

分享到：