在 ES9 中，新增了 Array.prototype.flatMap() 方法，它可以在数组中进行深度遍历并映射，返回一个新数组。该方法能够简化开发者的工作，让日常的前端开发变得更加高效和便捷。
语法
Array.prototype.flatMap(callback[, thisArg])
callback 函数能接收三个参数：
- currentValue：当前元素
- index：当前元素的索引
- array：数组本身
实现方法
flatMap() 实现了与 map() 和 flat() 方法的功能类似，但它深度遍历数组，并将结果处理后返回一个新数组。我们可以看一下以下两个示例来理解它：
-- -------------------- ---- ------- -- ----- ---- ----- --- - --- -- -- ----- ------ - --------- -- -- - --- ------------------- -- ----- ---- ---- -- ------ ---- ----- ---- - ----- ---- ---- ----- --------- - ----------- ---------------------- -- --- -- -- -- --------- ---- ----- ---------- - ------------- -- -- - --- ----------------------- -- --- -- --
以上代码中，我们先使用 map() 方法将数组中的元素映射为一个包含一项的数组，并将结果存储在 mapped 变量中。接着，我们使用 flat() 方法扁平化 mapped 变量存储的数组，结果存储在 flattened 变量中。最后，我们将整个操作合并到一行代码中使用 flatMap() 方法。
使用示例
以下示例我们使用 flatMap() 方法来创建一个结合了两个数组的新数组：
const arr1 = [1, 2, 3] const arr2 = ['a', 'b', 'c'] const mixArrays = arr1.flatMap(num => arr2.map(letter => num + letter)) console.log(mixArrays) // ["1a", "1b", "1c", "2a", "2b", "2c", "3a", "3b", "3c"]
以上代码中，我们定义了两个数组 arr1 和 arr2，使用 flatMap() 方法对其中一个数组进行遍历，并且返回一个新数组。该示例展示了 flatMap() 方法的极高灵活性和可读性，它可以让开发者在处理复杂数据结构时节省很多代码和时间。
总结
在本文中，我们介绍了 ES9 中的新方法 Array.prototype.flatMap()，探讨了它的语法和实现方式，并提供了使用示例。此方法能为前端开发带来巨大的便利，使开发者在处理数组数据方面更加得心应手。如果你正在进行前端开发，不妨试用 flatMap() 方法，体验它给你的开发工作带来的便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6493ef1a48841e9894180767