JavaScriptの配列のネストを解除するflat()とflatMap()メソッド

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]

// // 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