ES6学习第七节：Array扩展

• 扩展运算符

扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

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

function add(x, y) {
  return x + y
}
const numbers = [4, 38]
// 扩展运算符，将传入的数组变为参数序列
console.log(add(...numbers)) // 42
console.log(add.apply(null, numbers)) // 42

• 替代apply方法

function add(x, y) {
  return x + y
}
const numbers = [4, 38]
// ES6写法
console.log(add(...numbers)) // 42
// ES5写法
console.log(add.apply(null, numbers)) // 42

console.log(Math.max.apply(null, [14, 2, 77])) // 77
console.log(Math.max(...[14, 2, 77])) // 77
console.log(Math.max(14, 2, 77)) // 77

扩展运算符的应用

• 复制数组

var a1 = [1, 2]
var a2 = [...a1]
a1[0] = 2
console.log(a1); // [2,2]
console.log(a2) // [1,2]

• 合并数组

const arr1 = ['a', 'b']
const arr2 = ['c']
const arr3 = ['d', 'e']
console.log(arr1.concat(arr2, arr3)) // [ 'a', 'b', 'c', 'd', 'e' ]
console.log([...arr1, ...arr2, ...arr3]) // [ 'a', 'b', 'c', 'd', 'e' ]

• 与解构赋值结合

const [first, ...rest] = [1, 2, 3, 4, 5]
console.log(first, rest) // 1 [ 2, 3, 4, 5 ]

• 字符串

console.log([...'Hello']) // [ 'H', 'e', 'l', 'l', 'o' ]

• Map、Set和Generator函数

具有 Iterator 接口的对象，都可以使用扩展运算符

let map = new Map([[1, 'one'], [2, 'two'], [3, 'three']])
console.log([...map.keys()])
const set = new Set([1, 2, 3, 4])
console.log(...set)

var foo = function*() {
  yield 1
  yield 2
  yield 3
}
console.log(...foo())