ES6 スプレッド オペレーターの機能

1.Apply を使用しない関数呼び出し

多くの場合、Function.prototype.apply を使用し、配列をパラメーターとして渡し、配列に格納された一連のパラメーターを使用して関数を呼び出します。

function doStuff(x,y,z){}
var args = [0,1,2]

//调用函数，传递args参数
doStuff.apply(null,args)

スプレッド演算子を使用すると、apply の使用を避けながら関数を簡単に呼び出すことができます。スプレッド演算子を配列に追加するだけです。

doStuff(...args)

2. 配列を結合する

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

//整合两个数组，并且把某个数组放在另一个数组的任意特定位置上
var arr1 = [a,b]
var arr2 = [d,...arr1,e,f]

console.log(arr2) //[d,a,b,e,f]

3. 配列をコピーする

过去是通过Array.prototype.slice来进行拷贝
//通过展开运算符进行拷贝
var arr  = [1,2,3]
var arr2 = [...arr] //arr.slice()类似
arr2.push(4)

注意：数组的对象依然是引用值，所以不是任何东西都拷贝过去了

4. 引数または NodeList を配列に変換する

Array.prototype.slicel を使用して NodeList の配列のようなオブジェクトと引数を実際の配列に変換する前

これはスプレッド演算子を使用すると簡単に実現できます

[...document.querySelectorAll('div')]
甚至可以像数组一样获取参数
var myFun = function(...args){

    //...
}
//也可以用Array.from达成相同的目的

5. 数学関数を使用する

任何可接收任意数量的参数的函数，都可以使用展开运算符进行传参
let numbers = [2,3,5,1]
Math.min(...numbers) // 1

6. 解体する

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变量中