JavaScriptで配列をn個のサブ配列に均等に分割する方法

文字列や数値のリテラルを含む配列 arr を第1引数に、数値 n を第2引数として受け取る関数を作成することを考えてみましょう。

この関数は、各サブ配列が最大でも arr.length / n 個の要素を持つ、n 個のサブ配列からなる配列を返す必要があります。要素の振り分け方は以下のとおりです。

• 1番目の要素は1番目のサブ配列へ、2番目の要素は2番目のサブ配列へ、3番目の要素は3番目のサブ配列へ、というように順番に振り分けていきます。
• すべてのサブ配列に1つずつ要素が入ったら、再び先頭のサブ配列から2つ目の要素を追加していきます。
• 同様に、すべてのサブ配列が2つの要素を揃えてから、初めて先頭のサブ配列に3つ目の要素を追加します。以降もこの繰り返しです。

具体例

たとえば、入力配列が次の場合を考えます。

const input = [656, 756, 5345, 67, 43, 76, 54, 768, 34];

ここで n = 3 とした場合、期待される出力は以下のとおりです。

const output = [
   [ 656, 67, 54 ],
   [ 756, 43, 768 ],
   [ 5345, 76, 34 ]
];

解決策：Array.prototype.reduce() を使う

この問題は、元の配列に対して Array.prototype.reduce() メソッドを使うことで、簡潔かつ効率的に解決できます。

ポイントは、各要素のインデックス ind をサブ配列の数 size で割った余り（ind % size）を計算し、その値によってどのサブ配列へ要素を追加するかを決める点です。これにより、要素はラウンドロビン方式（巡回方式）で均等に振り分けられます。

コード例

以下が実際のコードです。

const input = [656, 756, 5345, 67, 43, 76, 54, 768, 34];
const divideArray = (arr, size) => {
   return arr.reduce((acc, val, ind) => {
      const subIndex = ind % size;
      if(!Array.isArray(acc[subIndex])){
         acc[subIndex] = [val];
      }else{
         acc[subIndex].push(val);
      };
      return acc;
   }, []);
};
console.log(divideArray(input, 3));

実行結果

上記のコードを実行すると、コンソールに次の出力が表示されます。

[ [ 656, 67, 54 ], [ 756, 43, 768 ], [ 5345, 76, 34 ] ]

コードの解説

• reduce() の初期値として空配列 [] を渡し、そこに結果となるサブ配列の集まりを構築していきます。
• Array.isArray(acc[subIndex]) で対象のサブ配列がまだ存在しない場合は新しく作成し、すでに存在する場合は push() で要素を追加します。
• 最終的に、要素が行と列のように整然と配置された2次元配列が得られます。