在以往的 JavaScript 版本中，使用 Array.prototype.flat() 方法将嵌套的数组展平成一维数组。不过这个方法只能展平一层，如果想迭代的更深，就需要使用递归或者其他的方法。而在 ES12 中，新增了一个 Array.prototype.flatMap() 方法，作为 Array.prototype.map() 和 Array.prototype.flat() 的组合使用，能够轻松地解决数组平铺问题。
flatMap 方法的介绍
Array.prototype.flatMap() 方法接受一个函数作为参数，该函数返回一个数组。它将每个元素映射到一个数组，并将根据提供的深度递归地展开成一个新的数组。
Array.prototype.flatMap() 方法的语法如下：
array.flatMap(callback(currentValue[, index[, array]])[, thisArg])
其中，callback 函数有三个参数：
currentValue：数组当前被处理的元素。index(可选)：当前元素在该数组中的索引。array(可选)：调用flatMap方法的数组。
可以看到，Array.prototype.flatMap() 方法很像 Array.prototype.map() 方法。不同之处在于它会展平返回的数组。
实例演示
下面我们来演示一下如何使用 flatMap() 方法解决数组平铺问题。
const nestedArr = [[1, 2], [3, 4], [5, 6]]; const flatArr = nestedArr.flatMap((arr) => arr); console.log(flatArr); // [1, 2, 3, 4, 5, 6]
上面的代码将 nestedArr 数组展平成一个新的数组。我们将 callback 函数设为返回传入的数组 arr，这样每个元素都被展平。这个例子是一个二维数组中，每一个子数组中的元素都是数值型。
我们也可以通过 flatMap() 方法对数组中的元素进行操作，让它们满足我们的需求。
-- -------------------- ---- ------- ----- --------- - --------- --------- ---------- ----- --------- - ------------------------- -- - ----- - -------------------- ------ ----------------------- - ---------------- --- ----------------------- -- --------- --------- ---------
上面的代码将 stringArr 数组中的元素首字母变为大写，并将其他字母变成小写字母。
平铺多维数组
如果我们有一个多维数组，想将其中的所有元素展平成一个一维数组，这时 Array.prototype.flat() 方法就不再适用了。因为它无法将多维嵌套展平。但是，就像前面提到的那样，Array.prototype.flatMap() 方法将多维嵌套数组展平成一维数组，碾平多维数组。例如：
const multiArr = [[1, 2, [3]], 4]; const flatArr = multiArr.flatMap((el) => el); console.log(flatArr); // [1, 2, [3], 4]
上面的代码可以看到，使用 Array.prototype.flatMap() 方法可以很方便地将多维数组展平成一维数组。
结论
ES12 提供的 Array.prototype.flatMap() 方法可以很好地解决数组平铺问题。它不但可以轻松地展平一维数组，而且能够展平多维嵌套数组。通过这个方法，我们可以更加优雅地编写代码，避免使用递归等复杂方法。同时，结合实际开发中的需求，我们也能够更好地运用这个方法，让开发变得更加便捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f6655bc5c563ced584cef0