如何在JavaScript中扁平化數組

實用指南：如何在JavaScript中扁平化數組

ES2019在Array原型中引入了兩個新方法：flat和flatMap。它們對於我們想要的操作——將數組扁平化非常有用。

讓我們看看它們是如何工作的。

但首先，提醒一下：只有Firefox 62+、Chrome 69+、Edge 76+和Safari 12+已經支持這兩個方法，因為它們是比較新的。請查看當前瀏覽器支持情況，並記住，如果你需要支持較舊的瀏覽器，可以使用Babel將你的代碼回退到之前的ES版本。

如果你不想使用Babel，而且你還沒有構建步驟，你可以使用Lodash提供的flatten()、flattenDeep()和flattenDepth()函數，這可能更有意義。

Lodash的一個很酷的功能是你無需導入整個庫，你可以使用這些包來單獨使用這些函數：

• lodash.flatten
• lodash.flattendeep
• lodash.flattendepth

下面是使用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' ]

如果你熟悉JavaScript數組的map()方法，你就知道可以使用它對數組的每個元素執行一個函數。

如果不熟悉，請查看我的JavaScript map()教程。

flatMap()是一個將flat()和map()結合在一起的新的Array原型方法。當在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' ]