ECMAScript 2021 中对数组的扁平化操作详解

在 JavaScript 中，数组是一种非常重要的数据结构，用于存储一系列相同类型的数据。ECMAScript 2021 引入了新的数组扁平化操作，使得我们可以更加方便地操作数组。本文将详细介绍 ECMAScript 2021 中对数组的扁平化操作。

扁平化操作是什么

扁平化操作是将多维数组转换为一维数组的过程。在实际开发中，我们经常会遇到多维数组的情况，但有时候我们需要将其转换为一维数组，以方便数据的处理和展示。比如，我们从数据库中查询出的数据往往是多维数组的形式，但是在渲染页面或者进行其他操作时，我们可能需要将其转换为一维数组。

ECMAScript 2021 中的扁平化操作

ECMAScript 2021 中引入了新的方法，使得对数组的扁平化操作更加方便。具体来说，它引入了两个新方法：

flat()

flat() 方法将多维数组扁平化为一维数组，它的用法如下：

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

上面的代码中，arr 是一个多维数组，调用 flat() 方法后得到了扁平化后的一维数组。由于 flat() 方法只会将数组扁平化一层，因此如果我们要将多维数组扁平化为一维数组，需要使用多次 flat() 方法：

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

在上面的代码中，我们传入了参数 2，表示将数组扁平化两层。

flatMap()

flatMap() 方法是 flat() 方法的一种变体，它将数组中的每个元素映射到一个新的数组，然后将这些数组扁平化为一个新的一维数组。它的用法如下：

let arr = [1, 2, 3];
let flattenArr = arr.flatMap(item => [item * 2]);
console.log(flattenArr); // [2, 4, 6]

在上面的代码中，我们将数组 arr 中的每个元素都乘以 2，并将乘以 2 后的结果放入一个新的数组中。然后，我们将这些数组扁平化为一个新的一维数组。

ECMAScript 2021 中的数组其它操作

除了扁平化操作，ECMAScript 2021 中还引入了许多其它的数组操作方法，例如：

slice()

slice() 方法可从已有的数组中返回选定的元素，它的用法如下：

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

上面的代码中，我们使用 slice() 方法返回了数组 arr 中从索引 1 到索引 3（不包括 3）之间的元素。

fill()

fill() 方法用于将数组的所有元素替换为固定值。它的用法如下：

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

上面的代码中，我们使用 fill() 方法将数组 arr 中从索引 1 到索引 3（不包括 3）之间的元素替换为 0。

总结

通过本文的介绍，我们了解了 ECMAScript 2021 中对数组的扁平化操作。flat() 方法和 flatMap() 方法可以将多维数组扁平化为一维数组，大大方便了数组的操作。此外，我们还介绍了 slice() 方法和 fill() 方法，它们也是 ECMAScript 2021 中对数组的重要操作方法。在实际开发过程中，我们可以灵活运用这些方法，提高代码的可读性和可维护性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64745440968c7c53b01b46f8