前言
在 ECMAScript 2019 中，新增了 Array.prototype.flatMap 方法，它可以将一个数组中的每个元素进行转换，并将所有转换后的元素合并成一个新的数组。这个方法在实际开发中非常实用，可以极大地简化代码，提高开发效率。在本篇文章中，我们将详细介绍 Array.prototype.flatMap 方法的使用方法和应用场景。
语法
Array.prototype.flatMap 方法的语法如下：
arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])
其中，callback 是一个函数，用于对数组中的每个元素进行转换。callback 函数可以接收三个参数：
- currentValue：当前元素的值。
- index：当前元素的下标。
- array：原始数组。
thisArg 是 callback 函数中 this 的值。
示例
下面是一个简单的示例，演示了 Array.prototype.flatMap 方法的使用方法：
const arr = [1, 2, 3, 4]; const result = arr.flatMap((item) => [item * 2]); console.log(result); // [2, 4, 6, 8]
在这个示例中，我们使用了 Array.prototype.flatMap 方法，将原始数组中的每个元素都乘以 2。最终得到的新数组是 [2, 4, 6, 8]。
应用场景
下面是一些常见的应用场景，可以使用 Array.prototype.flatMap 方法：
1. 扁平化嵌套数组
在开发中，我们有时会遇到嵌套数组的情况。使用 Array.prototype.flatMap 方法，我们可以很方便地将嵌套数组扁平化。
const arr = [[1, 2], [3, 4], [5, 6]]; const result = arr.flatMap((item) => item); console.log(result); // [1, 2, 3, 4, 5, 6]
在这个示例中，我们使用了 Array.prototype.flatMap 方法，将嵌套数组扁平化为一个一维数组。
2. 过滤数组中的空值
在开发中，有时我们需要从数组中过滤掉空值。使用 Array.prototype.flatMap 方法，我们可以很方便地实现这个功能。
const arr = [1, 2, null, 3, undefined, 4]; const result = arr.flatMap((item) => item ? [item] : []); console.log(result); // [1, 2, 3, 4]
在这个示例中，我们使用了 Array.prototype.flatMap 方法，将数组中的空值过滤掉。
3. 实现链式调用
在开发中，我们有时需要对数组进行一系列操作，比如过滤、排序、去重等。使用 Array.prototype.flatMap 方法，我们可以实现链式调用，简化代码，提高可读性。
-- -------------------- ---- ------- ----- --- - --- -- -- -- --- ----- ------ - --- -------------- -- ---- - - --- -- --------------- -- ----- - --- ------- ----------- -------------------- -- --- --
在这个示例中，我们使用了 Array.prototype.flatMap 方法，实现了链式调用，对数组进行了过滤、乘以 2、排序和反转操作。
总结
在 ECMAScript 2019 中，新增了 Array.prototype.flatMap 方法，它可以将一个数组中的每个元素进行转换，并将所有转换后的元素合并成一个新的数组。使用 Array.prototype.flatMap 方法，我们可以很方便地实现扁平化嵌套数组、过滤数组中的空值和实现链式调用等功能。在实际开发中，Array.prototype.flatMap 方法可以极大地简化代码，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657bf8fdd2f5e1655d6b0598