JavaScriptの配列のネストを解除するflat()とflatMap()メソッド
JavaScriptの配列のネストを解除するflat()メソッドとflatMap()メソッドの使い方と具体例をまとめました。
flat()メソッドの使い方
配列の中に配列があった場合でも、flat()メソッドを使うと簡単にひとつの配列にすることができます.
ネストされた配列をフラット(flat)にするメソッドです。
flat()だと、ネスト化された配列をフラットにできるのは配列の中の配列のみになります。つまり、その中に配列がさらにネスト化されている場合はその部分は配列で返されます。
二階層深くネスト化された配列をフラットにしたい場合はflat(2)と数字を入れることでフラットになります。
const arr = [[1,2,3], [4,5,6],7,8,9];
console.log(arr.flat());//(9) [1, 2, 3, 4, 5, 6, 7, 8, 9]
const arrDeep = [[1,[2,3]], [4,[5,6]],7,8,9];
console.log(arrDeep.flat());// (7) [1, Array(2), 4, Array(2), 7, 8, 9]
console.log(arrDeep.flat(2));// (9) [1, 2, 3, 4, 5, 6, 7, 8, 9]flat()メソッドの具体例
次のようなオブジェクトデータがあるとします。その中の全員のmovementsをひとつの配列にまとめたいときにflat()メソッドが使えます。
まずはmap()メソッドで一つの配列の中にmovementsの配列を取り込みます。
そして、flat()メソッドで一つの配列にします。
最後にreduce()メソッドですべての合計を出します。
// // Data
const account1 = {
owner: 'Yamada',
movements: [1,2,3,4,5],
};
const account2 = {
owner: 'Sasaki',
movements: [6,7,8,9,10],
};
const account3 = {
owner: 'Kondo',
movements: [11,12,13],
};
const account4 = {
owner: 'Siota',
movements: [14,15],
};
const accounts = [account1, account2, account3, account4];
const accountMovements = accounts.map(acc => acc.movements);
console.log(accountMovements);//mapでそれぞれを配列で取り込むと配列の中に配列が格納される
//(4) [Array(5), Array(5), Array(3), Array(2)]
// 0: (5) [1, 2, 3, 4, 5]
// 1: (5) [6, 7, 8, 9, 10]
// 2: (3) [11, 12, 13]
// 3: (2) [14, 15]
const allMovements = accountMovements.flat();
console.log(allMovements);//(15) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
const overalBalance = allMovements.reduce((acc, mov) => acc + mov, 0);
console.log(overalBalance); //120
//map,flat,reduceはチェーンして書くことができます。
const accountMovements2 = accounts.map(acc => acc.movements).flat().reduce((acc, mov) => acc + mov, 0);
console.log(accountMovements2); //120
////flatMap()メソッドでかく場合
const accountMovements3 = accounts.flatMap(acc => acc.movements).reduce((acc, mov) => acc + mov, 0);
console.log(accountMovements2); //120
flatMap()メソッドとflat()メソッドの違い
上のように、map()メソッドからのflat()メソッドというやり方はとても一般的なため、それがまとめて行えるメソッドがあります。それがflatMap()メソッドです。
flatMap()メソッドは上のように、accountMovements3の部分のようにして使うことができます。
flatMap()メソッドは、flat()メソッドとの機能の違いが一つあり、flat()メソッドはflat(2)とすることでさらに深くのネスト化された配列をフラットにできましたが、flatMap()メソッドではそれができません。1階層しかできません。