跟进 JavaScript 标准演进：聚焦 ECMAScript 6 后续版本中新增数组API

引言

自从 ECMAScript 6（简称ES6）发布以来，JavaScript编程语言经历了显著的演变，特别是在处理数组方面，引入了一系列强大的新特性与方法，从而让开发人员能够更加高效、优雅地操纵数组数据结构。这些新增的数组方法极大地提高了代码的可读性和简洁度，同时也降低了复杂操作的难度。接下来，我们将重点探讨JavaScript在ES6及后续版本中针对数组所增加的一些核心方法。

Array.from()： 将类数组对象（如arguments、NodeList等）或可迭代对象转换为真正的数组。

javascript 复制代码

const divs = document.querySelectorAll('div');
const divsArray = Array.from(divs);

// 或者将字符串转为字符数组
const str = 'hello';
const charArray = Array.from(str);

Array.of()： 创建一个包含任意数量参数的新数组，解决了new Array()的歧义问题。

javascript 复制代码

const arrayWithThreeZeros = Array.of(0, 0, 0);

Array.prototype.includes()： 快速检测数组是否包含某个值，替代了indexOf()方法结合严格等于零的判断。

javascript 复制代码

const numbers = [1, 2, 3];
if (numbers.includes(2)) {
console.log('Number 2 is in the array');
}

Array.prototype.find() 和 Array.prototype.findIndex()： 查找数组中第一个满足条件的元素或其索引，而无需使用循环。

javascript 复制代码

const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const alice = users.find(user => user.name === 'Alice');
const aliceIndex = users.findIndex(user => user.name === 'Alice');

Array.prototype.fill()： 快速初始化或替换数组中的元素值。

javascript 复制代码

const array = new Array(10).fill(null); // 初始化长度为10的数组，所有元素为null

Array.prototype.copyWithin()： 在原数组内部移动或复制数组片段。

javascript 复制代码

const array = [1, 2, 3, 4, 5];
array.copyWithin(0, 3); // 结果为[4, 5, 3, 4, 5]，将下标3开始的元素复制到下标0开始的位置

扩展运算符 ...： 用于合并数组、解构赋值和克隆数组等操作。

javascript 复制代码

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // 合并两个数组
const clonedArray = [...originalArray]; // 浅拷贝数组

迭代方法： keys(), values(), entries() 用于遍历数组，并可与for...of循环一起使用。

javascript 复制代码

for (const value of ['a', 'b', 'c'].values()) {
 console.log(value);
}

Array.prototype.map()： 用于生成一个新的数组，其中的元素是原数组元素经过某种处理的结果。

javascript 复制代码

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2); // [2, 4, 6]

Array.prototype.filter()： 根据提供的回调函数过滤数组元素，返回符合要求的新数组。

javascript 复制代码

const evenNumbers = [1, 2, 3, 4, 5].filter(num => num % 2 === 0); // [2, 4]

Array.prototype.reduce() 和 reduceRight()： 对数组元素进行累积操作，如求和、计算平均值、聚合数据等。

javascript 复制代码

const sum = [1, 2, 3, 4].reduce((acc, cur) => acc + cur, 0); // 10

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduceRight((previousValue, currentValue) => previousValue + currentValue);
console.log(sum); // 输出：15

// 在这个例子中，reduceRight() 从数组的最右侧（也就是索引为 4 的元素 5 开始）逐个向左累加数组中的每个元素，最终得到数组元素的总和。

// 此外，reduceRight() 还可用于数组的各种其他归约操作，比如拼接字符串、构建对象、找出最大值或最小值等。

Array.prototype.flat() 和 flatMap(): 用于扁平化嵌套数组，flatMap()同时进行映射和扁平化操作。

javascript 复制代码

const nested = [1, [2, [3]]];
const flattened = nested.flat(Infinity); // [1, 2, 3]

const mappedAndFlattened = [1, 2, 3].flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]

写在最后

以上这些方法不仅丰富了JavaScript对数组的操作，而且使编写更高效、更易读的代码成为可能。随着ES6及后续版本的推出，还引入了更多高级数组方法和优化，进一步提升了开发体验。

喜欢的话帮忙点个赞 + 关注吧，将持续更新 JavaScript 相关的文章，还可以关注我的公众号 梁三石FE ，感谢您的关注~