在 ECMAScript 2017 中，新增了 Array.prototype.flat 和 Array.prototype.flatMap 两个数组处理方法，它们在处理嵌套数组数据时非常有用。通过本文，您将学习到如何使用这两个方法，以及它们的一些注意事项和用例。
Array.prototype.flat 方法
Array.prototype.flat 方法是一个用于将嵌套数组扁平化的方法。扁平化是一种将多维数组转换为一维数组的过程。下面是该方法的语法和用例：
array.flat([depth]);
其中：
array：必需，要进行扁平化操作的数组。depth：可选，指定要扁平化的层数，默认为 1。
示例代码：
const arr = [1, [2, [3, [4], 5]]]; const flatArr = arr.flat(2); console.log(flatArr); // [1, 2, 3, 4, 5]
在上面的示例代码中，我们将深度为 2 的二维数组扁平化为一维数组。在 flat 方法中传递深度参数是非常重要的，因为它允许我们控制扁平化的数量。如果不指定深度，则 depth 默认为 1。
Array.prototype.flatMap 方法
Array.prototype.flatMap 方法是一个将嵌套数组映射为扁平数组的方法，允许我们在扁平化数组之前对其进行更改。下面是该方法的语法和用例：
array.flatMap(callback[, thisArg]);
其中：
array：必需，要进行操作的数组。callback：必需，一个函数，用于映射或更改数组元素。thisArg：可选，函数执行时使用的上下文。
示例代码：
const arr = [1, 2, 3]; const flatMapArr = arr.flatMap((value) => [value * 2]); console.log(flatMapArr); // [2, 4, 6]
在上面的示例代码中，我们使用 flatMap 方法将数组的每个元素乘以 2，然后将其扁平化为一维数组。需要注意的是，flatMap 方法的参数是一个回调函数，这个函数将数组的每个元素映射到一个新的数组，然后这些新的数组被合并为一个扁平化的数组。
注意事项和用例
下面是一些使用 Array.prototype.flat 和 Array.prototype.flatMap 方法的注意事项和用例：
1. 使用 flatMap 实现多维数组去重
const arr = [[0, 1], [1, 2], [2, 3], [3, 4], [4, 5]]; const uniqueArr = arr .flatMap((value) => [...new Set(value)]) .filter((value, index, array) => array.indexOf(value) === index); console.log(uniqueArr); // [0, 1, 2, 3, 4, 5]
在上面的示例代码中，我们使用 flatMap 方法将多维数组展开为一维数组，然后使用 Set 对数组去重，并最后使用 filter 方法过滤掉重复数据。
2. 使用 flatMap 处理嵌套数据
-- -------------------- ---- -------
----- ---- - -
-
--- --
----- -------
------- ---- --- ----
--
-
--- --
----- ------
------- ---- --- ----
--
--
----- -------- - ------------------- --
----------------------- -- -- -------- ----- ---
--
----------------------在上面的示例代码中，我们使用 flatMap 方法将嵌套的数据扁平化为一维数组，并通过 map 方法对每个元素进行处理，最终得到扁平化后的数组，并包含了 score 字段。
总结
本文中，我们学习了 Array.prototype.flat 和 Array.prototype.flatMap 两个方法的使用方式，并对这两个方法的注意事项和用例进行了介绍。这两个方法可以非常方便地处理嵌套数组数据，并提高数组操作的效率。在编写前端代码时，建议您多加使用这两个方法，提升代码质量和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64603049968c7c53b01f4452