如何在JavaScript中扁平化數組
實用指南:如何在JavaScript中扁平化數組
ES2019在Array原型中引入了兩個新方法:flat
和flatMap
。它們對於我們想要的操作——將數組扁平化非常有用。
讓我們看看它們是如何工作的。
但首先,提醒一下:只有Firefox 62+、Chrome 69+、Edge 76+和Safari 12+已經支持這兩個方法,因為它們是比較新的。請查看當前瀏覽器支持情況,並記住,如果你需要支持較舊的瀏覽器,可以使用Babel將你的代碼回退到之前的ES版本。
如果你不想使用Babel,而且你還沒有構建步驟,你可以使用Lodash提供的flatten()
、flattenDeep()
和flattenDepth()
函數,這可能更有意義。
Lodash的一個很酷的功能是你無需導入整個庫,你可以使用這些包來單獨使用這些函數:
下面是使用lodash.flatten
扁平化數組的方法:
1 | const flatten = require('lodash.flatten') |
現在讓我們來討論原生的flat()
和flatMap()
JavaScript方法。
flat()
是一個新的數組實例方法,它可以從多維數組中創建一個一維數組。
例如:
1 | ['Dog', ['Sheep', 'Wolf']].flat() |
默認情況下,它只能“扁平化”一層。
你可以向flat()
添加參數來設置要將數組扁平化到的層級。
將其設置為Infinity
可以無限層級扁平化:
1 | ['Dog', ['Sheep', ['Wolf']]].flat() |
如果你熟悉JavaScript數組的map()
方法,你就知道可以使用它對數組的每個元素執行一個函數。
如果不熟悉,請查看我的JavaScript map()教程。
flatMap()
是一個將flat()
和map()
結合在一起的新的Array原型方法。當在map()
回調中調用返回數組的函數時,它非常有用,但你希望結果數組是扁平的。
例如:
1 | ['My dog', 'is awesome'].map(words => words.split(' ')) |
tags: [“JavaScript”, “array flattening”, “ES2019”, “flat”, “flatMap”, “Lodash”]