JavaScriptを使用して長い配列を小さな配列に分割する方法
電子メールの配列があり（1つの電子メール、または100の電子メールである場合があります）、配列をajaxリクエストで送信する必要があります（方法を知っています）が、 10通以下のメール。したがって、20通の電子メールの元の配列がある場合、それらをそれぞれ10の2配列に分割する必要があります。または、元の配列に15個の電子メールがあり、10個の配列が1個、5個の配列が別の電子メールがある場合、jQueryを使用しています。これを行う最良の方法は何でしょうか。
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個が必要になります。
配列をループし、すべて消費されるまで接続します。
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' ]
Lodashを使用できます。 https://lodash.com/docs
_.chunk(['a', 'b', 'c', 'd'], 2);
// → [['a', 'b'], ['c', 'd']]
元の配列を破棄したくない場合、次のようなコードを使用して、長い配列を小さな配列に分割し、繰り返し処理できます。
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
}
@jyoreの answer の補足として、また元の配列を保持したい場合：
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];
別の方法：
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]];
これは、スライスを使用して作成されたコピーがmapの「this」引数に渡されるため、元の配列には影響しません。
私のソリューションも共有したいと思います。これはもう少し冗長ですが、同様に機能します。
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 ] ]
別の実装：
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"]]
注意-これは元の配列を変更しません。
または、機能的で不変の自己完結型の方法を好む場合：
function splitBy(size, list) {
return list.reduce((acc, curr, i, self) => {
if ( !(i % size) ) {
return [
...acc,
self.slice(i, i + size),
];
}
return acc;
}, []);
}
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ブロックを省略すると、エラーが発生します。
シンプルなワンライナーです
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));このコードをご覧ください。シンプルで効果的。
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);
Array.reduceは、特にmod演算子を使用する場合、大きな配列に対しては効率が悪い場合があります。よりクリーンな（そしておそらく読みやすい）機能的解決策はこれだと思います：
const chunkArray = (arr, size) =>
arr.length > size
? [arr.slice(0, size), ...chunkArray(arr.slice(size), size)]
: [arr];
既存の配列を変更しないメソッドが必要な場合は、これを試してください：
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])
}
よりコンパクト：
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));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);
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);