持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情
前言
在解构赋值的时候，我们经常会见到[...a]=[1,2,3]用以获取数组元素，这个...就叫做扩展运算符，是ES6中新增的符号用于将数组元素转为用逗号分隔的序列。
除此之外，书中还提到ES6还新增了许多方法用于数组的操作，下面让我们来学习一下。
数组的扩展
扩展运算符
上面提到了扩展运算符用于分隔数组元素，同时将他作为函数参数使用就称作rest参数，作用相反的为聚合数组元素。这样就可以替代之前的function.apply(null,args)的传参操作
console.log(...[1,2,3]) //1,2,3
function fun(...b){
console.log(b)
}
fun(1,2,3) //[1,2,3]
除了这些，扩展运算符还可以用于复制数组（因为只能复制最外层实际上还是为浅拷贝）。数组的slice方法、concat方法、以及之后讲到的Array.from方法等都算是浅拷贝
const a=[1,2,3,4,5]
const a1=[...a]
a[0]=10
console.log(a1); //[ 1, 2, 3, 4, 5 ] 未被修改
const b=[[1],[2],[3]]
const b1=[...b]
b[0][0]=[10] //修改第二层数值
console.log(b1); //[ [ [ 10 ] ], [ 2 ], [ 3 ] ] 被修改
不只是数组，只要有iterator接口的数据结构都能够运用扩展运算符使其转为数组。
[...str]="hello"
console.log(str); //[ 'h', 'e', 'l', 'l', 'o' ]
[...s] = new Set([1, 2, 3])
console.log(s); //[1,2,3]
[...m]=new Map([[0,1],[1,2],[2,3]]).values()
console.log(m); //[1,2,3]
扩展的数组方法
Array.from()
此方法可以将伪数组和布置了iterator接口的对象例如遍历html元素的NodeList、arguments参数数组、字符串、set结构、map结构。
let node = document.querySelectorAll('p');
console.log(Array.from(node))
function a(){
console.log(Array.from(arguments))
}
a(1,"1",[1,2,3]) //[ 1, '1', [ 1, 2, 3 ] ]
console.log(Array.from(new Set([1,2,3]))); //[1,2,3]
Array.of()
此方法可以将一组值转换为数组，用于弥补Array()、new Array()的不足
console.log(Array(3)); //[ , , ]
console.log(Array(3,4,5));[3,4,5]
console.log(Array.of(3));[3]
console.log(Array.of(3,4,5));[3,4,5]
可以看到Array()当只有一个参数和多个参数输出不一致，而Array.of()只有没有参数时返回空数组，其余皆返回由参数值组成的数组
扩展的数组实例方法
Array.prototype.copyWithin()
作用：copyWithin() 方法浅复制数组（即原数组变，目标数组也改变）的一部分到同一数组中的另一个位置，并返回它，并且不会改变原数组的长度(也就是说，只能复制数组的一部分直到数组末尾，并不会增加长度)。
参数： array.copyWithin(target, start, end)
target、start、end皆为数组下标索引且为整数值，当为负数则从末尾开始计算- 若有
end索引，则复制的数组索引结尾至end索引前一位，不包括end索引
注意，此方法会改变原数组
const arr = ['a', 'b', 'c', 'd', 'e'];
// 把数组下标3至4的值复制到0
console.log(arr.copyWithin(0, 3, 4));
// ["d", "b", "c", "d", "e"]
// 把数组下标3起始的值复制到下标1
console.log(arr.copyWithin(1, 3));
//["d", "d", "e", "d", "e"]
Array.prototype.find()
作用： find() 方法返回数组中满足回调函数的第一个元素的值。否则返回 undefined。
参数： array.find(callback, thisArg)
callback
在数组每一项上执行的函数，接收 3 个参数：
-
value当前遍历到的元素。
-
index（可选）当前遍历到的索引。
-
array（可选）数组本身。
thisArg（可选）
执行回调时用作 this 的对象。
arr=[1,2,3,4,5]
console.log(arr.find(value=>value>3)); //4
console.log(arr.find(value=>value>5)); //undefined
Array.prototype.findIndex()
作用： findIndex()方法返回数组中满足回调函数的第一个元素的索引。未找到则返回-1。
参数： array.findIndex(callback, thisArg)
参数与find()参数一致，在此不再多做赘述
arr=[1,2,3,4,5]
console.log(arr.findIndex(value=>value>3)); //3
console.log(arr.findIndex((value) => value > 5)) //5
Array.prototype.fill()
作用： fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
参数： array.fill(value, start, end)
value
用来填充数组元素的值。
其余与copyWithin的start、end参数一致
注意，此方法会改变原数组
arr=[1,2,3,4,5]
console.log(arr.fill(6,3,4)); //[ 1, 2, 3, 6, 6 ]
console.log(arr.fill(6,0)); //[ 6, 6, 6, 6, 6 ]
entries()，keys() 和 values()
这三个方法在数组实例中也能使用，但要注意返回的是iterator迭代器对象，可通过for...of遍历
arr=[1,2,3,4,5]
let ite = arr.entries()
console.log(ite) //Object [Array Iterator] {}
console.log(ite.next());
//{ value: [ 0, 1 ], done: false } //value数组第一位为key键名，第二位为value键值，done为false说明未到结尾，为true到结尾
console.log(ite.next())
//{ value: [ 1, 2 ], done: false }
for (const item of arr.entries()) {
console.log(item);
}
//[ 0, 1 ]
[ 1, 2 ]
[ 2, 3 ]
[ 3, 4 ]
[ 4, 5 ]
Array.prototype.includes()
作用： includes() 方法用来判断一个数组是否包含参数值，如果包含则返回 true，否则返回 false。
参数： array.includes(value, fromIndex)
fromIndex：从fromIndex索引处开始查找value，为负数则从[length-fromIndex]处开始往后找。
arr=[1,2,3,4,5]
console.log(arr.includes(3)); //true
console.log(arr.includes(3,3)); //false
console.log(arr.includes(3,-1));//false
Array.prototype.flat()
作用： flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
参数： array.flat(depth)
depth为要提取嵌套数组的结构深度，默认为1
arr = [1, [2, 3], [4, [5]]]
console.log(arr.flat()); //[ 1, 2, 3, 4, [ 5 ] ]
console.log(arr.flat(2)); //[ 1, 2, 3, 4, 5 ]
console.log(arr.flat(3)); //[ 1, 2, 3, 4, 5 ]
//展开嵌套的任意深度数组
console.log(arr.flat(Infinity)); //[1,2,3,4,5]
总结
以上就是书中对于ES6数组的扩展的描述了。想要了解更多的细节内容，可以去观看书籍
