[Javascript] Array.reduceを使って一次元配列をn個ずつに分割して新しい二次元配列を返す


はじめに

一次元配列を指定の要素数ごとに分割し、二次元配列にする必要があったため、そのロジックに関する小ネタです。即時関数、アロー関数式、通常関数(関数宣言)の3タイプのご紹介です。(備忘録扱いです)

ロジック

sample.js
const originalArr = [1,2,3,4,5,6,7,8,9,10,11,12,13];
const num         = 3; // 分割単位

// 即時関数
const chunkedArr = ((arr, size) => arr.reduce((previous, _, i) => i % size ? previous : [...previous, arr.slice(i, i + size)], []))(originalArr, num);
// -> [[1,2,3],[4,5,6],[7,8,9],[10,11,12],[13]]

// アロー関数式
const hoge = (arr, size) => arr.reduce((previous, _, i) => i % size ? previous : [...previous, arr.slice(i, i + size)], []);
// console.log(hoge(originalArr, num)); -> [[1,2,3],[4,5,6],[7,8,9],[10,11,12],[13]]

// 通常関数(関数宣言)
function fuga(arr, size){
  return arr.reduce((previous, _, i) => i % size ? previous : [...previous, arr.slice(i, i + size)], []);
}
// console.log(fuga(originalArr, num)); -> [[1,2,3],[4,5,6],[7,8,9],[10,11,12],[13]]

必要な場面に応じて使い分ければいいと思います。ポイントはArray.reduece()の使い方になりますが、特に今回は第一引数であるpreviousを返す際、スプレッド構文を利用したことですね。

最後に

誰かの役に立てば幸いです。

[参考]