ES6 - 扩展运算符(spread)与剩余参数运算符(...rest)

一. 剩余参数（...rest）

• 作用：将一个不定数量的参数表示为一个数组（旨在取代arguments）

• 首先，我们看看arguments

function show(){
    return arguments;
}
console.log(show(1,2,3,4));// [Arguments] { '0': 1, '1': 2, '2': 3, '3': 4 }

• arguments是一个类数组对象，表示输入的所有实参，但没法直接使用Array的方法。

console.log(show(1,2,3,4).sort());// TypeError: show(...).sort is not a function

• 转换arguments为数组

// Array.from()
console.log(Array.from(show(1,2,3,4)));// [1,2,3,4]
// Array.prototype.slice.call()
console.log(Array.prototype.slice.call(show(1,2,3,4)));// [1,2,3,4]

• 接下来，看看剩余参数是什么

function show(...args){
    return args;
}
console.log(show(1,2,3,4));// [1,2,3,4]

• 剩余参数居然是一个真正的数组，而且看起来作用和arguments一样，那有什么不同或者是改进呢？来看下一个例子

function show(a,...args){
    return args;
}
console.log(show(1,2,3,4));// [2,3,4]

• 估计大家都猜到了，剩余参数顾名思义就是剩下的参数，指没有对应形参的实参（也就是没显式命名的那些参数），上一个例子中...args对应的是后面三个参数。

• 总结：剩余参数可以看做是arguments的升级版，直接返回一个数组，可以更方便使用数组的方法来操作参数。

• 同时，配合ES6的解构赋值可以方便取参

function show(a,...[b,c,d]){
    return b + c + d;
}
console.log(show(1,2,3,4));// 9

二. 扩展运算符（...）

• 原理：遍历数组或对象内的可枚举元素，并展开。
• 例子1：展开字符串，返回数组

let arr1 = [...'hello'];
console.log(arr1);// [ 'h', 'e', 'l', 'l', 'o' ]
// 等价于
let arr2 =  'hello'.split('');
console.log(arr2);// [ 'h', 'e', 'l', 'l', 'o' ]

• 例子2：合并数组或对象

// 合并数组
let arr1 = [1,2,3];
let arr2 = [4,5,6];
console.log([...arr1,...arr2]);// [ 1, 2, 3, 4, 5, 6 ]
// 等价于
console.log(arr1.concat(arr2));// [ 1, 2, 3, 4, 5, 6 ]

// 合并对象
let obj1 = {name:'tom'};
let obj2 = {age:21};
console.log({...obj1,...obj2});// { name: 'tom', age: 21 }
// 等价于
console.log(Object.assign(obj1,obj2));// { name: 'tom', age: 21 }

• 例子3：函数传参

function sum(a,b,c){
    return a + b + c;
}
let arr = [1,2,3];
console.log(sum(...arr));

• 例子4：解构赋值

let [first,...arr] = [1,2,3,4,5];
console.log(arr);// [2,3,4,5]

• 例子5：转Set结构为数组(用于数组去重)

let arr = [1,2,2,'a','a'];
let result = [...new Set(arr)];
console.log(result);// [ 1, 2, 'a' ]

• 例子6：替代apply

let max1 = Math.max.apply(null,[1,2,3,4]);
// 等价于
let max2 = Math.max(...[1,2,3,4]);
// 等价于
let max3 = Math.max(1,2,3,4);
console.log(max1);// 4
console.log(max2);// 4
console.log(max3);// 4