在过去，对于数组的操作一般都是通过 filter 和 map 来完成。然而，ES11 中引入了新的一种数组操作方式，即使用 Array.prototype.flatMap 来代替原有的 filter 和 map 操作。
本文将详细介绍在使用 Array.prototype.flatMap 代替 filter 和 map 操作时需要注意的事项，以及如何正确地使用它来处理数组数据。
什么是 Array.prototype.flatMap
Array.prototype.flatMap 是一个新的数组操作方式，它可以将一个数组中的每个元素映射为一个新的数组，然后将所有的子数组合并成一个数组。与 filter 和 map 不同的是，flatMap 会对每个子数组执行一次扁平化操作。
使用 flatMap 的语法格式如下：
array.flatMap(callback(currentValue[, index[, array]])[, thisArg])
其中参数 callback 为一个回调函数，用来对每个元素进行操作，并返回一个新的数组。callback 回调函数中的参数 currentValue 表示当前正在被处理的元素，index 表示当前元素的下标，array 则表示正在被处理的数组。thisArg 则表示 callback 函数中 this 关键字所指向的对象。
下面我们来看一个简单的例子，来理解 flatMap 的具体用法。
let arr = [1, 2, 3, 4]; let result = arr.flatMap(num => [num * 2]); console.log(result); // [2, 4, 6, 8]
在这个例子中，我们首先定义了一个数组 arr，然后使用 flatMap 将每个元素都乘以 2 并返回一个新的数组。最后，我们输出了结果。
从输出结果中可见，我们成功地使用 flatMap 将原数组中的每个元素都乘以 2 并得到了一个新的一维数组。
flatMap 替换 filter 和 map 操作时的注意事项
在使用 flatMap 替换 filter 和 map 操作时，还需要注意以下几点：
1. 执行顺序
使用 flatMap 时，需要注意回调函数的执行顺序。因为 flatMap 的扁平化操作会改变数组的结构，所以它的执行顺序并不是固定的。
例如，假设我们要对一个数组进行排序，然后再过滤出其中的偶数。如果使用 filter 和 map 来完成这个操作，代码如下：
let arr = [1, 0, 2, 5, 6, 7, 8]; let result = arr .sort((a, b) => a - b) .filter(num => num % 2 === 0) .map(num => num * 2); console.log(result); // [0, 4, 12, 16]
如果我们使用 flatMap 来完成这个操作，代码如下：
-- -------------------- ---- ------- --- --- - --- -- -- -- -- -- --- --- ------ - --- ------------ -- ------ --------- -- -- - - -- ----------- -- --- - - --- -- -------- -- --- - --- -------------------- -- --- -- --- ---
我们会发现，如果不在 flatMap 中使用扁平化操作，那么就会出现数组中元素的顺序发生变化，从而导致结果不正确。
2. 扁平化操作
在使用 flatMap 时，需要注意扁平化操作的效果。如果回调函数返回的是一个嵌套数组（即元素是一个数组），则 flatMap 会将这些数组进行扁平化操作。
例如，假设我们有一个数组，它包含了一些嵌套数组，我们想要将所有子数组的元素遍历出来。如果使用 flatMap 来完成这个操作，代码如下：
let arr = [[1, 2], [3, 4], [5, 6]]; let result = arr.flatMap(subArr => subArr); console.log(result); // [1, 2, 3, 4, 5, 6]
从输出结果中可以看到，我们成功地使用 flatMap 将原数组中所有子数组的元素都遍历出来了。
3. 空数组去除
在使用 flatMap 进行处理时，由于扁平化操作的存在，有可能会出现空数组。为了避免空数组的影响，我们可以使用 filter 进行过滤。
例如，假设我们有一个数组，它包含了一些子数组，我们希望将这些子数组中大于 2 的元素乘以 2 并返回一个新的数组。如果使用 flatMap 来完成这个操作，代码如下：
let arr = [[1, 2], [3, 4], [], [5, 6, 7]]; let result = arr .flatMap(subArr => subArr.map(num => num > 2 ? num * 2 : [])) .filter(num => num !== []); console.log(result); // [6, 8, 10, 12, 14]
从输出结果中可以看到，我们成功地使用 flatMap 将所有大于 2 的元素都乘以 2，并过滤掉了空数组。
总结
本文介绍了 ES11 中的新数组操作方式 flatMap，并详细阐述了在使用 flatMap 替换 filter 和 map 操作时需要注意的事项。正确地使用 flatMap 可以使代码更加简洁，同时提升代码的性能。希望本文能够对读者们在实际开发中使用 flatMap 时有所帮助。
参考代码：
-- -------------------- ---- ------- --- --- - --- -- -- --- --- ------ - --------------- -- ---- - ---- -------------------- -- --- -- -- -- --- --- - --- -- -- -- -- -- --- --- ------ - --- --------- -- -- - - -- ----------- -- --- - - --- -- -------- -- --- - --- -------------------- -- --- -- --- --- --- --- - --- -- -- -- -- -- --- --- ------ - --- ------------ -- ------ --------- -- -- - - -- ----------- -- --- - - --- -- -------- -- --- - --- -------------------- -- --- -- --- --- --- --- - ---- --- --- --- --- ---- --- ------ - ------------------ -- -------- -------------------- -- --- -- -- -- -- -- --- --- - ---- --- --- --- --- --- -- ---- --- ------ - --- --------------- -- -------------- -- --- - - - --- - - - ---- ----------- -- --- --- ---- -------------------- -- --- -- --- --- ---
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c3860083d39b4881787886