一、作用

…可作为：

• 扩展运算符：把数组或者类数组展开成用逗号隔开的值
• rest参数：把逗号隔开的值组合成一个数组

二、用法

1. 扩展运算符

1. 将数组展开成用逗号隔开的值：

function foo(a, b, c) {
     console.log(a, b, c)
 }
 let arr = [1, 2, 3]
 foo(...arr) //若不使用扩展运算符，则需将foo的参数改成foo([a,b,c])
 console.log(...arr) //输出 1 2 3

2. 将两个数组合并成一个数组：

let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
// Array.prototype.push.apply(arr1, arr2) // ES5的原型方式，push()方法只能push一个个值进去，而不能是整个数组
arr1.push(...arr2) // 将arr2展开成一个个值
console.log(arr1)

3. 扩展一个字符串：

let str = 'kakaDorothy'
var arr = [...str]
console.log(arr)
// ["k","a","k","a","D","o","r","o","t","h","y"]

2.rest参数

rest可解释为剩余的参数

1. 不定参数的函数求和：

function foo(x, y, z) { // 参数的个数可能不确定
 // console.log(arguments) // arguments是一个类数组，可循环遍历它得到当前数组参数的值
    let sum = 0
    
 // ES5的方式
 // Array.prototype.forEach.call(arguments, function(item){
     //     sum += item
     // })
     
// ES6
// 通过调用from() ，将类数组转换为真正的数组，再循环遍历它
Array.from(arguments).forEach(function(item){
         sum += item
     })
     return sum
 }
 // 传入不同个数的参数
 console.log(foo(1, 2))
 console.log(foo(1, 2, 3))

通过…来接收参数，把逗号隔开的值组合成一个数组：

 function foo(...args){
     console.log(args)
     let sum = 0
     // 循环遍历求和
     args.forEach(function(item){
         sum += item
     })
     return sum
 }
 console.log(foo(1, 2))
 console.log(foo(1, 2, 3))

2. 获取剩余的参数：

// 确定会传一个参数，但是剩余的参数不知道会传几个
// 即把确定的拎走，把剩余的给我
function foo(x, ...args) {
    console.log(x)
    console.log(args)
}
foo(1, 2, 3)
foo(1, 2, 3, 4)

3. 用于解构赋值：

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

总结

...有两种含义，这两种操作相当于是互逆操作

1. 若把…放在等号左边或者放在形参上面，那么它就是rest参数
2. …若在等号的右边或者放在实参上，则是扩展运算符