### 扩展运算符
扩展运算符(spread) 是三个点(...),它如同 `rest` 参数的逆运算,将一个数组转为用逗号分隔的参数序列
```js
console.log(...[1, 2, 3])
// 1 2 3
```
由于扩展运算符可以展开数组,所以不再需要使用 `apply` 方法将数组转为函数的参数
```js
function f (x, y, z) {}
let args = [1, 2, 3]
f(...args)
```
使用数组的扩展运算符简化求出一个数组中的最大值
```js
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77)
```
另外一个例子是通过 `push` 方法将一个数组添加到另一个数组的后面
```js
let arr1 = [1, 2 , 3]
let arr2 = [4, 5, 6]
arr1.push(...arr2)
```
下面来看下扩展运算符的一些应用
#### 合并数组
```js
let more = [3, 4, 5]
[1, 2, ...more]
let arr1 = ['a', 'b']
let arr2 = ['c']
let arr3 = ['d', 'e']
[...arr1, ...arr2, ...arr3]
// ['a', 'b', 'c', 'd', 'e']
```
#### 与解构赋值结合,用于生成数组
#### 函数可以返回多个值
#### 字符串
扩展运算符可以将字符串转为真正的数组
```js
[...'hello']
// ['h', 'e', 'l', 'l', 'o']
```
### Array.from()
`Array.from()`方法将两类对象转为真正的数组,类似数组的对象和可遍历的对象,包括ES6新增的 `Set` 和 `Map`
```js
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
}
let arr = Array.from(arrayLike) // ['a', 'b', 'c']
```
实际应用中,常见的类似数组的对象时DOM操作返回的NodeList集合,以及函数内部的 `arguments` 对象。
```js
// NodeList对象
let ps = document.querySelectorAll('p')
Array.from(ps).forEach(p => {
console.log(p)
})
// arguments对象
function foo () {
let args = Array.from(arguments)
}
```
只要是部署了 `Interator` 接口的数据结构,`Array.from` 都可以将其转换为数组
```js
Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']
```
`Array.from` 还可以接受第二个参数,作用类似于数组的 `map` 方法,用来对每个元素进行操作,将处理后的值放入返回的数组。
```js
Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]
```
### Array.of()
`Array.of()` 方法用于将一组值转为数组
```js
Array.of(3, 11, 8) // [3, 11, 8]
Array.of(3) // [3]
Array.of(3).length // 1
```
`Array.of()` 基本上可以用来替代 `Array()` 或 `new Array()` ,并且不存在由于参数不同而导致的重载。
`Array.of()` 总是返回参数值组成的数组,如果没有参数,就返回一个空数组。
### 数组实例的 copyWithin()
数组实例的 `copyWithin()` 方法会在当前数组内部将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组,也就是说,这个方法会修改当前数组。
```js
Array.prototype.copyWithin(target, start = 0, end = this.length)
```
它接受3个参数:
- `target`:必选,从该位置开始替换数据
- `start`:可选,从该位置开始读取数据,默认0
- `end`:可选,到该位置停止读取数据,默认为数组长度
```js
[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]
```
### 数组实例的 find() 和 findIndex()
数组实例的 `find()` 方法用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为 `true` 的成员,然后返回该成员,如果没有符合条件的成员,则返回 `undefined`
```js
[1, 4, -5, 10].find((n) => n < 0)
// -5
```
数组实例的 `findIndex()` 方法与 `find` 非常类似,返回第一个符合条件的数组成员的位置,如果没找到,则返回 -1
```js
[1, 5, 10, 15].findIndex((value, index, arr) => {
return value > 9
})
// 2
```
### 数组实例的 fill()
`fill()` 方法用给定值填充一个数组
```js
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
```
`fill()` 方法用于空数组的初始化非常方便,数组中已有的元素会被全部抹去。它还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置
```js
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']
```
### 数组实例的 entries()、keys() 和 values()
ES6提供了3个新的数组实例遍历方法: `entries()`、`keys()` 和 `values()`,它们都可以用于遍历数组,并返回一个遍历器对象,可以用 `for...of` 循环遍历。`keys()` 对键名进行遍历,`values()` 对键值进行遍历,`entries()` 对键值对进行遍历。
```js
for (let index of ['a', 'b'].keys()) {
console.log(index)
}
// 0
// 1
```
```js
for (let elem of ['a', 'b'].values()) {
console.log(elem)
}
// 'a'
// 'b'
```
```js
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem)
}
// 0 'a'
// 1 'b'
```
如果不使用 `for...of` 循环,也可以手动调用遍历器对象的 `next()` 方法进行遍历
### 数组实例的 includes()
`Array.prototpye.includes` 方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的 `includes()` 方法类似。
```js
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
[1, 2, NaN].includes(NaN) // true
```
该方法的第二个参数表示搜索的起始位置,默认为0,也可以为负数。
该方法与ES5中的 `indexOf` 很相似,但 `indexOf` 有两个缺点,一是不够语义化,二是它不能正确判断 `NaN`