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

Category : JavaScript

前の記事、ブクログのブログパーツ 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 とかで確認してみてください。

Leave a Reply