ES6对数组的扩展

1. 扩展运算符
   扩展运算符(spread)是三个点...。相当于rest参数的逆运算，将一个数组转为用空格分隔的参数序列

console.log(...[1,2,3,4])  --->  1 2 3 4
console.log(...document.querySelectorAll('div;))  --->  <div></div> <div></div> <div></div>

1.1 扩展运算符的应用
1.1.1) 复制数组
数组是符合的数据类型，直接复制的话，只是复制了只想底层数据结构的指针，而不是克隆一个新的数组

const a1 = [1,2]
const a2 = a1
a2[0] = 2
console.log(a1)  --> [2,2]
console.log(a2)  --> [2,2]

扩展运算符提供了复制数组的渐变写法

const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;

1.1.2) 合并数组

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

**// ES5 的合并数组**
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

**// ES6 的合并数组**
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

1.1.3) 字符串转化为数组

[...'hello']  --->  [‘h’,'e','l','l','o']

2. Array.from()
   Array.from() 方法用于将类似数组的对象(array-like object) 和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

3. Array.of()
   Array.of() 方法用于将一组值转换为数组

 Array.of(3,4,5,6,7)  --> [3,4,5,6,7]
 Array.of(3)   --> [3]
 Array.of(3).length  --> 1 
 对比  Array()  方法
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
Array.of()方法
Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

4. 数组实例的copyWithin()
   数组实例的copyWithin()方法,在当前数组内部，将指定位置的成员复制到其他位置(会覆盖原有成员)，然后返回当前数组。也就是说，使用这个方法，会修改当前数组

Array.prototype.copyWithin(target, start = 0, end = this.length)

它接受三个参数。
-target(必需)：从该位置开始替换数据，如果为负值，表示倒数
-start(可选)：从该位置开始读取数据，默认为0，，如果为负值，表示从末尾开始计算
-end(可选)：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算
这三个参数都应该是数值，如果不是，会自动转为数值

[1, 2, 3, 4, 5].copyWithin(0, 3)   ---->   [4, 5, 3, 4, 5]

5. 数组实例的find()和findIndex()
   数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，知道找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

let arr1 = [1,2,3,-5,-1,-10]
console.log(arr1.find(n=> n < 0))  ---> -5
代码解释：找出数组中第一个小于0的成员并返回

数组实例的findIndex方法的用法与find方法类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回 -1。

6. 数组实例的fill()
   fill方法使用给定值，填充一个数组

['a','b','c'].fill(7)  ---> [7,7,7]
new Array(3).fill(7)  ---> [7,7,7,]

fill方法用于空数组的初始化非常方便。数组种已有的元素，会被全部抹去。
fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置

['a','b','c'].fill(7,1,2)   ---->  ['a',7,'c']
代码解释：fill方法从1号位开始，向原数组填充7，到2号位之前结束

7. 数组实例的entries(),keys()和values()
   ES6提供三个新的方法 —— entries(),keys(),values() —— 用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是key()是对键名的遍历,values()是对键值的遍历，enteies()是对键值对的遍历。

for(let index of ['a','b'].keys()){
	console.log(index)
	//  0
	//  1 
}
for(let elem of ['a','b'].values()){
	console.log(elem)
	//  'a'
	//  'b'
}
for(let [index,elem] of ['a','b'].enteries()){
	console.log(index,elem)
	//  0 'a'
	//  1 'b'
}

8. 数组实例的includes()
   Array.prototype.includes()方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes 方法类似，ES2016引入了该方法。

[1,2,3].includes(2)  //  true
[1,2,3].includes(4)   //  false
[1,2,NaN].includes(NaN)  // true

在includes()方法之前，我们常用indexOf()方法，检查数组中是否包含某个值
indexOf方法有两个缺点，一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1,表达起来不够直观。而是，它内部使用严格相等运算符(===),这会导致对NaN的误判。

[NaN].indexOf(NaN)
//  -1

9. 数组实例的flat()，flatMap()
   数组成员还是数组时，可以用Array.prototype.flat() 用于将嵌套的数组“拉平”，该方法返回一个新数组，对元数据没有影响。

[1,2,3,[4,5]].flat()   --->  [1,2,3,4,5]

flat()方法只会“拉平”一层，如果要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1

[1,2,[3,4,[5,6]]].flat()   --->  [1,2,3,4,[5,6]]
[1,2,[3,4,[5,6]]].flat(2)   --->  [1,2,3,4,5,6]

如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数

[1,2,[3,4,[5,6]]].flat(Infinity)   --->  [1,2,3,4,5,6]

如果原数组有空位，flat()方法会跳过空位

[1,2,,4,5].flat()   --->  [1,2,4,5]