在 JavaScript 中，我们经常需要对数组进行扁平化操作，以便更方便地进行数据处理。ES6 中引入了 Array.flat() 方法，可以将嵌套的数组扁平化为一维数组。但是，当我们需要对数组进行进一步的操作时，这种扁平化操作可能会变得比较繁琐。ES12 中新增了 Array.flatMap() 方法，可以简化数组扁平化操作。
flatMap 方法介绍
Array.flatMap() 方法是 Array.map() 和 Array.flat() 方法的结合体，它首先对数组中的每个元素执行一个映射函数，然后将结果扁平化为一维数组。与 Array.map() 方法不同的是，Array.flatMap() 方法会自动将映射函数的返回值扁平化，而不需要使用额外的 flat() 方法。
Array.flatMap() 方法的语法如下：
array.flatMap(callback(currentValue[, index[, array]])[, thisArg])
其中，callback 函数接受三个参数：
currentValue：数组中正在处理的当前元素。index（可选）：当前元素在数组中的索引。array（可选）：调用flatMap方法的数组。
thisArg 参数可选，表示执行回调函数时的 this 值。
flatMap 方法示例
下面是一个简单的例子，使用 flatMap() 方法将一个嵌套的数组扁平化：
const arr = [1, 2, 3, [4, 5], 6, [7, [8, 9]]]; const flatArr = arr.flatMap((x) => (Array.isArray(x) ? x : [x])); console.log(flatArr); // [1, 2, 3, 4, 5, 6, 7, [8, 9]]
在上面的例子中，我们首先判断当前元素是否为数组，如果是，则直接返回该数组；否则，返回一个只包含当前元素的数组。最终，flatMap() 方法自动将这些数组扁平化为一维数组。
flatMap 方法的应用
Array.flatMap() 方法的应用非常广泛，下面是一些常见的用例：
1. 数组去重
使用 flatMap() 方法可以很容易地实现数组去重：
const arr = [1, 2, 2, 3, 3, 3, 4, 5, 5]; const uniqueArr = arr.flatMap((x, i, arr) => (arr.indexOf(x) === i ? x : [])); console.log(uniqueArr); // [1, 2, 3, 4, 5]
在上面的例子中，我们使用 indexOf() 方法判断当前元素在数组中的索引是否与当前的索引相等，如果相等，则说明当前元素是第一次出现，否则，返回一个空数组。
2. 数组扁平化
使用 flatMap() 方法可以很容易地实现数组扁平化：
const arr = [1, 2, [3, 4], 5, [6, [7, 8]]]; const flatArr = arr.flatMap((x) => (Array.isArray(x) ? x : [x])); console.log(flatArr); // [1, 2, 3, 4, 5, 6, 7, 8]
在上面的例子中，我们使用与前面相同的方法将数组扁平化为一维数组。
3. 数组转换
使用 flatMap() 方法可以很容易地实现数组转换：
const arr = ["apple", "banana", "orange"];
const newArr = arr.flatMap((x) => x.split(""));
console.log(newArr); // ["a", "p", "p", "l", "e", "b", "a", "n", "a", "n", "a", "o", "r", "a", "n", "g", "e"]在上面的例子中，我们将字符串数组转换为字符数组。
总结
Array.flatMap() 方法是 ES12 中新增的方法之一，它可以简化数组扁平化操作，同时具有广泛的应用场景。在实际开发中，我们可以灵活运用 flatMap() 方法，以提高代码的可读性和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fb9433d10417a222728992