ES6中扩展运算符(spread)和剩余运算符(rest)详解

参考文献：
1.https://blog.csdn.net/qq_43523725/article/details/115937213
2.https://blog.csdn.net/weixin_43249693/article/details/88222392

在ES6中。 三个点(…) 有2个含义。分别表示 扩展运算符 和 剩余运算符。

1.剩余运算符(Rest)，三个英文半角句点

1.在函数或解构中使用
在函数中，虽然arguments可以用来获取实参，但获取结果是类数组，需转为数组**(Array.prototype.slice.call(arguments))**，再遍历数组获得参数
2.把散列元素变成一个集合
3.放在最后写，接受剩余元素

// 剩余运算符(Rest)
// 在函数或解构中使用
// 在函数中使用，arguments仅为类数组，需转成数组后遍历，较麻烦
function fn() {
    
    
    var arguments = Array.prototype.slice.call(arguments)
    console.log(arguments)
}
fn(1, 2, 3); // 输出：[1, 2, 3]

// 用剩余运算符
function fn1(...arr){
    
    
    console.log(arr);
}
fn1(1, 2, 3); // 输出：[1, 2, 3]

// 在解构数组中使用
let [a,b,...arr] = [1,2,3,4,5];
console.log(arr); // 输出：[3, 4, 5]

// 在解构对象中使用
let {
    
    d, e, ...f} = {
    
    d:1, e:2, f:3, g:4, h:5};
console.log(f); // 输出：{f:3, g:4, h:5}

2.扩展运算符，三个英文半角句点

1.把一个集合变成散列元素
2.函数参数传递
3.数组的深拷贝：之前用arr.concat()，现在用扩展运算符：[…arr]
4.对象的深拷贝

// 3.扩展运算符
// 把一个集合变成散列元素
console.log(...[1,2,3]); // 输出：1 2 3
// 函数参数传递
function fn(a,b,c){
    
    
    console.log(a, b, c);
}
fn(...[1,2,3]); // 将数组拆开，依次传到形参中

// 数组的深拷贝
// 不使用扩展运算符
let arr1 = [1,2,3];
let arr2 = arr1.concat();
arr2.push(4);
console.log(arr1); // 输出[1, 2, 3]

// 使用扩展运算符
let arr3 = [1,2,3]
let arr4 = [...arr3];
arr4.push(4);
console.log(arr3); // 输出[1, 2, 3]

// 对象的深拷贝
let obj = {
    
    
    a:1,
    b:2,
    c:3
}
let obj2 = {
    
    ...obj};
obj2.d = 4;
console.log(obj); // obj不变

最后总结：

1.扩展运算符用三个点号表示，功能是把数组或类数组对象展开成一系列用逗号隔开的值。
rest运算符也是三个点号，不过其功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一个数组。

2.当三个点(…)在等号左边，或者放在形参上。为 rest 运算符。
当三个在等号右边，或者放在实参上，是 spread运算符。

3.放在被赋值一方是rest 运算符。放在赋值一方式 spread运算符。