在前端开发中，经常需要对数组进行操作，为此 JavaScript 在 ES11 中新增了一个方法：flatMap()。与 map() 方法类似，flatMap() 方法可以对数组中的每一项进行操作，但 flatMap() 方法具有更强的处理能力，可以在使用了 map() 方法的基础上对数组进行快速优化。
flatMap() 方法的定义
flatMap() 是一个数组方法，其接收一个函数作为参数，该函数将被应用到数组中的每个元素上，生成一个新的数组。与 map() 方法一样，它也会返回一个新的数组，但其特别之处在于，map() 方法可能会返回一个嵌套的数组，而 flatMap() 方法可以将这些嵌套的数组“扁平化”，返回一个一维数组。该方法的完整语法如下：
arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])
其中，callback 参数表示要对每个元素执行的函数，该函数同样接收三个参数：
currentValue：当前数组元素的值。index（可选）：当前元素在数组中的索引。array（可选）：原数组本身。thisArg（可选）：执行callback回调时的this上下文。
flatMap() 方法的使用
有时候，我们需要对数组中的每个元素进行操作，例如生成新的数组、移除不必要的元素、筛选元素等等。如果使用 map() 方法，则有可能返回一个嵌套的数组，需要使用 reduce() 等方法来将其扁平化。而使用 flatMap() 方法则可以更加简单地达到目的。比如我们可以利用 flatMap() 方法将字符串数组中的每个元素分割成单词并返回一个单词数组：
const arr = ["This is a sentence.", "Another one."];
const wordArr = arr.flatMap(sentence => sentence.split(" "));
console.log(wordArr); // ["This", "is", "a", "sentence.", "Another", "one."]可以看到，我们先使用了 split() 方法将每个字符串分割成单词，然后使用 flatMap() 方法将生成的嵌套数组扁平化为一个一维数组。
除了数组扁平化外，flatMap() 方法还可以将数组进行过滤、映射等操作。例如，我们可以使用 flatMap() 方法将多个数组合并成一个数组：
const arr1 = [1, 2]; const arr2 = [3, 4]; const arr3 = [5, 6]; const newArr = [arr1, arr2, arr3].flatMap(item => item); console.log(newArr); // [1, 2, 3, 4, 5, 6]
在这个例子中，我们先将三个数组作为元素放入一个数组 [arr1, arr2, arr3] 中，然后使用 flatMap() 将其扁平化，最终得到一个合并后的数组。
需要注意的是，flatMap() 方法只能“扁平化”一个层级的数组。如果要操作嵌套的数组，则需要先使用 map() 方法处理数组，再使用 flatMap() 方法扁平化数组。例如，我们可以使用 flatMap() 方法将多个嵌套数组合并成一个一维数组：
const arr = [[1, 2], [3], [4, 5, 6]]; const flatArr = arr .map(item => item.map(val => val * 2)) // 先使用 map() 方法进行操作 .flatMap(item => item); // 然后使用 flatMap() 扁平化数组 console.log(flatArr); // [2, 4, 6, 8, 10, 12]
在这个例子中，我们先对每个嵌套数组使用 map() 方法将数组中的每一个元素乘以 2，得到一个新的嵌套数组。然后使用 flatMap() 方法将这个嵌套数组扁平化成一个一维数组。
小结
flatMap() 方法是 JavaScript ES11 中新增的一个数组方法，与 map() 方法类似，用于对数组中的每个元素执行回调函数，但具有更强的操作能力，可以将嵌套数组“扁平化”，生成一个一维数组。与 reduce() 等方法相比，flatMap() 方法更加简便易行，可以用于数组的过滤、映射、合并等操作。需要注意的是，flatMap() 方法只能“扁平化”一个层级的数组，如果需要处理嵌套数组，则需要先使用 map() 方法进行操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d6745ca941bf7134c39464