Unformed Building

配列をn個ずつの配列に分割して、それをまとめた配列を作る

公開：
更新：

パーマリンク

前の記事『ブクログのブログパーツAPIを使ってスライドする本棚を作る』を書いたとき、配列をn個ずつの配列に分割して、それをまとめた配列を作る、という処理をやったのですが、そのときのメモです。

「1つの配列をn個ずつに分割したい」みたいなことをTwitterに書いたら、

@hell2uさんから
破壊していいならn回shiftしてまとめたのを後ろに追加をループでいいんじゃないか

@GeckoTangさんから
sliceしてpush

と言われたので、両方やってみました。
ちなみに、スライド本棚ではshift & pushと似たような処理にしました。

例として、以下の配列を使います。

var baseArr = ['AAA', 'BBB', 'CCC', ... 'XXX', 'YYY', 'ZZZ'];

これを3つずつの9個に分割したいと思います。

shiftしてpush（破壊的）

var b      = baseArr.length, // 26
    cnt    = 3,              // いくつずつに分割するか
    newArr = [];             // 新しく作る配列

for(var i = 0; i < Math.ceil(b / cnt); i++) {

  var arrEl = []; // newArr に追加していく配列

  for(var j = 0; j < cnt; j++) {
    var p = baseArr.shift(); // 元配列の先頭を取得して元配列から削除
    if(!p) { break; }        // この場合は'ZZZ'の次に来たらループを抜ける
    arrEl.push(p);           // arrElに取得した要素を追加
  }

  newArr.push(arrEl); // 作ったarrElをnewArrに追加

}

sliceしてpush（非破壊的）

var b      = baseArr.length, // 26
    cnt    = 3,              // いくつずつに分割するか
    newArr = [];             // 新しく作る配列

for(var i = 0; i < Math.ceil(b / cnt); i++) {
  var j = i * cnt;
  var p = baseArr.slice(j, j + cnt); // i*cnt番目からi*cnt+cnt番目まで取得
  newArr.push(p);                    // 取得したものをnewArrに追加
}

サンプル

『jsdo.it』で作ってみました。
console.log使って分かりやすくしたつもりなので、Firebugとかで確認してみてください。

2020年1月6日追記：
『jsdo.it』は2019年に閉鎖されましたので、コードをそのままデモページに移行しました。
1つの配列を任意の配列に分割