ECMAScript 2020 (ES11) 数组扁平化

随着 JavaScript 的不断发展，ECMAScript 规范也在不断更新，ECMAScript 2020（ES11）是其中最新的一版。在 ES11 中，新增了许多重要的特性，其中一个重要的特性就是数组扁平化（Array.prototype.flat）。

什么是数组扁平化？

数组扁平化是指将多维数组转换为一维数组的过程。例如，一个二维数组 [[1, 2], [3, 4]] 可以被扁平化为 [1, 2, 3, 4]。同样的，一个三维数组 [[[1, 2], [3, 4]], [[5, 6], [7, 8]]] 可以被扁平化为 [1, 2, 3, 4, 5, 6, 7, 8]。

在 JavaScript 中，我们可以使用递归函数或者循环来实现数组的扁平化。但是在 ES11 中，我们可以使用 Array.prototype.flat() 方法来完成这个任务。

Array.prototype.flat() 方法

Array.prototype.flat() 方法可以将一个多维数组扁平化为一维数组。这个方法可以接收一个可选参数，用于指定扁平化的层数。如果不传入参数，默认扁平化所有层数。

const arr = [1, 2, [3, 4, [5, 6]]];
const flatArr = arr.flat();
console.log(flatArr); // [1, 2, 3, 4, [5, 6]]

const deepFlatArr = arr.flat(Infinity);
console.log(deepFlatArr); // [1, 2, 3, 4, 5, 6]

在上面的例子中，arr 是一个多维数组，我们使用 flat() 方法将其扁平化为一维数组。如果不传入参数，则只扁平化一层，所以 [5, 6] 这个数组没有被扁平化。如果传入参数 Infinity，则可以扁平化所有层数。

flatMap() 方法

除了 flat() 方法之外，ES11 还新增了一个方法 flatMap()，它结合了 map() 和 flat() 两个方法的功能，可以对数组进行映射和扁平化操作。

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

在上面的例子中，我们使用 flatMap() 方法对数组进行了映射和扁平化操作。flatMap() 方法会先对数组中的每个元素执行回调函数，然后将回调函数返回的结果扁平化为一维数组。

总结

在 ES11 中，数组扁平化成为了一个内置的方法，不再需要手动实现。使用 Array.prototype.flat() 方法可以轻松地实现数组扁平化，而 flatMap() 方法则可以更方便地对数组进行映射和扁平化操作。这些新的特性可以提高开发效率，减少代码量，值得我们学习和掌握。

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