在 ES2019 中使用 Array.prototype.flatMap() 实现数组扁平化

在 ES2019 中使用 Array.prototype.flatMap() 实现数组扁平化

在前端开发中，我们通常需要将嵌套的数组扁平化为一维数组，以便进行遍历、处理和展示。ES2019 新增的 Array.prototype.flatMap() 方法正好满足了这个需求，它能够快速而简单地实现数组扁平化，提高开发效率和代码可维护性。

一、Array.prototype.flatMap() 介绍

Array.prototype.flatMap() 方法是 ES2019 新增的数组方法，它结合了 Array.prototype.map() 和 Array.prototype.flat() 的作用，实现了数组扁平化的功能，它的定义如下：

arr.flatMap(callback[, thisArg])

该方法接受一个回调函数 callback 和一个可选的 thisArg 参数。callback 函数将每个数组元素映射为一个新数组，并将这些新数组合并成一个新的一维数组。与 Array.prototype.map() 类似，callback 函数的参数依次为数组元素、元素索引和原数组本身。

二、使用 Array.prototype.flatMap() 实现数组扁平化

在实际开发中，我们可以使用 Array.prototype.flatMap() 方法将二维数组扁平化为一维数组，示例如下：

const arr = [[1, 2], [3, 4], [5, 6]];
const flattenedArr = arr.flatMap(x => x);
console.log(flattenedArr); // [1, 2, 3, 4, 5, 6]

上述代码中，我们先定义了一个二维数组 arr，然后使用 flatMap() 方法将每个子数组映射为一个新数组，并合并成一个新的数组 flattenedArr，最终输出一维数组 [1, 2, 3, 4, 5, 6]。

三、Array.prototype.flatMap() 和 Array.prototype.flat() 的区别

在使用 Array.prototype.flatMap() 方法时，我们需要注意它与 Array.prototype.flat() 方法的区别。Array.prototype.flatMap() 方法可以通过 callback 函数将每个元素映射为一个新数组，并将这些新数组合并成一个新的数组；而 Array.prototype.flat() 方法可以通过指定要扁平化的嵌套层数来返回一个新的一维数组。

示例如下：

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

上述代码中，我们将二维数组 arr 通过 flat() 方法扁平化到第二层，得到了一维数组 [1, 2, 3, 4, 5, 6]。

四、总结

ES2019 中新增的 Array.prototype.flatMap() 方法能够快速、简单地将嵌套的数组扁平化为一维数组，提高开发效率和代码可维护性。在使用该方法时，我们需要了解其与 Array.prototype.flat() 方法的区别，以充分发挥该方法的优势。使用 flatMap() 方法可以减少代码的冗余和错误率，让我们更专注于业务逻辑的实现，提升前端开发的效率和质量。

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