ES6 学习6 数组的扩展

　　本章学习要点:

1. 扩展运算符
2. Array.from()
3. Array.of()
4. 数组实例的 copyWithin()
5. 数组实例的 find() 和 findIndex()
6. 数组实例的 fill()
7. 数组实例的 entries()，keys() 和 values()
8. 数组实例的 includes()
9. 数组实例的 flat()，flatMap()
10. 数组的空位

1、扩展运算符

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

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>]

该运算符主要用于函数调用。

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

上面代码中add(...numbers)是函数的调用，它使用了扩展运算符。该运算符将一个数组，变为参数序列。

扩展运算符后面还可以放置表达式。

let x = 0;
const arr = [
  ...(x > 0 ? ['a'] : []),
  'b',
];
console.log(arr) // ["b"]

如果扩展运算符后面是一个空数组，则不产生任何效果。

[...[], 1]   // [1]

注意，扩展运算符如果放在括号中，JavaScript 引擎就会认为这是函数调用。如果这时不是函数调用，就会报错。

(...[1, 2])
// Uncaught SyntaxError: Unexpected number

console.log((...[1, 2]))
// Uncaught SyntaxError: Unexpected number

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