JavaScriptを使用して、長い配列を小さな配列に分割する方法

100

私は電子メールの配列を持っており（1つの電子メールまたは100の電子メールにすることができます）、ajaxリクエスト（私はその方法を知っています）で配列を送信する必要がありますが、その中に10通以下の電子メール。したがって、元の20個の電子メールの配列がある場合は、それらをそれぞれ10個の2つの配列に分割する必要があります。または、元の配列に15個の電子メールがあり、次に10個の配列と5個の配列がある場合、jQueryを使用していますが、これを行うための最良の方法は何でしょうか。

javascript  jquery  arrays  loops 
— ビル
ソース

回答:

195

jqueryを使用しないでください...プレーンなJavaScriptを使用してください

var a = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

var b = a.splice(0,10);

//a is now [11,12,13,14,15];
//b is now [1,2,3,4,5,6,7,8,9,10];

これをループして、必要な動作を得ることができます。

var a = YOUR_ARRAY;
while(a.length) {
    console.log(a.splice(0,10));
}

これにより、一度に10個の要素が得られます... 15個の要素がある場合、必要に応じて1〜10、11〜15が得られます。

— ジョレ
ソース
9
YOUR_ARRAYも消費されることに注意してください（配列はオブジェクトです...）
— Claudio
ええ、私はそれを単に説明していなかったので、私はすでに例を使用して書いていました...それは完全に不要なコード行です...しかし、それは私に考えさせます...このパターンを使用する場合、オリジナルを混乱させないように、作業アレイにディープコピーを実行することをお勧めします
— jyore 2011
@junvar IDKは、その1ライナーが2018年に機能した場合（私はそれが機能したことを真剣に疑っています）、今日は惨めに失敗します。繰り返される配列を変更（つまり要素を削除）しないでください。インデックスが破棄されます。つまり、削除するたびに、削除された要素の数で再調整する必要があるため、「スキップ」して、完全に配列。試してみてください
— ドリューリース
107 
var size = 10; var arrayOfArrays = [];
for (var i=0; i<bigarray.length; i+=size) {
     arrayOfArrays.push(bigarray.slice(i,i+size));
}
console.log(arrayOfArrays);

とは異なりsplice()、slice()元の配列を破壊することはありません。

— Blazemonger
ソース
1
このソリューションの方が優れています
— Maduekwe Pedro
38

アレイをループして、すべてが消費されるまでスプライスします。



var a = ['a','b','c','d','e','f','g']
  , chunk

while (a.length > 0) {

  chunk = a.splice(0,3)

  console.log(chunk)

}

出力


[ 'a', 'b', 'c' ]
[ 'd', 'e', 'f' ]
[ 'g' ]
— クラウディオ
ソース
13

元の配列を破棄したくない場合は、次のようなコードを使用して、長い配列を小さな配列に分割し、それを繰り返し処理できます。

var longArray = [];   // assume this has 100 or more email addresses in it
var shortArrays = [], i, len;

for (i = 0, len = longArray.length; i < len; i += 10) {
    shortArrays.push(longArray.slice(i, i + 10));
}

// now you can iterate over shortArrays which is an 
// array of arrays where each array has 10 or fewer 
// of the original email addresses in it

for (i = 0, len = shortArrays.length; i < len; i++) {
    // shortArrays[i] is an array of email addresss of 10 or less
}
— jfriend00
ソース
6

別の実装：

const arr = ["H", "o", "w", " ", "t", "o", " ", "s", "p", "l", "i", "t", " ", "a", " ", "l", "o", "n", "g", " ", "a", "r", "r", "a", "y", " ", "i", "n", "t", "o", " ", "s", "m", "a", "l", "l", "e", "r", " ", "a", "r", "r", "a", "y", "s", ",", " ", "w", "i", "t", "h", " ", "J", "a", "v", "a", "S", "c", "r", "i", "p", "t"];

