posted: 2019/05/05

lodashのflattenDeepをArray.prototype.flatで代用する

ES2019で追加された関数にArray.prototype.flatがある。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/flat
今までreduceでやってたようなflattenの処理が書き換えられる
// 今まではこんなやり方をやってたりした
const flatten = [1, [2, [3, [4]], 5]].reduce( (a, b) => [...a, ...b], [])
// => [1, 2, [3, [4]], 5]	 

// lodashならこう
_.flatten([1, [2, [3, [4]], 5]]);
// => [1, 2, [3, [4]], 5]	 

// それがこうできる
const flatten = [1, [2, [3, [4]], 5]].flat()
 // => [1, 2, [3, [4]], 5]
flatは引数としてdepthを入れることができる。上記例だと1回しかflatしてないが、例えばこんなふうに記述できる
const flatten = [1, [2, [3, [4]], 5]].flat(2)
// => [1, 2, [3, [4]], 5]
そしてここでflattenDeepのように、どれだけdepthがあるかわからない場合はInfinityが利用できる
const flatten = [1, [2, [3, [4]], 5]].flat(Infinity)
// => [1, 2, 3, 4, 5]

参考

Edit on Github