在 JavaScript 开发中，我们经常需要处理数组扁平化的问题。在 ECMAScript 2015 规范中，JavaScript 引入了 Array.prototype.flat() 方法来解决这个问题。在 ECMAScript 2017 中，又新增了 Array.prototype.flatMap() 方法，可以更加优雅地实现数组扁平化处理。
Array.prototype.flat() 方法
先来简单介绍一下 Array.prototype.flat() 方法。
Array.prototype.flat() 方法可以将一个多维数组扁平化成一个一维数组。该方法接收一个参数，表示想要扁平化的层数，如果不传递任何参数，则默认扁平化所有层数。
const arr = [1, [2, 3], [[4, 5], 6]]; const flattenedArr = arr.flat(); // [1, 2, 3, 4, 5, 6]
如上所示，调用 flat() 方法可以将 arr 扁平化成一个一维数组 flattenedArr。
Array.prototype.flatMap() 方法
接下来，我们看一下 Array.prototype.flatMap() 方法。
Array.prototype.flatMap() 方法与 Array.prototype.map() 方法类似，不同的是其会对每个元素执行一个映射函数并且把返回结果压缩成一个新数组。最终返回的数组是一个扁平化后的数组。
假设有一个数组 arr 存储了字符串数组，我们想把每个字符串中的单词都拆分成一个一个的单词。可以通过下面这段代码来实现：
const arr = ["Hello World", "I am a programmer"];
const words = arr.flatMap(str => str.split(" ")); // ["Hello", "World", "I", "am", "a", "programmer"]如上所示，我们将数组 arr 中的每个元素，即字符串，通过 split() 方法拆分成单词，并返回一个新的数组。flatMap() 方法在这里的作用是将所有的元素压缩成一个新的数组。
需要注意的是，由于 flatMap() 方法是基于 map() 方法实现的，因此需要先安装 ECMAScript 2017 或者 babel-polyfill 才能使用 flatMap() 方法。
使用 Array.prototype.flatMap() 实现数组扁平化
我们还可以使用 flatMap() 方法来实现数组扁平化。假设有一个多维数组 arr 存储在一个嵌套层数未知的数组中。我们可以通过下面这段代码来实现扁平化处理：
const arr = [[1, 2, 3], [4, 5], [6, 7, 8, 9]]; const flattenedArr = arr.flatMap(item => item); console.log(flattenedArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
如上所示，我们使用 flatMap() 方法将多维数组 arr 扁平化成一个一维数组 flattenedArr。
需要注意的是，由于 flatMap() 方法基于 map() 方法实现的，因此如果要处理的数组中包含多个嵌套层数，则可能需要使用多个 flatMap() 方法。具体处理方法可以根据具体情况来选择。
总结
Array.prototype.flatMap() 方法可以更加优雅地实现数组扁平化处理，提供了更多的可能性。在实际开发中，我们可以根据实际需求选择使用 flat() 方法或 flatMap() 方法。如果需要更加灵活的处理方式，可以尝试使用 flatMap() 方法来实现数组扁平化处理。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652cd8057d4982a6ebe64d39