在 JavaScript 中，数组是一种非常常见的数据类型，而 Array.prototype 上提供了一系列的方法用于对数组进行操作，其中 ES6 引入的一些新方法得到了广泛的应用。但是对于嵌套数组的处理，遇到了一些不便，ES11 引入的 Array.flat 和 Array.flatMap 方法，则为我们提供了更为便捷的操作方式。
什么是 Array.flat
我们经常会遇到数组内部有嵌套数组的情况，例如一个存储着书籍分类以及书籍信息的数组：
const books = [ ['Science Fiction', 'The Hitchhiker\'s Guide to the Galaxy', 'Dune'], ['Fantasy', 'The Lord of the Rings', 'A Song of Ice and Fire'], ['Mystery', 'The Da Vinci Code', 'Sherlock Holmes'], ]
现在我们想把这个数组打扁以便于展示或者处理，我们可以这样实现：
const flattened = books.reduce((acc, val) => {
return acc.concat(val)
}, [])这个过程比较繁琐，而且需要一个空数组和一个 reduce 方法来处理。在 ES11 中我们可以使用 Array.flat 方法来完成这个任务：
const flattened = books.flat()
Array.prototype.flat 接受一个可选参数 depth，指定打扁的深度：
const deepNested = [ [1, 2, [3, 4]], [5, 6], ] const flattened = deepNested.flat(Infinity) console.log(flattened) // [1, 2, 3, 4, 5, 6]
什么是 Array.flatMap
Array.prototype.flatMap 是在 Array.prototype.map 的基础上增加了一个打平的功能。我们假设有一个数组，里面的元素是字符串，每个字符串都表示一个人名，我们需要将每个人名的首字母大写：
const people = ['john', 'jane', 'emily']
const uppercasedPeople = people.map(name => {
return name.charAt(0).toUpperCase() + name.slice(1)
})但是如果我们想让结果打平，我们还需要加入一个 flat 。
const people = ['john', 'jane', 'emily']
const uppercasedPeopleNested = people.map(name => {
return name.split('').map(char => char.toUpperCase())
})
const uppercasedPeople = uppercasedPeopleNested.flat()ES11 的 Array.flatMap 方法结合了这两个操作，如下代码：
const uppercasedPeople = people.flatMap(name => {
return name.split('').map(char => char.toUpperCase())
})如果 flatMap 返回的是一个数组，它会将这个数组打平。如果返回的是 null 或 undefined，它会将这个元素过滤掉。
-- -------------------- ---- -------
----- --- - --- -- -- --
----- ------ - --------------- -- -
-- ---- - - --- -- -
------ ----- --- - --
- ---- -
------ ----
-
--
------------------- -- --- -- -- --总结
ES11 引入的 Array.flat 和 Array.flatMap 方法能够更便捷地处理嵌套数组，提高开发效率。这篇文章详细介绍了这两个方法，并提供了示例代码进行演示。这些新特性的使用不仅可以提高代码的可读性和可维护性，也可提高代码的效率和性能，值得学习和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651a170295b1f8cacd21f1c7