如何在JavaScript中展平数组

扁平化JavaScript数组的实用指南

ES2019为Array原型引入了两种新方法:flatflatMap。它们对我们想要做的事情都非常有用:展平数组

让我们看看它们是如何工作的。

但首先要提个警告:只有Firefox 62 +,Chrome 69 +,Edge 76+和Safari 12+已经支持这两种方法,因为它们是相当新的。检查当前的浏览器支持,请记住您可以使用巴别塔如果需要支持较旧的浏览器,则可以将代码反向移植到以前的ES版本。

如果您不想与Babel打交道,并且还没有构建步骤,那么使用flatten()flattenDeep()flattenDepth()Lodash提供的功能。

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()是一种新的Array原型方法,结合了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' ]

免费下载我的JavaScript初学者手册


更多js教程: