数组的扩展
1. 扩展运算符三个点（…），可以展开数组
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>]
扩展运算符的应用
- 复制数组
const a1=[1,2]; //写法1 const a2=[...a1]; //写法2 const [...a2]=a1; - 合并数组（浅拷贝，原数组修改会反映到新数组上）
const arr1=['a','b']; const arr2=['c']; const arr1=['d','e']; [...arr1,...arr2,...arr3] //['a','b','c','d','e'] - 与解构赋值结合，但是只能放在最后一位
const [first, ...rest] = [1, 2, 3, 4, 5]; first // 1 rest // [2, 3, 4, 5] const [...butLast, last] = [1, 2, 3, 4, 5]; // 报错 const [first, ...middle, last] = [1, 2, 3, 4, 5]; // 报错 - 将字符串转换成数组
//将字符串转换成数组 [...'hello'] // [ "h", "e", "l", "l", "o" ] ``` - 实现了 Iterator 接口的对象
任何 Iterator 接口的对象，都可以用扩展运算符转为真正的数组 - Map 和 Set 结构，Generator 函数
扩展运算符内部调用的是数据结构的 Iterator 接口，因此只要具有 Iterator 接口的对象，都可以使用扩展运算符，比如 Map 结构。let map=new map([ [1,'one'], [2,'two'], [3,'three'] ]); let arr=[...map.keys()];//[1,2,3]
2. Array.from()
Array.from方法用于将两类对象转为真正的数组：类似数组的对象和可遍历的对象。
- 将常见的类似数组对象：DOM操作返回的NodeList集合，以及函数内部的arguments对象转换成真正的数组
// NodeList对象 let ps = document.querySelectorAll('p'); Array.from(ps).filter(p => { return p.textContent.length > 100; }); // arguments对象 function foo() { var args = Array.from(arguments); // ... } - 只要是部署了Iterator接口的数据结构，都能将其转换为数组，如字符串，new Set()
- 如果参数是真正的数组，则返回原数组
- 任何具有length属性的对象，都可以通过Array.from方法转换成数组，而扩展运算符不行
- Array.from可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。
Array.from(arrayLike, x => x * x); // 等同于 Array.from(arrayLike).map(x => x * x); Array.from([1, 2, 3], (x) => x * x)；//[1,4,9] //将数组中的布尔值为false的成员转为0 Array.from([1, ,2, ,3],(n)=>n||0);//[1,0,2,0,3]
3. Array.of() 方法用于将一组值，转换为数组
Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组。
Array.of(3,11,8) //[3,11,8]
Array.of(3).length //1
4. Array.of() 方法用于将一组值，转换为数组
在当前数组的内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组，这个方法会修改当前数组。
它接受三个参数：
1.target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
2.start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。
3.end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
Array.prototype.copyWithin(target, start = 0, end = this.length)
//将3到结束位置的数据复制到从0开始的位置去
[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]
5. 数组实例的 find() 和 findIndex()
- find()用于查找数组中的第一个满足条件的数组成员，它的参数是一个回调函数，所有成员依次执行该函数，直到找到满足条件的数组成员并返回true，如果没有符合条件的成员则返回undefined
[1, 4, -5, 10].find((n) => n < 0) // -5 [1, 5, 10, 15].find(function(value, index, arr) { return value > 9; }) // 10 - findIndex()用于返回第一个符合条件的数组成员的位置，如果没有则返回-1
[1, 5, 10, 15].findIndex(function(value, index, arr) { return value > 9; }) // 2 - 这两个方法都可以接受第二个参数，用来绑定回调函数的this对象
//回调函数中的this指向person对象 function f(v){ return v > this.age; } let person = {name: 'John', age: 20}; [10, 12, 26, 15].find(f, person); // 26 - 弥补数组的indexOf（）方法不能发现NaN的不足
6. 数组实例的 fill()
fill方法使用给定值，填充一个数组
//数组中的已有元素，被全部抹去
['a','b','c'].fill(7);//[7,7,7]
//fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。
//从 1 号位开始，向原数组填充 7，到 2 号位之前结束
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']
7. 数组实例的 entries()，keys() 和 values()
- keys()是对键名的遍历
- values()是对键值的遍历
- entries()是对键值对的遍历
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'].entries()){ console.log(index,elem); //0 'a',1 'b' }
8. 数组实例的 includes()
Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值
该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
9. 数组实例的 flat()，flatMap()
- 数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。
flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。
[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]
[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
//如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。
[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]
//如果原数组有空位，flat()方法会跳过空位。
[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]
- flatMap()方法对原数组的每个成员执行一个函数，然后对返回值组成的数组执行flat()方法，该方法返回一个新数组，不改变原数组。
// 相当于 [[2, 4], [3, 6], [4, 8]].flat() [2, 3, 4].flatMap((x) => [x, x * 2]) // [2, 4, 3, 6, 4, 8] //flatMap()只能展开一层数组 // 相当于 [[[2]], [[4]], [[6]], [[8]]].flat() [1, 2, 3, 4].flatMap(x => [[x * 2]]) // [[2], [4], [6], [8]]