JavaScript 中的数组是开发者经常使用的数据结构，每个版本的 ECMAScript 都会为数组添加新的方法和特性。ES11 引入了 Array.prototype.flatMap() 方法，这个方法能够让开发者更便捷地对嵌套数组进行操作，提高开发效率和代码可读性。
Array.prototype.flatMap() 方法
Array.prototype.flatMap() 方法是 ES11 中的一个新方法，用于将嵌套数组“扁平化”为一维数组。此方法的语法如下：
arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])
与 Array.prototype.map() 类似，Array.prototype.flatMap() 方法也会对数组中的每一个元素调用回调函数。不同的是，flatMap() 方法在调用回调函数之后，会将返回的嵌套数组“扁平化”，并将结果添加到一个新的数组中。
举个例子，如果我们有一个嵌套数组：
const nestedArray = [[1, 2], [3, 4], [5, 6]];
使用 Array.prototype.flatMap() 方法可以将其转换为一维数组：
const flattenedArray = nestedArray.flatMap(arr => arr); // flattenedArray = [1, 2, 3, 4, 5, 6]
实际应用
在日常开发中，我们常常需要对数据进行处理或转换。Array.prototype.flatMap() 方法能够简化很多数据处理的操作，提高代码的可读性和效率。
数组扁平化
数组扁平化是 Array.prototype.flatMap() 方法最常见的应用场景。举个例子，我们有一个嵌套数组，需要将其中的数据展示到页面中：
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>
可以使用 Array.prototype.flatMap() 方法将嵌套数组转换为一维数组，然后在页面上展示数据：
-- -------------------- ---- ------- ----- ----------- - ---- --- --- ---- ----- -------------- - ----------------------- -- ----- ----- ---- - ----------------------------- --------------------------- -- - ----- -- - ----------------------------- -------------- - ----- --------------------- ---
数组过滤
Array.prototype.flatMap() 方法可以结合 Array.prototype.filter() 方法，用于过滤符合条件的数组元素。举个例子，我们有一个嵌套数组，需要过滤出所有大于 3 的元素：
const nestedArray = [[1, 2], [3, 4], [5, 6]]; const filteredArray = nestedArray.flatMap(arr => arr).filter(num => num > 3); // filteredArray = [4, 5, 6]
数组转换
Array.prototype.flatMap() 方法还可以将数组转换为另一个数组，这个场景常常出现在异步操作中。举个例子，我们有一个嵌套数组，需要将其中的元素转换为 Promise 对象，然后使用 Promise.all() 等待所有 Promise 完成并返回新的数据：
-- -------------------- ---- -------
----- ----------- - ---- --- --- --- --- ----
------------
----------------------- -- -
------ ----------- -- -
------ --- --------------- -- -
------------- -- -
----------- - ---
-- ------
---
---
--
------------- -- -
-- ------ - --- -- -- -- --- ---
---总结
在实际开发中，我们经常会遇到需要处理数组的场景。ES11 中的 Array.prototype.flatMap() 方法能够简化很多数据处理的操作，提高代码的可读性和效率。本文介绍了该方法的基本语法和常见应用场景，并给出了示例代码。在日常开发中，我们可以根据具体需求使用 Array.prototype.flatMap() 方法，提升代码的效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e0becbf6b2d6eab3bf55f4