扁平化JavaScript数组的实用指南
ES2019为数组原型引入了两个新方法:flat 和flatMap 。它们对我们要做的事情都非常有用:扁平化一个数组。
让我们来看看它们是如何工作的。
但首先,警告一下:只有Firefox 62+、Chrome 69+、Edge 76+和Safari 12+已经支持这两个方法,因为它们是最近才推出的。检查一下当前的浏览器支持情况,如果你需要支持旧的浏览器,记得你可以用Babel把你的代码回传到以前的ES版本。
如果你不想和Babel打交道,而且你还没有一个构建步骤,使用 flatten(), flattenDeep()和 flattenDepth()函数更有意义。
Lodash最酷的地方在于,你不需要导入整个库。你可以使用这些包单独使用那些函数。
下面是如何使用lodash.flatten 来平整一个数组。
const flatten = require('lodash.flatten')
const animals = ['Dog', ['Sheep', 'Wolf']]
flatten(animals)
//['Dog', 'Sheep', 'Wolf']
现在让我们来谈谈本地的flat() 和flatMap() JavaScript方法。
flat() 是一个新的数组实例方法,可以从一个多维数组创建一个一维数组。
例子。
['Dog', ['Sheep', 'Wolf']].flat()
//[ 'Dog', 'Sheep', 'Wolf' ]
默认情况下,它只能 "平移 "到一个层次。
你可以给flat() 添加一个参数来设置你想要平移数组的层数。
把它设置为Infinity ,就可以拥有无限的级别。
['Dog', ['Sheep', ['Wolf']]].flat()
//[ 'Dog', 'Sheep', [ 'Wolf' ] ]
['Dog', ['Sheep', ['Wolf']]].flat(2)
//[ 'Dog', 'Sheep', 'Wolf' ]
['Dog', ['Sheep', ['Wolf']]].flat(Infinity)
//[ 'Dog', 'Sheep', 'Wolf' ]
如果你熟悉数组的JavaScriptmap() 方法,你就知道使用它可以对数组的每个元素执行一个函数。
如果不是,请查看我的JavaScript map()教程。
flatMap() 是一个新的数组原型方法,它结合了 和 。当调用一个在 回调中返回数组的函数时,它很有用,但你希望你的结果数组是平的。flat() map() map()
['My dog', 'is awesome'].map(words => words.split(' '))
//[ [ 'My', 'dog' ], [ 'is', 'awesome' ] ]
['My dog', 'is awesome'].flatMap(words => words.split(' '))
//[ 'My', 'dog', 'is', 'awesome' ]