一份扁平化数组的实用指南

ES2019介绍了Array原型的两个新方法:flatflatMap。它们对于我们将要做的内容非常有用: 扁平化数组

来看看它们是怎么回事。

首先,要提醒以下:只有 Firefox 62+,Chrome 69+,Edge76+ 以及 Safari 12+ 已经支持了这两个方法,因为它们版本很新。在这里检查当前浏览器支持情况。不过技术,如果你需要支持更老的浏览器,你可以使用 Babel 使你的代码与以前的ES版本兼容。

如果你不想用 Babel, 并且你现在还没有构建环节,使用 Lodash 提供的flatten()flattenDeep()flattenDepth() 是一种更明智的选择。

Lodash 有一点很棒,你不必导入整个库。你可以通过下面这些包来单独使用这些功能:

这里演示一下如何用lodash.flatten来扁平化一个数组:

1
2
3
4
5
6
const flatten = require('lodash.flatten')

const animals = ['Dog', ['Sheep', 'Wolf']]

flatten(animals)
//['Dog', 'Sheep', 'Wolf']

现在我们再来说说JavaScript 原生的 flat()flatMap() 方法。

flat()是一个新的可以从多维数组创建一维数组的数组实例方法

例如:

1
2
['Dog', ['Sheep', 'Wolf']].flat()
//[ 'Dog', 'Sheep', 'Wolf' ]

默认它只扁平化一层。

你可以向 flat()添加参数来设置你想让数组扁平化的层数。

设为 Infinity来不限制层数。

1
2
3
4
5
6
7
8
['Dog', ['Sheep', ['Wolf']]].flat()
//[ 'Dog', 'Sheep', [ 'Wolf' ] ]

['Dog', ['Sheep', ['Wolf']]].flat(2)
//[ 'Dog', 'Sheep', 'Wolf' ]

['Dog', ['Sheep', ['Wolf']]].flat(Infinity)
//[ 'Dog', 'Sheep', 'Wolf' ]

如果你熟悉 JavaScript 数组的 map() 方法, 你应该知道你可以用它对数组的每个元素执行一个函数。

如果你还不熟悉,请看我的JavaScript map() 教程

flatMap() 是将 flat()map() 结合的一个数组原型方法。当map() 的回调函数返回一个数组的情况下,但你希望你最后得到的数组是扁平化的,它很有用。

1
2
3
4
5
['My dog', 'is awesome'].map(words => words.split(' '))
//[ [ 'My', 'dog' ], [ 'is', 'awesome' ] ]

['My dog', 'is awesome'].flatMap(words => words.split(' '))
//[ 'My', 'dog', 'is', 'awesome' ]

https://flaviocopes.com/javascript-flatten-array/