ES6展开运算符（...）

这是在网上看见的es6展开运算符的总结，原文地址：http://www.jianshu.com/p/c5230c11781b

作者：可木Changer
链接：http://www.jianshu.com/p/c5230c11781b
來源：简书

总结还可以，借鉴下

 

三个点(...)在es6中，有两个含义:

　　用在形参中， 表示传递给他的参数集合， 类似于arguments, 叫不定参数. 语法格式:  在形参面前加三个点( ... )

　　用在数组前面，可以把数组的值全部打散，展开，叫展开运算符. 语法格式:  在数组面前加三个点( ... )

 

不使用Apply的函数调用

我们经常使用Function.prototype.apply，传递一个数组作为参数，使用数组中存放的一组参数调用一个函数。

function doStuff (x, y, z) { }
var args = [0, 1, 2];
// 调用函数，传递args参数
doStuff.apply(null, args);

采用展开用算符我们能够在避免使用apply的同时，轻易的调用函数。只需在数组前加上展开运算符即可。

doStuff(...args);

这段代码变得更短，更清晰，并且不需要使用多余的null!

合并数组

已经有好多种合并数组的方法，但是展开运算符带来了一种全新的方式。

arr1.push(...arr2) // 将arr2 追加到数组的末尾
arr1.unshift(...arr2) // 将arr2 追加到数组的开头

如果你想要整合两个数组，并且想把某个数组放在另一个数组的任意特定位置上，你可以这么做：

var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];

// ["one", "two", "three", "four", "five"]

这是一种比其他方式更短的语句！

拷贝数组

得到一份数组的拷贝是很常见的任务，过去我们使用Array.prototype.slice来做，但现在我们可以使用展开运算符：

var arr = [1,2,3];
var arr2 = [...arr]; // 和arr.slice()差不多
arr2.push(4)

记住：数组中的对象依然是引用值，所以不是任何东西都“拷贝”过去了。

将arguments或者NodeList转换为Array

像拷贝数组一样，我们常常使用Array.Prototype.slice来将NodeList和arguments这种类数组对象转换为真正的数组。但是现在我们能够用展开运算符轻易的实现这项任务：

[...document.querySelectorAll('div')]

使用此法，你甚至可以像数组一样获取参数。

var myFn = function(...args) {
// ...
}

别忘了你也能用Array.from达成相同的目的！

使用Math函数

当然了，展开运算符将数组“展开”成为不同的参数，所以任何可接收任意数量的参数的函数，都能够使用展开运算符来传参。

let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1

Math对象的一系列的方法，正是展开运算符作为唯一参数传递给函数的完美例子。

解构的乐趣

解构是一项很棒的实践方法，我在自己的React项目中以及Node.js 程序中大量的使用到它。你能够使用解构和展开运算符将信息解压到你想要的变量中去：

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

剩余的属性被分配到了展开运算符之后的z变量中。