JavaScript 参数中的数组展开 [译]

译者注:本文要讲的是ECMAScript 6中的知识点,如果你连ES5都不了解的话.我得说,你已经很落后了.CSS4,HTML6,甚至ES7 ES8都已经开始规划了,赶紧形动起来吧,否则淘汰!

有些时候,我们需要把一个数组展开成多个元素,然后把这些元素作为函数调用的参数.JavaScript中可以使用Function.prototype.apply来实现这种展开操作,但它不能被应用在执行构造函数的情况下.本文解释了什么是展开操作以及如何在使用new运算符的同时进行展开操作.

1.展开(Spreading)

展开的意思是在一个函数调用或方法调用中,或者执行一个构造函数时,通过一个数组来提供所需的参数.在Python中,这种操作称之为unpacking. ECMAScript.next中已经有了(展开操作符)spread operator (表示为一个前缀...)来执行这个展开操作.在目前的JavaScript中,你可以通过Function.prototype.apply方法来实现同样的效果.

译者注:展开操作符除了能用在实参的位置,把数组展开,还可以用在形参的位置,表示剩余参数.请看我翻译的MDN文档剩余参数

2.展开函数参数

Math.max()方法返回它的0到若干个数值类型的参数中的最大值.有了展开操作符,你可以直接使用一个数组来作为参数:

Math.max(...[13, 7, 30])
这等同于下面的写法
代码如下:
Math.max(13, 7, 30)

在目前的JavaScript中,你可以使用apply().
代码如下:
> Math.max.apply(null, [13, 7, 30])
30

apply方法的作用是:使用下面的这种调用方式:
代码如下:
func.apply(thisValue, [param1, param2, ...])

来代替这种
代码如下:
thisValue.func(param1, param2, ...)

需要注意的是,func不一定是属于thisValue的方法,apply可以让它临时拥有这个方法.

3.展开构造函数的参数

Date构造函数接受几个数值类型的参数,产生一个Date对象.通过展开操作符,你可以直接传入一个数组.
代码如下:
new Date(...[2011, 11, 24]) // 2011年的圣诞夜

但是,这次我们不能使用apply方法来实现展开操作,因为它不能与new一起工作:
代码如下:
> new Date.apply(null, [2011, 11, 24])
TypeError: function apply() { [native code] } is not a constructor

new运算符希望Date.apply是一个构造函数.就算你用小括号将这个表达式括起来,根本问题还是存在:apply执行的是一个函数调用,它不能将参数传递给new运算符.

3.1 解决办法
第一步. 我们先让结果变的正确,稍候再考虑怎么用数组代替分割开的参数.

代码如下:
new (Date.bind(null, 2011, 11, 24))

我们先用bind()来创建一个无参数的函数(参数已经绑定在这个绑定函数的内部了),然后使用new调用它,就像调用一个普通的构造函数一样.bind的函数签名如下:
代码如下: