3. 展开语法

前言

展开语法用...表示，它可以将可迭代的对象拆分成单个的值（语法层面展开）

展开语法通常将可迭代的对象的值传递到函数的参数中

1. 函数传参中的应用

如果我们希望将数组作为参数传递给函数中的参数，我们可以使用apply()方法。该方法接受一个数组，将他们拆成单个参数传递给函数进行调用。

function myFunction(a,b){
    return a+b;
}
var data = [1,4];
var result = myFunction.apply(null, data);
console.log(result);    // 5

ES6展开语法这样写：

function myFunction(a,b){
    return a+b;
}
var data = [1,4];
var result = myfunction(...data);
console.log(result);    // 5

代码运行期间，js解释器调用myFunction前，将会用(1,4)替换(...data)

2. 数组相关应用

数组的合并

展开数组可将数组添加到另外一个数组中，成为其中一部分

var arr1 = [2,3,4];
var arr2 = [1, ...arr1,5,6,7];    
console.log(arr2);    // [1,2,3,4,5,6,7]

在push方法中运用

将一个数组的内容追加到另一个数组末尾

var arr1 = [2,3,4];
var arr2 = [1];
Array.property.push.apply(arr2, arr1);
console.log(arr2)    // [1,2,3,4]

展开语法这样写：

var arr1 = [2,3,4];
var arr2 = [1];
array2.push(...arr1);
console.log(arr2);

传递多个数组参数

var arr1 = [1];
var arr2 = [2];
var arr3 = [...arr1,...arr2,...[3,4]];
var arr4 = [5];
function myFunction(a,b,c,d,e){
    return a+b+c+d+e;
}
var result = myFunction(...arr3,...arr4);
console.log(result);    // 15

3. 剩余参数的应用

js函数内部有个arguments对象，可以全部拿到实参。ES6带来了新对象，可以拿到除开始参数外的剩余参数

function myFunction(a,b){
    const args = Array.prototype.slice.call(arguments, myFunction.length);
    console.log(args);    
}
myFunction(1,2,3,4,5);    // 3，4，5

展开语法这样写：

function myFunction(a,b,...args){    // 可简写为args
    console.log(args);   // 3,4,5
}
myFunction(1,2,3,4,5);

PS：一旦函数的第一个参数使用剩余参数，就不能添加任何参数，否则报错 function fn(...rest,foo){} // SyntaxtError