const size = 3; 
const res = arr.reduce((acc, curr, i) => {
  if ( !(i % size)  ) {    // if index is 0 or can be divided by the `size`...
    acc.push(arr.slice(i, i + size));   // ..push a chunk of the original array to the accumulator
  }
  return acc;
}, []);

// => [["H", "o", "w"], [" ", "t", "o"], [" ", "s", "p"], ["l", "i", "t"], [" ", "a", " "], ["l", "o", "n"], ["g", " ", "a"], ["r", "r", "a"], ["y", " ", "i"], ["n", "t", "o"], [" ", "s", "m"], ["a", "l", "l"], ["e", "r", " "], ["a", "r", "r"], ["a", "y", "s"], [",", " ", "w"], ["i", "t", "h"], [" ", "J", "a"], ["v", "a", "S"], ["c", "r", "i"], ["p", "t"]]

注意-これは元の配列を変更しません。

または、機能的で100％不変（上記のようにその場で変更することに何も悪いことはありませんが）および自己完結型の方法を好む場合：

function splitBy(size, list) {
  return list.reduce((acc, curr, i, self) => {
    if ( !(i % size)  ) {  
      return [
          ...acc,
          self.slice(i, i + size),
        ];
    }
    return acc;
  }, []);
}
— アウレリオ
ソース
5

@jyoreの回答の補足として、また元の配列を保持したい場合は、次のようにします。 

var originalArray = [1,2,3,4,5,6,7,8];

var splitArray = function (arr, size) {

  var arr2 = arr.slice(0),
      arrays = [];

  while (arr2.length > 0) {
      arrays.push(arr2.splice(0, size));
  }

  return arrays;
}

splitArray(originalArray, 2);
// originalArray is still = [1,2,3,4,5,6,7,8];
— ジャスティン
ソース
5

Array.reduceは、特にmod演算子を使用すると、大きな配列では非効率になる可能性があります。よりクリーンな（そしておそらく読みやすい）機能ソリューションは次のようになると思います。

const chunkArray = (arr, size) =>
  arr.length > size
    ? [arr.slice(0, size), ...chunkArray(arr.slice(size), size)]
    : [arr];
— tawnos178
ソース
3

別の方法：

var longArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var size = 2;

var newArray = new Array(Math.ceil(longArray.length / size)).fill("")
    .map(function() { return this.splice(0, size) }, longArray.slice());

// newArray = [[1, 2], [3, 4], [5, 6], [7, 8], [9, 10]];

スライスを使用して作成されたコピーがマップの「this」引数に渡されるため、これは元の配列には影響しません。

— AFurlepa
ソース
3

私のソリューションも共有したいと思います。もう少し冗長ですが、同様に機能します。

var data = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

var chunksize = 4;


var chunks = [];

data.forEach((item)=>{
  if(!chunks.length || chunks[chunks.length-1].length == chunksize)
  chunks.push([]);

  chunks[chunks.length-1].push(item);
});

console.log(chunks);

出力（フォーマット済み）：

[ [ 1,  2,  3,  4],
  [ 5,  6,  7,  8],
  [ 9, 10, 11, 12],
  [13, 14, 15    ] ]
— フィリペニコリ
ソース
2

Array.reduceを使用した別の実装（欠落しているのはこれだけだと思います！）：

const splitArray = (arr, size) =>
{
    if (size === 0) {
        return [];
    }

    return arr.reduce((split, element, index) => {
        index % size === 0 ? split.push([element]) : split[Math.floor(index / size)].push(element);
        return split;
    }, []);
};

上記の多くの解決策と同様に、これは非破壊的です。サイズが0のときに空の配列を返すのは、単なる慣例です。場合はifブロックが省略され、あなたが望むものであるかもしれないエラーを取得します。

— アルフ
ソース
1

このコードを見ることができます。シンプルで効果的。

function chunkArrayInGroups(array, unit) {
var results = [],
length = Math.ceil(array.length / unit);

for (var i = 0; i < length; i++) {
    results.push(array.slice(i * unit, (i + 1) * unit));
}
 return results;
}

