全面解析 ES10 中新增的 Array.prototype.flat 与 Array.prototype.flatMap 方法

在 ES2019 中，Array 类新增了两个方法：Array.prototype.flat 和 Array.prototype.flatMap。这两个方法可以让我们更加高效、方便地处理数组，本文将为您详细介绍这两个方法的用法和指导意义。

Array.prototype.flat

Array.prototype.flat 方法用于将嵌套的数组减少一个维度，展平为一维数组。该方法可以接受一个参数，表示要减少的维度数，默认为 1。

语法

arr.flat([depth])

参数

• depth：可选，表示要减少的维度数，默认为 1。

示例

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

const deepArr = [1, 2, [3, 4, [5, 6]]];
const deeplyFlattenedArr = deepArr.flat(2);
// deeplyFlattenedArr: [1, 2, 3, 4, 5, 6]

指导意义

使用 Array.prototype.flat 方法可以简化数组嵌套的数据结构，更加方便地进行操作和展示。例如，处理树形结构等数据时，可以使用 flat 方法进行数据展开。

Array.prototype.flatMap

Array.prototype.flatMap 方法是在 Array.prototype.map 方法的基础上添加了一个展平结果的步骤，因此可以同时执行 map 和 flat 操作，将数组映射为一维数组。

语法

arr.flatMap(callback[, thisArg])

参数

• callback：数组中每个元素执行的回调函数，包含三个参数：currentValue，index，array。
• thisArg：可选，执行 callback 函数时 this 值。

示例

const arr = [1, 2, 3, 4];
const mappedArr = arr.flatMap(x => [x * 2, x * 3]);
// mappedArr: [2, 3, 4, 6, 6, 9, 8, 12]

const deepArr = [1, 2, 3, 4];
const deeplyMappedArr = deepArr.flatMap(x => [[x * 2]]);
// deeplyMappedArr: [[2], [4], [6], [8]]

指导意义

使用 Array.prototype.flatMap 方法可以更加高效地进行数组的映射和展平，避免冗余代码和额外的操作。在处理类似于表单数据等需要展开的数据结构时，使用 flatMap 方法可以简化代码，提高代码可读性和维护性。

总结

ES2019 中新增的 Array.prototype.flat 和 Array.prototype.flatMap 方法为我们在处理数组时提供了更加高效、方便、灵活的方法，能够简化代码和提高代码可读性和维护性，是前端开发常用的工具之一。希望本文能够对您掌握这两个方法有所帮助。

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