wake-up-neo.com

So teilen Sie lange Arrays mit JavaScript in kleinere Arrays auf

Ich habe ein Array von E-Mails (es kann nur eine E-Mail oder 100 E-Mails sein), und ich muss das Array mit einer Ajax-Anfrage senden (die ich weiß, wie es geht), aber ich kann nur ein Array senden, das hat 10 oder weniger E-Mails darin. Wenn es also ein ursprüngliches Array von 20 E-Mails gibt, muss ich sie in 2 Arrays von jeweils 10 aufteilen. oder wenn sich im ursprünglichen Array 15 E-Mails befinden, dann 1 Array von 10 und ein anderes Array von 5. Ich verwende jQuery. Was wäre der beste Weg, dies zu tun? 

60
Bill

Verwenden Sie kein jquery ... verwenden Sie einfaches 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];

Sie können dies wiederholen, um das gewünschte Verhalten zu erhalten.

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

Dies würde Ihnen 10 Elemente gleichzeitig geben. Wenn Sie 15 Elemente sagen, erhalten Sie 1-10, die 11-15, wie Sie wollten.

136
jyore
var size = 10; var arrayOfArrays = [];
for (var i=0; i<bigarray.length; i+=size) {
     arrayOfArrays.Push(bigarray.slice(i,i+size));
}
console.log(arrayOfArrays);

Im Gegensatz zu splice() ist slice() für das ursprüngliche Array nicht zerstörend.

74
Blazemonger

Schleifen Sie einfach über das Array und verbinden Sie es, bis alles verbraucht ist.



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

while (a.length > 0) {

  chunk = a.splice(0,3)

  console.log(chunk)

}

ausgabe


[ 'a', 'b', 'c' ]
[ 'd', 'e', 'f' ]
[ 'g' ]

26
Claudio

Sie können lodash verwenden: https://lodash.com/docs

_.chunk(['a', 'b', 'c', 'd'], 2);
// → [['a', 'b'], ['c', 'd']]
24
AlexParamonov

Angenommen, Sie möchten das ursprüngliche Array nicht zerstören, können Sie Code wie folgt verwenden, um das lange Array in kleinere Arrays aufzuteilen, die Sie dann wiederholen können:

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
}
9
jfriend00

Als Ergänzung zu @ jyores answer und falls Sie das ursprüngliche Array trotzdem behalten möchten: 

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
Justin

Eine andere Methode:

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]];

Dies hat keine Auswirkungen auf das ursprüngliche Array, da eine Kopie, die mit Slice erstellt wurde, an das Argument "this" von map übergeben wird.

3
AFurlepa

Ich möchte auch meine Lösung mitteilen. Es ist etwas ausführlicher, funktioniert aber auch.

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);

Ausgabe (formatiert):

[ [ 1,  2,  3,  4],
  [ 5,  6,  7,  8],
  [ 9, 10, 11, 12],
  [13, 14, 15    ] ]
3
Filipe Nicoli

Eine andere Implementierung:

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"]]

Hinweis: Das ursprüngliche Array wird nicht geändert.

Oder, wenn Sie eine funktionale, unveränderliche und in sich geschlossene Methode bevorzugen:

function splitBy(size, list) {
  return list.reduce((acc, curr, i, self) => {
    if ( !(i % size)  ) {  
      return [
          ...acc,
          self.slice(i, i + size),
        ];
    }
    return acc;
  }, []);
}
3
Nobita

Hier ist ein einfacher Liner

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));

1
Redu

Eine weitere Implementierung mit Array.reduce (ich denke, es ist die einzige, die fehlt!):

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;
    }, []);
};

Wie viele der obigen Lösungen ist diese zerstörungsfrei. Die Rückgabe eines leeren Arrays bei einer Größe von 0 ist nur eine Konvention. Wenn der if-Block weggelassen wird, erhalten Sie eine Fehlermeldung, die Sie möglicherweise benötigen.

1
Alf

Sie können sich diesen Code ansehen. Einfach und effektiv. 

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);
1
Subhankar

Wenn Sie eine Methode wünschen, die das vorhandene Array nicht ändert, versuchen Sie Folgendes:

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
Ryan

Kompakter:

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));
0
dzuc
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);
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);
0
zgthompson

Array.reduce könnte für große Arrays, insbesondere mit dem Mod-Operator, ineffizient sein. Ich denke, eine sauberere (und möglicherweise einfacher zu lesende) funktionale Lösung wäre folgende:

const chunkArray = (arr, size) =>
  arr.length > size
    ? [arr.slice(0, size), ...chunkArray(arr.slice(size), size)]
    : [arr];
0
tawnos178