整理学习——ES6数组的扩展

Array.from()

将两类对象转为真正的数组：

1. 类似数组的对象（具有length属性）
   • DOM操作返回的NodeList集合
   • 函数内部的arguments对象
2. 可遍历的对象（包括Set和Map对象），只要是部署了Iterator接口的数据结构，都可以使用该方法转为数组

let arrayLike = {
	0: 0,
	1: 1,
	2: 2,
	length: 3
};
let arr = Array.from(arrayLike);
console.log(arr);
//Output: [1,2,3]

如果参数是一个真正的数组，Array.from会返回一个一模一样的新数组。
可以将字符串转为数组，然后返回字符串的长度。能正确处理各种Unicode字符，可避免将码点大于\uFFFF的Unicode字符识别为两个字符的问题。

与扩展运算符的区别

扩展运算符背后调用的是Iterator接口，如果一个对象没有Iterator接口就无法转换。
而Array.from()还支持具有length属性的类似数组的对象。

第二参数

用来对每个元素进行处理，将处理后的值放入返回的数组。

第三参数

如果第二参数的函数中使用了this，那么可以在第三参数绑定this

Array.of()

将一组值转换为数组，如果没有参数则返回一个空数组。
用于弥补构造函数Array()因为参数个数的不同，会导致Array()的行为有差异的问题。

console.log(
	Array(),
	Array(3),//新建对应个数的数组
	Array(1,2,3)//新建以参数为
);
//Output: [] [,,,] [1, 2, 3]
console.log(
	Array.of(),
	Array.of(3),
	Array.of(1,2,3)
);
//Output: [],[3],[1,2,3]

数组实例相关方法

copyWithin()

在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。

Array.prototype.copyWithin(
	target,						//从该位置开始替换数据
	start = 0, 					//从该位置开始读取数据，默认为0。
								//如果< 0，则表示倒数
	end = this.length			//到该位置前停止读取数据，默认等于数组长度。
								//如果< 0，表示倒数
);

三个参数应该都为数值，如果不是则会转为数值。

includes()

表示某个数组是否包含给定的值，返回一个布尔值
第二个参数表示搜索的起始位置，默认为0。若为负值，则表示倒数的位置，如果这时它> length，则会重置为从0开始

对比indexOf()

indexOf的缺点：返回第一个出现的位置，还要比较是否为-1判断是否存在；使用===进行判断，导致对NaN的误判

[NaN].indexOf(NaN)
//result: -1
[NaN].includes(NaN);
//result: true

对比Map结构的has

Map结构的has用来查找键名

Map.prototype.has(key);
WeakMap.prototype.has(key);
Reflect.has(target, propertyKey);

对比Set结构的has

Set结构的has是用来查找值的

Set.prototype.has(value);
WeakSet.prototype.has(value);

数组的空位

数组的某个位置没有值，但是不是undefined。undefined也是一个值。ES6中会将数组的空位转为undefined：

1. Array.from()、扩展运算符(…) 、entries()、keys()、values()、find()、findIndex()会将数组的空位转为undefined
2. copyWithin()会将空位一起拷贝
3. fill()会将空位视为正常的数组位置
4. for…of循环也会遍历空位

不过还是应该避免空位的出现。