JavaScriptで配列をN個の部分配列（チャンク）に分割する方法

JavaScriptで配列をN個の部分配列（チャンク）に分割する方法

JavaScriptでは、リテラルを格納した配列と数値nを受け取り、元の配列をn個の部分配列（チャンク）に分割した新しい配列を返す関数を実装したい場面があります。なお、nは必ず配列の長さ以下であると仮定します。

入力例

たとえば、入力配列が以下の場合を考えてみましょう。

const arr = [1,2,3,4,5,6,7,8,9,10];
const n = 3;

期待される出力

この場合、出力は次のようになります。

const output = [[1,2,3],[4,5,6],[7,8,9,10]];

実装コード

この処理を実現するコードは以下のとおりです。

const arr = [1,2,3,4,5,6,7,8,9,10];
const n = 3;
const divideIntoChunks = (arr, count) => {
    const res = [];
    const size = arr.length / count;
    let ind = 0;
    while (ind < arr.length) {
        res.push(arr.slice(ind, ind += size));
    };
    return res;
};
console.log(divideIntoChunks(arr, n));

コードの解説

まず、配列の長さ ÷ チャンク数で1つのチャンクに含まれる要素数を算出します。上の例では 10 ÷ 3 = 3.33… となります。

次に、whileループで配列の先頭から順にslice()メソッドを使って要素を切り出し、結果配列に追加していきます。slice()の終了位置に「現在のインデックス＋チャンクサイズ」を指定しているため、ループが進むごとに切り出し範囲が自動的に移動します。

要素数がチャンク数で割り切れない場合は、余りの要素がすべて最後のチャンクにまとめられます。そのため、上記の例では3つ目のチャンクに4つの要素が含まれています。

実行結果

コンソールには以下のように出力されます。

[ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9, 10 ] ]