- 扩展运算符
- 扩展运算符（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>]
```
### ES6中的扩展运算符与数组相关特性详解
#### 一、扩展运算符（Spread Operator）
**定义**：扩展运算符在ES6中被引入，它由三个点（`...`）组成，主要功能是将数组或其他可迭代对象展开成一系列逗号分隔的值。
**基本使用**：
- 展开数组：`console.log(...[1, 2, 3]); // 输出: 1 2 3`
- 在函数调用中混合使用：`console.log(1, ...[2, 3, 4], 5); // 输出: 1 2 3 4 5`
**应用场景**：
1. **复制数组**：
- 写法一：`const a2 = [...a1];`
- 写法二：使用解构赋值 `const [a2] = a1;`
2. **合并数组**：
- ES5：`const merged = arr1.concat(arr2, arr3);`
- ES6：`const merged = [...arr1, ...arr2, ...arr3];`
- 这两种方法都执行浅拷贝。
3. **与解构赋值结合**：
- ES5：`let a = list[0], rest = list.slice(1);`
- ES6：`let [a, ...rest] = list;`
4. **字符串转数组**：
- `let arr = [...'hello']; // ["h", "e", "l", "l", "o"]`
5. **实现 Iterator 接口的对象转数组**：
- `let nodeList = document.querySelectorAll('div');`
- `let array = [...nodeList];`
**注意事项**：
- 扩展运算符不能在参数中间使用，只能位于参数列表的最后。
- 如果扩展运算符后跟的是空数组，则不会产生任何效果。
**示例代码**：
```javascript
function f(v, w, x, y, z) {}
const args = [0, 1];
f(-1, ...args, 2, [3]);
const arr = [
...(x > 0 ? ['a'] : []),
'b',
];
console.log([...[], 1]); // 输出: [1]
```
#### 二、替代函数的apply方法
**传统方式**：
- 使用 `Math.max.apply(null, [14, 3, 77]);`
**ES6方式**：
- 直接使用 `Math.max(...[14, 3, 77]);`
**合并数组**：
- ES5：`Array.prototype.push.apply(arr1, arr2);`
- ES6：`arr1.push(...arr2);`
#### 三、Array.from()
**定义**：`Array.from()` 方法创建一个新的数组实例，从一个类数组对象或可迭代对象转换而来。
**基本用法**：
- 将类数组对象转换为数组：`let arr2 = Array.from(arrayLike);`
- 对每个元素进行处理：`Array.from(arrayLike, (x) => x * x);`
**示例代码**：
```javascript
let arrLike = { length: 3, 0: 'a', 1: 'b', 2: 'c' };
let arr = Array.from(arrLike); // ["a", "b", "c"]
let squares = Array.from({ length: 3 }, (x, i) => i * i); // [0, 1, 4]
```
#### 四、Array.of()
**定义**：`Array.of()` 方法用于将一组值转换为数组。
**基本用法**：
- `let arr = Array.of(3, 11, 8); // [3, 11, 8]`
- `let single = Array.of(3); // [3]`
**特点**：
- 不受参数数量的影响，始终返回数组。
- 行为非常一致。
**示例代码**：
```javascript
let arr = Array.of(3, 11, 8); // [3, 11, 8]
let single = Array.of(3); // [3]
```
### 总结
扩展运算符是ES6中引入的重要特性之一，极大地简化了数组的操作。无论是复制、合并数组还是处理字符串、实现 Iterator 接口的对象，扩展运算符都提供了简洁有效的解决方案。此外，`Array.from()` 和 `Array.of()` 的引入也进一步增强了JavaScript处理数组的能力，使得数组操作更加灵活多样。这些新特性不仅提高了代码的可读性，也降低了出错的可能性。
