ES11 的 Array.flat、flatMap 方法全面介绍

在 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，它会将这个元素过滤掉。

// javascriptcn.com 代码示例
const arr = [1, 2, 3, 4]

const result = arr.flatMap(num => {
  if (num % 2 === 0) {
    return [num, num * 2]
  } else {
    return null
  }
})

console.log(result) // [2, 4, 4, 8]

总结

ES11 引入的 Array.flat 和 Array.flatMap 方法能够更便捷地处理嵌套数组，提高开发效率。这篇文章详细介绍了这两个方法，并提供了示例代码进行演示。这些新特性的使用不仅可以提高代码的可读性和可维护性，也可提高代码的效率和性能，值得学习和掌握。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/651a170295b1f8cacd21f1c7