本文共 1533 字，大约阅读时间需要 5 分钟。

数组的扩展

1. 类数组/伪数组

类数组并非真正意义上的数组，通常指拥有数组特有的属性（如 [] 和 length）但缺乏数组方法的对象。例如：

let div1 = document.getElementsByTagName('div'); // HTMLCollection []
let div2 = document.getElementsByClassName('div'); // HTMLCollection []
let div3 = document.querySelectorAll('.xx"); // NodeList []

可以通过 console.log(div2 instanceof Array) 判断是否为数组，若为真则为数组，否则为伪数组。

2. Array.from()

可以将伪数组转换为真正数组。ES5 和 ES6 的实现方式分别如下：

ES5:

let arr = Array.prototype.slice.call(div3); // 转换为数组

ES6:

let arrayLike = { 0: 'es6', 1: 'es7', 2: 'es8', length: 3 };
let arr = Array.from(arrayLike); // 转换为数组

3. Array.of()

用于处理数组构造器的局限性：

let arr = new Array(1, 2); // [1, 2]
let arr = new Array(3); // 长度为3
let arr = Array.of(3); // [3]
let arr = Array.of(3, 5, 7); // [3, 5, 7]

支持多种数据类型拼接为数组，如：

let arr = Array.of(1, 'name', true, [1, 'zhangsan', false, { age: 12 }, { age: 23 }]);

4. copyWithin()

用于数组的值替换：

示例:

let arr = [1, 2, 3, 4, 5];
console.log(arr.copyWithin(1,3)); // [1,4,5,4,5]

5. fill()

用于数组填充：

示例:

let arr = [1, 2, 3, 4, 5];
arr.fill('zhangsan', 1, 3); // [1, 'zhangsan', 'zhangsan', 4, 5]
arr.fill(0); // [0, 0, 0, 0, 0]

6. includes()

用于检测数组是否包含特定值，解决了 indexOf() 中 NaN 的问题：

示例:

let arr = [1, 2, 3, NaN];
console.log(arr.includes(NaN)); // true

7. 数组扩展（ES10）

flat() 和 flatMap()

flat()：将多维数组扁平化处理。

示例:

const arr = [1, 2, 3, 4, 5, [6, [7, 8], 9]];
const res = arr.flat(3); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

flatMap()：结合 map 和 flat。

示例:

const arr = [1, 2, 3, 4, 5];
const res = arr.flatMap(x => [x + 1]); // [2, 3, 4, 5, 6]

如需进一步练习，可以通过以上方法进行实际操作和验证。这些方法在现代 JavaScript 开发中都有广泛应用。

转载地址：http://pgbaz.baihongyu.com/