在 JavaScript 中，Array 是一个非常重要的数据类型，它代表了一个由任意类型数据组成的列表。在 ES9 中，JavaScript 引入了 Array.prototype.flatMap() 方法，它可以将一个多维数组中的每个子数组都映射为一个新的数组，并将这些子数组的结果展平后返回一个新的、一维的数组。本文将详细介绍 Array.prototype.flatMap() 的使用方法和指南。
一、方法定义
Array.prototype.flatMap() 方法定义如下：
arr.flatMap(callback[, thisArg])
其中：
- arr：被映射的数组。
- callback：对 arr 数组中每个元素执行的函数，包含三个参数（当前元素值，当前元素的索引值，原数组）。
- thisArg（可选）：执行 callback 时的 this 值。
二、方法功能
Array.prototype.flatMap() 的功能可以分为两个步骤：
- 对于 arr 数组中的每个元素，调用 callback 函数进行映射。
- 将每个元素映射结果组合成一个新的数组，并将这个新数组扁平化为一维数组。
这个方法的适用场景比较广泛，比如我们需要在一个多维数组中找到所有的特定元素，并返回一个新的一维数组。在这个场景中，我们就可以使用 Array.prototype.flatMap() 方法。
三、方法用例
为了更好地理解 Array.prototype.flatMap() 的作用，我们可以看下面的代码示例。假设我们有一个数组包含多个子数组，我们需要将这些子数组中的非负整数映射为一个新的一维数组并去重。
const arr = [[1, 2], [3, 4], [5, 6], [7, 8]]; const result = arr.flatMap(subArr => subArr.filter(val => val >= 0)); console.log(result); // [1, 2, 3, 4, 5, 6, 7, 8]
上述代码使用 Array.prototype.flatMap() 将 arr 数组中的所有子数组映射为一个新的一维数组，并使用 Array.prototype.filter() 方法过滤其中的非负整数。
注意：如果使用 Array.prototype.map() 方法可能会得到以下的结果：
const arr = [[1, 2], [3, 4], [5, 6], [7, 8]]; const result = arr.map(subArr => subArr.filter(val => val >= 0)); console.log(result); // [[1, 2], [3, 4], [5, 6], [7, 8]]
因为 Array.prototype.flatMap() 方法会将结果合并为一个新数组，而 Array.prototype.map() 方法只会返回一个嵌套数组，所以使用前者更为常用。
四、方法的性能
Array.prototype.flatMap() 方法在大多数情况下性能良好，但是如果数组很大或者嵌套非常深，它的性能可能会受到影响。
我们可以使用一些可读性更强且性能更高的替代方案来解决这个问题。比如，我们可以使用 Array.prototype.reduce() 和 Array.prototype.concat() 方法来展平数组，如下：
const arr = [[1, 2], [3, 4], [5, 6], [7, 8]]; const result = arr.reduce((acc, val) => acc.concat(val.filter(val => val >= 0)), []); console.log(result); // [1, 2, 3, 4, 5, 6, 7, 8]
使用这种方案，我们需要手动管理上一个操作的结果数组（acc 参数），并显式地将其传递给下一个操作。
五、总结
ES9 中 Array.prototype.flatMap() 的作用是将一个多维数组中的每个子数组都映射为一个新的数组，并将这些子数组的结果展平后返回一个新的、一维的数组。它的主要用途是在多维数组中查找并提取指定类型的数据。虽然这个方法在大多数情况下性能良好，但是当数组很大或嵌套非常深时，我们应该考虑使用其他可读性更强且性能更高的方法来解决这个问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647fd44a48841e9894f58d14