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