ECMAScript 2017：利用 Array.prototype.flat 解决数组扁平化问题

ECMAScript 2017：利用 Array.prototype.flat 解决数组扁平化问题

在前端开发中，经常需要对数组进行操作。有时候需要将多维数组扁平化为一维数组，以方便后续的操作和处理。在 ECMAScript 2017 中，新增了 Array.prototype.flat 方法，可以方便地解决数组扁平化问题。

一、什么是数组扁平化？

数组扁平化是指将一个多维数组转化为一个一维数组的过程。例如，将 [[1, 2], [3, 4], [5, 6]] 转化为 [1, 2, 3, 4, 5, 6]。

二、Array.prototype.flat 方法介绍

Array.prototype.flat 方法可以将多维数组转化为一维数组。该方法可以接受一个可选参数 depth，用于指定扁平化的深度。如果不指定 depth，则默认为 1。

该方法返回一个新数组，原数组不会被修改。如果原数组中的元素是对象或数组，它们将被转化为字符串。

三、使用 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 flatArr2 = arr.flat(2);
console.log(flatArr2); // [1, 2, 3, 4, 5, 6]

在上面的示例代码中，arr 是一个多维数组。使用 arr.flat() 方法将其转化为一维数组 flatArr。由于 flat 方法默认只扁平化一层，所以 [4, 5] 没有被扁平化。

使用 arr.flat(2) 方法将 arr 扁平化为深度为 2 的一维数组 flatArr2。由于指定了深度为 2，所以 [4, 5] 也被扁平化了。

四、使用 Array.prototype.flatMap 方法实现数组扁平化和映射

除了 flat 方法之外，ECMAScript 2019 还新增了 Array.prototype.flatMap 方法。该方法可以先进行数组映射，然后再将多维数组扁平化为一维数组。

下面是一个使用 Array.prototype.flatMap 方法实现数组扁平化和映射的示例代码：

const arr = [[1, 2], [3, 4], [5, 6]];
const flatMapArr = arr.flatMap(item => item.map(n => n * 2));
console.log(flatMapArr); // [2, 4, 6, 8, 10, 12]

在上面的示例代码中，arr 是一个多维数组。使用 arr.flatMap 方法将其转化为扁平化后的一维数组 flatMapArr，并且将每个元素乘以 2。

五、总结

Array.prototype.flat 方法可以方便地解决数组扁平化问题，使得多维数组转化为一维数组更加简单和方便。同时，Array.prototype.flatMap 方法可以先进行数组映射，然后再进行数组扁平化，使得数组操作更加灵活和高效。在实际开发中，可以根据具体的业务需求选择合适的方法进行数组操作。

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