随着 JavaScript 应用程序规模的不断扩大，对于数组的处理需求也越来越复杂。为了提高 JavaScript 引擎的处理性能，ECMAScript 2021 引入了一些新的数组方法来替代旧有的方法，并且还提供了一些全新的方法供开发者使用。本文将详细介绍这些方法并探讨它们在实际应用中的价值。
扩展运算符（Spread Operator）和剩余运算符（Rest Operator）
在 ES6 中引入的扩展运算符和剩余运算符可以说是 JavaScript 开发者最熟悉的运算符之一。在数组中使用扩展运算符可以快速、简便地将两个数组合并为一个新数组：
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [...arr1, ...arr2]; console.log(arr3); // [1, 2, 3, 4, 5, 6]
剩余运算符则可以在函数接收参数时方便地将多余的参数合并为一个数组：
function sum(...args) {
return args.reduce((acc, val) => acc + val, 0);
}
console.log(sum(1, 2, 3, 4, 5)); // 15这些运算符在 ECMAScript 2021 中也得到了进一步优化，可以更好地处理数组。
在修改数组时，扩展运算符可以用来避免直接修改原数组：
const arr = [1, 2, 3]; const newArr = [...arr];
这样写可以避免直接修改原数组，从而避免出现一些不可预期的问题。同时，这也带来了更好的可维护性和代码健壮性。
剩余运算符也得到了改进，可以更好地处理多余参数和未知数量的参数。例如，如果我们将一个数组传递给一个带有多个参数的函数，那么可以使用剩余运算符将数组中的元素分离出来：
function sum(a, b, c) {
return a + b + c;
}
const arr = [1, 2, 3];
console.log(sum(...arr)); // 6新的数组方法
除了扩展运算符和剩余运算符，ECMAScript 2021 还引入了一些新的数组方法。这些方法不仅提供了更好的性能和更广泛的应用场景，还提高了代码的可读性和可维护性。
flat() 方法
flat() 方法用于将多维数组转换为一维数组。该方法接收一个表示要展开的维度的整数，如果未提供该整数，则会默认展开所有嵌套的数组：
const arr = [1, 2, [3, 4, [5, 6]]]; console.log(arr.flat()); // [1, 2, 3, 4, [5, 6]] console.log(arr.flat(2)); // [1, 2, 3, 4, 5, 6]
此外，flat() 方法还可以删除一维数组中的空元素：
const arr = [1, 2, [3, , , [4, 5]]]; console.log(arr.flat()); // [1, 2, 3, , , 4, 5] console.log(arr.flat().filter(Boolean)); // [1, 2, 3, 4, 5]
flatMap() 方法
flatMap() 方法可以将数组映射为一个新数组，并根据需要展开深度一层。该方法接收一个映射函数，函数返回值将作为新数组的元素。如果映射函数返回的是一个数组，则该数组会被展开:
const arr = [1, 2, 3];
console.log(arr.flatMap((x) => [x * 2])); // [2, 4, 6]
const arr2 = ["foo", "bar"];
console.log(arr2.flatMap((x) => x.split(""))); // ["f", "o", "o", "b", "a", "r"]filter() 方法
filter() 方法用于筛选数组中的元素，并将符合条件的元素返回为新数组。该方法接收一个回调函数，该函数会接收当前元素、当前索引和源数组作为参数。
在 ECMAScript 2021 中，filter() 方法还可以针对指定条件，删除或保留数组中的重复元素。将 filter() 方法与 map() 方法结合使用，就可以轻松地实现多个数组方法：
const arr = [1, 1, 2, 3, 3, 1];
console.log(
arr.filter((v, i, a) => a.indexOf(v) === i).map((v) => ({ value: v }))
); // [{value: 1}, {value: 2}, {value: 3}]findIndex() 和 findLastIndex() 方法
findIndex() 和 findLastIndex() 方法用于查找数组中符合条件的元素，并返回该元素的索引。这些方法接收一个回调函数，该函数也会接收当前元素、当前索引和源数组。如果查找到符合条件的元素，则方法会返回该元素对应的索引。如果没有符合条件的元素，则会返回 -1。
例如，我们可以使用 findIndex() 方法来查找数组中第一个符合条件的元素的索引：
const arr = [{ name: "foo" }, { name: "bar" }, { name: "baz" }];
const index = arr.findIndex((item) => item.name === "bar");
console.log(index); // 1includes() 方法
includes() 方法用于判断数组是否包含某个元素。该方法返回一个布尔值，表示找到了该元素（true）或未找到该元素（false）。该方法还可以接收一个可选参数，用于指定查找的开始索引。
例如，我们可以使用 includes() 方法来判断数组中是否包含某个元素：
const arr = [1, 2, 3, 4, 5]; console.log(arr.includes(3)); // true
此外，includes() 方法还可以判断数组中是否包含 NaN 类型的元素：
const arr = [NaN]; console.log(arr.includes(NaN)); // true
every() 方法
every() 方法用于检查数组的所有元素是否符合指定条件。如果所有元素都符合条件，则该方法返回 true，否则返回 false。该方法接收一个回调函数，该函数也会接收当前元素、当前索引和源数组。
例如，我们可以使用 every() 方法来检查数组中的所有元素是否都为数字：
const arr = [1, 2, 3, 4, 5]; console.log(arr.every((item) => typeof item === "number")); // true
some() 方法
some() 方法和 every() 方法基本相同，都用于检查数组中的元素是否符合指定条件。如果数组中有符合条件的元素，则该方法返回 true，否则返回 false。
例如，我们可以使用 some() 方法来判断数组中是否有偶数：
const arr = [1, 3, 5, 7, 8]; console.log(arr.some((item) => item % 2 === 0)); // true
结论
在 ECMAScript 2021 中，针对数组的操作方法得到了全面的优化，从性能到可读性都得到了提升。除了传统的扩展运算符和剩余运算符，我们还介绍了各种新的数组方法，包括 flat()、flatMap()、filter()、findIndex()、includes()、every() 和 some()。在实践中，我们可以根据具体需求使用这些方法，从而更好地处理和优化数组。
不只是 JavaScript 引擎，针对数组的优化和方法设计在许多编程语言中都是非常重要的话题。在日常开发中，我们应该尽可能了解这些基础知识，并加以应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67177ef1ad1e889fe221cded