扩展运算符

把数组或者类数组展开成逗号隔开的值

例 1： 如何将函数的参数同数组arr中的值对应匹配？

// 结构赋值需要等号2边的形式要一样，a,b,c不是数组的形式[a,b,c]
function foo(a,b,c){
console.log(a,b,c);
}

let arr = [1,2,3]

// ...arr = 1,2,3
foo(...arr)                                //  1 2 3     

例 2：数组的合并

ES5实现

let arr1 = [1,2,3]
let arr2 = [4,5,6]
Array.prototype.push.apply(arr1,arr2)
console.log(arr1);                     //  [1, 2, 3, 4, 5, 6]

ES6实现

通过扩展运算符把数组打散再push到数组中

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

例 3： 将字符串转成数组

let str = 'EcmaScript'
let arr = [...str]
console.log(arr);                  // ['E', 'c', 'm', 'a', 'S', 'c', 'r', 'i', 'p', 't']

rest参数

剩余运算符

把逗号隔开的值组合成一个数组

// 传入不定个数的实参
function foo(...args){
    console.log(args);
}
console.log(foo(1,2));        // [1,2]
console.log(foo(1,2,3));      // [1,2,3]

例1： 传入的实参可能是不确定的，判断不定参数的和

ES5中实现

function foo(x,y,z){
    let sum = 0
    Array.prototype.forEach.call(arguments,function(item){
        sum += item
    })
    return sum
}
console.log(foo(1,2));              // 3
console.log(foo(1,2,3));            // 6

ES6中实现

使用Array.from()将伪数组转成真的数组，再遍历

function foo(x,y,z){
    let sum = 0
    Array.from(arguments).forEach(function(item){
        sum += item
    })
    return sum
}
console.log(foo(1,2));           // 3
console.log(foo(1,2,3));         // 6

rest参数实现

function foo(...args){
let sum = 0
args.forEach(function(item){
    sum += item
})
return sum
}
console.log(foo(1,2));
console.log(foo(1,2,3));

例2：获取剩余的不确定的参数

在写函数形参的时候，不知道调用函数者会传几个实参时，可以用剩余运算符取到不确定的参数

// 只确定x，剩余的参数不确定
function foo(x,...args){
    console.log(x);
    console.log(args);
}
console.log(foo(1,2,3));        // 1 [2,3]
console.log(foo(1,2,3,4));      // 1 [2,3,4]

例3： 剩余参数和解构结合

let [x,...y] = [1,2,3]
console.log(x);             // 1
console.log(y);             // [2,3]

总结

• 如果...放在等号的左边或者放在形参上那么它就是rest剩余参数
• 如果...放在等号的右边或者放在实参上那么它就是扩展运算符