chunkArrayInGroups(["a", "b", "c", "d"], 2);
— Subhankar
ソース
1

これが簡単なワンライナーです

var segment = (arr, n) => arr.reduce((r,e,i) => i%n ? (r[r.length-1].push(e), r)
                                                    : (r.push([e]), r), []),
        arr = Array.from({length: 31}).map((_,i) => i+1);
console.log(segment(arr,7));
スニペットを展開

— Redu
ソース
1

よりコンパクト：

const chunk = (xs, size) =>
  xs.map((_, i) =>
    (i % size === 0 ? xs.slice(i, i + size) : null)).filter(Boolean);
    
// Usage:
const sampleArray = new Array(33).fill(undefined).map((_, i) => i);

console.log(chunk(sampleArray, 5));
スニペットを展開

— dzuc
ソース
0

既存の配列を変更しないメソッドが必要な場合は、次のことを試してください。

let oldArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
let newArray = [];
let size = 3; // Size of chunks you are after
let j = 0; // This helps us keep track of the child arrays

for (var i = 0; i < oldArray.length; i++) {
  if (i % size === 0) {
    j++
  }
  if(!newArray[j]) newArray[j] = [];
  newArray[j].push(oldArray[i])
}
— ライアン
ソース
0 
function chunkArrayInGroups(arr, size) {
    var newArr=[];

    for (var i=0; arr.length>size; i++){
    newArr.push(arr.splice(0,size));
    }
    newArr.push(arr.slice(0));
    return newArr;

}

chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3);
— zgthompson
ソース
newArr = []をローカル変数にすることを忘れないでください
— zgthompson 2018
コードのみの回答は、低品質であるためにフラグが付けられてから削除される傾向があります。これが元の問題をどのように解決するかについて、いくつかの解説を提供できますか？
— グラハム
チャンクサイズが入力配列サイズよりも小さい場合、これは機能しません。
— r3wt 2018年
0 
function chunkArrayInGroups(arr, size) {
    var newArr=[];

    for (var i=0; i < arr.length; i+= size){
    newArr.push(arr.slice(i,i+size));
    }
    return newArr;

}

chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3);
— リドワヌライブラヒム
ソース
2
stackoverflowへようこそ。説明を追加することで、あなたの答えは改善されるでしょう。
— Simon.SA
0

関数として

var arrayChunk = function (array, chunkSize) {
            var arrayOfArrays = [];

            if (array.length <= chunkSize) {
                arrayOfArrays.push(array);
            } else {
                for (var i=0; i<array.length; i+=chunkSize) {
                    arrayOfArrays.push(array.slice(i,i+chunkSize));
                }
            }
            return arrayOfArrays;
        }

使用する

arrayChunk(originalArray, 10) //10 being the chunk size.
— クリント
ソース
0

再帰を使用する

let myArr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];
let size = 4; //Math.sqrt(myArr.length); --> For a n x n matrix
let tempArr = [];
function createMatrix(arr, i) {
    if (arr.length !== 0) {
      if(i % size == 0) {
        tempArr.push(arr.splice(0,size))
      } 
      createMatrix(arr, i - 1)
    }
}
createMatrix(myArr, myArr.length);
console.log(tempArr);

注：既存の配列、つまりmyArrが変更されます。

— シッダールタヤダフ
ソース
0

プロトタイプを使用して、配列クラスに直接設定できます 

Array.prototype.chunk = function(n) {
  if (!this.length) {
    return [];
  }
  return [this.slice(0, n)].concat(this.slice(n).chunk(n));
};
console.log([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15].chunk(5));
スニペットを展開

— AmitNayek
ソース
0 
const originalArr = [1,2,3,4,5,6,7,8,9,10,11];
const splittedArray = [];
  while (originalArr.length > 0) {
    splittedArray.push(originalArr.splice(0,range));  
  }

範囲3の出力

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

範囲4の出力

splittedArray === [[1,2,3,4][5,6,7,8][9,10,11]]
— Haures Bogdan
ソース
説明を追加していただけますか？
— エゴ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.