配列データを動的に分割する方法

はじめに

個人開発のプロジェクトにおいて、配列データを動的に分割することが求められました。
この記事では、配列の情報を動的に分割し、新たな形式で整理する方法について説明します。

実現したいこと

元々のデータ構造は、全ての商品情報が一つの長い配列に格納されています。

[
  {"商品情報":[]},
  {"商品情報":[]},
  {"商品情報":[]},
  {"商品情報":[]}
]

この配列を以下のように各行には2つの商品情報が含まれるよう、動的に変更したいと考えています。

[
  [
    {"商品情報":[]},
    {"商品情報":[]}
  ],
  [
    {"商品情報":[]},
    {"商品情報":[]}
  ]
]

実装方法

下記のTypeScriptのコードは、与えられた配列を指定されたサイズのチャンクに分割する関数です。
この場合、2つの要素ごとに新しい配列を作成しています。

const splitArrayIntoChunksOfTwo = <T>(array: T[]): T[][] => {
  return array.reduce((resultArray: T[][], item, index) => {
    const chunkIndex = Math.floor(index / 2);  // 現在の要素が属するチャンクのインデックスを計算
    if (!resultArray[chunkIndex]) {
      resultArray[chunkIndex] = [];  // 新しいチャンクが必要な場合、初期化する
    }
    resultArray[chunkIndex].push(item);  // 現在の要素を適切なチャンクに追加

    return resultArray;  // 累積された結果を返す
  }, []);
}

この関数では、reduceを使用して配列の各要素に対して処理を行い、その結果を累積しています。
具体的には、各要素のインデックスを2で割った商を使って、その要素がどのチャンクに属するかを判断します。
新しいチャンクが必要な場合は、その場で初期化し、元の配列の要素を新しいチャンクに追加していきます。
最終的に、この関数は元の配列を指定されたサイズのチャンクに分割した新しい二次元配列を返します。