ES6|扩展运算符/Rest参数——“...“

扩展运算符和Rest参数都用符号"…"来表示，但是表达的确实相反的意思。扩展运算符是将固定的数组内容“打散”到参数里去，而Rest参数是将不定的参数“收敛”到数组中。

扩展运算符

应用一：扩展运算符拆分数组

function sum(x = 1, y = 2, z = 3) {
    return x + y + z
}

console.log(sum(...[4])) // 9
console.log(sum(...[4, 5])) // 12
console.log(sum(...[4, 5, 6])) // 15

扩展运算符用来解决已知参数集合应用到固定参数的函数上，如果没有扩展运算符，可能需要这样做：

function sum(x = 1, y = 2, z = 3) {
    return x + y + z
}

console.log(sum.apply(null, [4])) // 9
console.log(sum.apply(null, [4, 5])) // 12
console.log(sum.apply(null, [4, 5, 6])) // 15

应用二：扩展运算符合并数组

let arr1=[1,2,3]
let arr2=[4,5,6]
Array.prototype.push.apply(arr1,arr2)//ES5数组连接法
arr1.push(...arr2)//ES6数组连接法
console.log(arr1)

应用三：扩展运算符拆分字符串

let str='java'
var arr=[...str]
console.log(arr)//[j,a,v,a]

Rest参数

Rest参数通常应用在函数参数不确定个数的场景下，比如求和运算：

function sum(...nums) {
    let num = 0
    nums.forEach(function(item) {
        num += item * 1
    })
    return num
}

console.log(sum(1, 2, 3)) // 6
console.log(sum(1, 2, 3, 4)) // 10

如果没有这种语法，可能需要写成这样：

function sum() {
    let num = 0
    Array.prototype.forEach.call(arguments, function(item) {
        num += item * 1
    })
    return num
}

console.log(sum(1, 2, 3)) // 6
console.log(sum(1, 2, 3, 4)) // 10

注意：arguments 不是数组，所以不能直接使用数组的原生 API 如 forEach，而 Rest Parameter 是数组，可以直接使用数组的原生 API。

再看两个例子：

function foo(x,...args){
    console.log(x)
    console.log(args)
}
foo(1,2,3)//1 [2,3]
foo(1,2,3,4,5)//1 [2,3,4,5]

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

由此可见，可以将Rest参数理解为“剩下的所有参数”。