基本使用

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

let number = [10, 20]
function add(x, y) {
  return x + y
}
add(...number) // 30

其他应用

替代函数的 apply 方法

// ES5
function f(x, y, z) {
  console.log(x, y, z)
}
var args = [0, 1, 2]
f.apply(null, args) // 依次输出 0 1 2
f(args) // 不使用 apply 依次输出 [0, 1, 2] undefined undefined

// ES6
function f(x, y, z) {
  console.log(x, y, z)  
}
let args = [0, 1, 2]
f(...args) // 依次输出 0 1 2

求出一个数组最大元素

// ES5
Math.max.apply(null, [14, 3, 77])
// ES6
Math.max(...[14, 3, 77]) // 等同于 Math.max(14, 3, 77)

由于 JavaScript 不提供求数组最大元素的函数，所以只能盗用 Math.max 函数，将数组数组转为一个参数序列，然后求最大值。ES6 有了扩展运算符后，就可以直接用 Math.max 了。

将数组添加到另一数组尾部

// ES5
var arr1 = [0, 1, 2]
var arr2 = [3, 4, 5]
Array.prototype.push.apply(arr1,arr2)
arr1.concat(arr2)

// ES6
arr1.push(...arr2)

上面代码的 ES5 写法中，push 方法的参数不能是数组，所以只好通过 apply 方法变通使用 push 方法。ES6 有了扩展运算符，就可以直接将数组传入 push 方法。

复制数组

// ES5
const a1 = [1, 2]
const a2 = a1.concat()

// ES6
const a1 = [1, 2]
const a2 = [...a1]

合并数组

let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = [...arr1, ...arr2]

它们的成员都是对原数组成员的引用，这就是浅拷贝。如果修改了引用指向的值，会同步反映到新数组。

合并对象

let obj1 = { name:'lxx' }
let obj2 = { age:25, pets:'panda' }
let obj3 = { ...obj1, ...obj2 }

等同于 Object.assign()

let obj3 = Object.assign({}, obj1, obj2)