ES6 展开语法（...）与剩余参数

MDN介绍：展开语法(Spread syntax), 可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。

一、在函数调用时使用

在没有展开语法之前，通过apply（）来将数组中元素传递给函数。

// 使用apply()方法展开
function f(a, b) {
    return a + b;
}
const c = [1, 2];
// apply()方法的作用是改变this的指向
// apply()的第一个参数为空，表示this指向全局对象
// 这里相当于将数组c展开，作为函数参数
const result = f.apply(null, c);
console.log(result); // 3

然鹅，我们有了展开语法，那可就方便太多了。

  function f(a, b) {
    return a + b;
}
const c = [1, 2];
// 使用展开语法
const result = f(...c)
console.log(result); // 3

灵活使用展开语法传递所有参数

function f(a,b,c,d,e){
    return a+b+c+d+e
}
const arr = [1,2,3]
const result = f(0,...arr,4)
console.log(result); // 10

二、在构造字面量数组时使用

使用展开语法来进行构造新数组，很方便。

// 构造新数组
const arr = ['paul','rick','join']
const newArr = ['apple',...arr,'banbana']
console.log(newArr); //  ["apple", "paul", "rick", "join", "banbana"]

数组拷贝：使用展开语法来进行数组拷贝，执行的是浅拷贝，即只会拷贝一层。

// 数组拷贝
const arr = ['paul', 'rick', 'join'];
const newArr = [...arr];
console.log(newArr); // ["paul", "rick", "join"]

数组连接：

// 数组连接
const arr1 = [1,2,3]
const arr2 = [4,5,6]
const result = [...arr1,...arr2]
console.log(result) // (6) [1, 2, 3, 4, 5, 6]

三、构造字面量对象时候使用展开语法

对象拷贝

// 对象拷贝
const person = {
    name:'paul',
    age:34
}
const p = {...person}
console.log(p) // {name: "paul", age: 34}

对象合并：在对象合并时，如果对象的属性相同，则会以后面的属性为准，也就是说不会存两个相同的属性，如果相同，后面的属性值会对前面的属性值产生替换。最终合并出来的结果对象的属性会包含被合并对象的所有属性。

// 对象合并
const person1 = {
        name: 'paul',
        age: 34,
        sex:'male'
    },
    person2 = {
        name: 'join',
        age: 22,
    };
const p = { ...person1,...person2 };
console.log(p); // {name: "join", age: 22, sex: "male"}

注意：在数组或函数参数中使用展开语法时, 该语法只能用于可迭代对象

四、剩余参数

剩余语法(Rest syntax) 看起来和展开语法完全相同，不同点在于, 剩余参数用于解构数组和对象。从某种意义上说，剩余语法与展开语法是相反的：展开语法将数组展开为其中的各个元素，而剩余语法则是将多个元素收集起来并“凝聚”为单个元素。

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

// 使用剩余参数
// 剩余参数自动转换成一个数组c
function f(a, b, ...c) {
    console.log(a, b, c); // 1 2 (5) [3, 4, 5, 6, 7]
}
f(1,2,3,4,5,6,7);

注意:使用剩余参数作为形参，必须放在形参最后的位置，否则会报错：

function f(...a, b, c) {
    console.log(a, b, c); // Uncaught SyntaxError: Rest parameter must be last formal parameter
}
f(1,2,3,4,5,6,7);

参考：展开语法 - JavaScript | MDN

   剩余参数 - JavaScript | MDN