Angenommen, ich habe ein Javascript-Array, das wie folgt aussieht:

["Element 1","Element 2","Element 3",...]; // with close to a hundred elements.

Welcher Ansatz wäre geeignet, um das Array in viele kleinere Arrays mit beispielsweise höchstens 10 Elementen aufzuteilen (aufzuteilen)?

Die array.slice- Methode kann ein Slice vom Anfang, der Mitte oder dem Ende eines Arrays für beliebige Zwecke extrahieren, ohne das ursprüngliche Array zu ändern.

var i,j,temparray,chunk = 10;
for (i=0,j=array.length; i<j; i+=chunk) {
    temparray = array.slice(i,i+chunk);
    // do whatever
}

Geändert von einer Antwort von dbaseman: https://stackoverflow.com/a/10456344/711085

Object.defineProperty(Array.prototype, 'chunk_inefficient', {
  value: function(chunkSize) {
    var array = this;
    return [].concat.apply([],
      array.map(function(elem, i) {
        return i % chunkSize ? [] : [array.slice(i, i + chunkSize)];
      })
    );
  }
});

console.log(
  [1, 2, 3, 4, 5, 6, 7].chunk_inefficient(3)
)
// [[1, 2, 3], [4, 5, 6], [7]]

kleiner Nachtrag :

Ich sollte darauf hinweisen, dass das oben Genannte eine meiner Meinung nach nicht so elegante Problemumgehung ist Array.map. Grundsätzlich wird Folgendes ausgeführt, wobei ~ Verkettung ist:

[[1,2,3]]~[]~[]~[] ~ [[4,5,6]]~[]~[]~[] ~ [[7]]

Es hat die gleiche asymptotische Laufzeit wie die folgende Methode, aber möglicherweise einen schlechteren konstanten Faktor, da leere Listen erstellt werden. Man könnte dies wie folgt umschreiben (meistens das gleiche wie Blazemongers Methode, weshalb ich diese Antwort ursprünglich nicht eingereicht habe):

Effizientere Methode:

// refresh page if experimenting and you already defined Array.prototype.chunk

Object.defineProperty(Array.prototype, 'chunk', {
  value: function(chunkSize) {
    var R = [];
    for (var i = 0; i < this.length; i += chunkSize)
      R.push(this.slice(i, i + chunkSize));
    return R;
  }
});

console.log(
  [1, 2, 3, 4, 5, 6, 7].chunk(3)
)

Mein bevorzugter Weg ist heutzutage der oben genannte oder einer der folgenden:

Array.range = function(n) {
  // Array.range(5) --> [0,1,2,3,4]
  return Array.apply(null,Array(n)).map((x,i) => i)
};

Object.defineProperty(Array.prototype, 'chunk', {
  value: function(n) {

    // ACTUAL CODE FOR CHUNKING ARRAY:
    return Array.range(Math.ceil(this.length/n)).map((x,i) => this.slice(i*n,i*n+n));

  }
});

Demo:

> JSON.stringify( Array.range(10).chunk(3) );
[[1,2,3],[4,5,6],[7,8,9],[10]]

Oder wenn Sie keine Array.range-Funktion möchten, handelt es sich tatsächlich nur um einen Einzeiler (ohne Flusen):

var ceil = Math.ceil;

Object.defineProperty(Array.prototype, 'chunk', {value: function(n) {
    return Array(ceil(this.length/n)).fill().map((_,i) => this.slice(i*n,i*n+n));
}});

oder

Object.defineProperty(Array.prototype, 'chunk', {value: function(n) {
    return Array.from(Array(ceil(this.length/n)), (_,i)=>this.slice(i*n,i*n+n));
}});

Hier ist eine ES6-Version mit Reduce

var perChunk = 2 // items per chunk    

var inputArray = ['a','b','c','d','e']

var result = inputArray.reduce((resultArray, item, index) => { 
  const chunkIndex = Math.floor(index/perChunk)

  if(!resultArray[chunkIndex]) {
    resultArray[chunkIndex] = [] // start a new chunk
  }

  resultArray[chunkIndex].push(item)

  return resultArray
}, [])

console.log(result); // result: [['a','b'], ['c','d'], ['e']]

Und Sie sind bereit, weitere Karten- / Reduktions-Transformationen zu verketten. Ihr Eingabearray bleibt erhalten

Wenn Sie eine kürzere, aber weniger lesbare Version bevorzugen, können Sie einige davon concatin die Mischung streuen, um das gleiche Endergebnis zu erzielen:

inputArray.reduce((all,one,i) => {
   const ch = Math.floor(i/perChunk); 
   all[ch] = [].concat((all[ch]||[]),one); 
   return all
}, [])

Vermeiden Sie es, mit nativen Prototypen, einschließlich Array.prototype, herumzuspielen, wenn Sie nicht wissen, wer Ihren Code verbraucht (Dritte, Mitarbeiter, Sie selbst zu einem späteren Zeitpunkt usw.).

Es gibt Möglichkeiten, Prototypen sicher zu erweitern (jedoch nicht in allen Browsern), und es gibt Möglichkeiten, Objekte, die aus erweiterten Prototypen erstellt wurden, sicher zu konsumieren. Eine bessere Faustregel besteht jedoch darin, dem Prinzip der geringsten Überraschung zu folgen und diese Praktiken insgesamt zu vermeiden.

Wenn Sie etwas Zeit haben, lesen Sie Andrew Duponts JSConf 2011-Vortrag "Alles ist erlaubt: Erweitern von integrierten Funktionen" , um eine gute Diskussion zu diesem Thema zu erhalten.

Zurück zur Frage: Die oben genannten Lösungen funktionieren zwar, sind jedoch zu komplex und erfordern unnötigen Rechenaufwand. Hier ist meine Lösung:

function chunk (arr, len) {

  var chunks = [],
      i = 0,
      n = arr.length;

  while (i < n) {
    chunks.push(arr.slice(i, i += len));
  }

  return chunks;
}

// Optionally, you can do the following to avoid cluttering the global namespace:
Array.chunk = chunk;

Ich habe die verschiedenen Antworten auf jsperf.com getestet. Das Ergebnis ist dort verfügbar: https://web.archive.org/web/20150909134228/https://jsperf.com/chunk-mtds

Und die schnellste Funktion (und das funktioniert ab IE8) ist diese:

function chunk(arr, chunkSize) {
  var R = [];
  for (var i=0,len=arr.length; i<len; i+=chunkSize)
    R.push(arr.slice(i,i+chunkSize));
  return R;
}

Ich würde lieber die Spleißmethode verwenden:

var chunks = function(array, size) {
  var results = [];
  while (array.length) {
    results.push(array.splice(0, size));
  }
  return results;
};

Einzeiler in ECMA 6

const [list,chuckSize] = [[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15], 6]

new Array(Math.ceil(list.length / chuckSize)).fill().map(_ => list.splice(0,chuckSize))

Alte Frage: Neue Antwort! Ich habe tatsächlich mit einer Antwort auf diese Frage gearbeitet und einen Freund dazu gebracht, sie zu verbessern! Hier ist es also:

Array.prototype.chunk = function ( n ) {
    if ( !this.length ) {
        return [];
    }
    return [ this.slice( 0, n ) ].concat( this.slice(n).chunk(n) );
};

[1,2,3,4,5,6,7,8,9,0].chunk(3);
> [[1,2,3],[4,5,6],[7,8,9],[0]]

Heutzutage können Sie die Chunk-Funktion von lodash verwenden, um das Array in kleinere Arrays aufzuteilen. Https://lodash.com/docs#chunk Sie müssen nicht mehr mit den Schleifen herumspielen!

Es gab viele Antworten, aber das ist, was ich benutze:

const chunk = (arr, size) =>
  arr
    .reduce((acc, _, i) =>
      (i % size)
        ? acc
        : [...acc, arr.slice(i, i + size)]
    , [])

// USAGE
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
chunk(numbers, 3)

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

Suchen Sie zunächst nach einem Rest, wenn Sie den Index durch die Blockgröße dividieren.

Wenn es einen Rest gibt, geben Sie einfach das Akkumulator-Array zurück.

Wenn es keinen Rest gibt, ist der Index durch die Blockgröße teilbar. Nehmen Sie also einen Slice aus dem ursprünglichen Array (beginnend mit dem aktuellen Index) und fügen Sie ihn dem Akkumulator-Array hinzu.

Das zurückgegebene Akkumulator-Array für jede Iteration von Reduce sieht also ungefähr so ​​aus:

// 0: [[1, 2, 3]]
// 1: [[1, 2, 3]]
// 2: [[1, 2, 3]]
// 3: [[1, 2, 3], [4, 5, 6]]
// 4: [[1, 2, 3], [4, 5, 6]]
// 5: [[1, 2, 3], [4, 5, 6]]
// 6: [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
// 7: [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
// 8: [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
// 9: [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10]]

Generatoren verwenden

function* chunks(arr, n) {
 for(let i = 0; i < arr.length; i += n) {
     yield(arr.slice(i, i+n));
     }
}
let someArray = [0,1,2,3,4,5,6,7,8,9]
console.log([...chunks(someArray, 2)]) // [[0,1],[2,3],[4,5],[6,7],[8,9]]

Ok, fangen wir mit einem ziemlich engen an:

function chunk(arr, n) {
    return arr.slice(0,(arr.length+n-1)/n|0).
           map(function(c,i) { return arr.slice(n*i,n*i+n); });
}

Welches wird so verwendet:

chunk([1,2,3,4,5,6,7], 2);

Dann haben wir diese enge Reduzierfunktion:

function chunker(p, c, i) {
    (p[i/this|0] = p[i/this|0] || []).push(c);
    return p;
}

Welches wird so verwendet:

[1,2,3,4,5,6,7].reduce(chunker.bind(3),[]);

Da ein Kätzchen stirbt, wenn wir uns thisan eine Zahl binden , können wir stattdessen wie folgt manuell curryen:

// Fluent alternative API without prototype hacks.
function chunker(n) {
   return function(p, c, i) {
       (p[i/n|0] = p[i/n|0] || []).push(c);
       return p;
   };
}

Welches wird so verwendet:

[1,2,3,4,5,6,7].reduce(chunker(3),[]);

Dann die immer noch ziemlich enge Funktion, die alles auf einmal erledigt:

function chunk(arr, n) {
    return arr.reduce(function(p, cur, i) {
        (p[i/n|0] = p[i/n|0] || []).push(cur);
        return p;
    },[]);
}

chunk([1,2,3,4,5,6,7], 3);

Ich wollte eine einfache, nicht mutierende Lösung in reinem ES6 erstellen. Besonderheiten in Javascript machen es erforderlich, das leere Array vor dem Mapping zu füllen :-(

function chunk(a, l) { 
    return new Array(Math.ceil(a.length / l)).fill(0)
        .map((_, n) => a.slice(n*l, n*l + l)); 
}

Diese Version mit Rekursion scheint einfacher und überzeugender zu sein:

function chunk(a, l) { 
    if (a.length == 0) return []; 
    else return [a.slice(0, l)].concat(chunk(a.slice(l), l)); 
}

Die lächerlich schwachen Array-Funktionen von ES6 sorgen für gute Rätsel :-)

Ich denke, dies ist eine schöne rekursive Lösung mit ES6-Syntax:

const chunk = function(array, size) {
  if (!array.length) {
    return [];
  }
  const head = array.slice(0, size);
  const tail = array.slice(size);

  return [head, ...chunk(tail, size)];
};

console.log(chunk([1,2,3], 2));

Erstellt ein npm-Paket für dieses https://www.npmjs.com/package/array.chunk

var result = [];

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

Bei Verwendung eines TypedArray

var result = [];

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

Wenn Sie die EcmaScript-Version> = 5.1 verwenden, können Sie eine funktionale Version der chunk()Verwendung von array.reduce () mit O (N) -Komplexität implementieren :

function chunk(chunkSize, array) {
    return array.reduce(function(previous, current) {
        var chunk;
        if (previous.length === 0 || 
                previous[previous.length -1].length === chunkSize) {
            chunk = [];   // 1
            previous.push(chunk);   // 2
        }
        else {
            chunk = previous[previous.length -1];   // 3
        }
        chunk.push(current);   // 4
        return previous;   // 5
    }, []);   // 6
}

console.log(chunk(2, ['a', 'b', 'c', 'd', 'e']));
// prints [ [ 'a', 'b' ], [ 'c', 'd' ], [ 'e' ] ]

Erklärung von jedem // nbroben:

1. Erstellen Sie einen neuen Block, wenn der vorherige Wert, dh das zuvor zurückgegebene Array von Blöcken, leer ist oder wenn der letzte vorherige Block vorhanden ist chunkSize Elemente enthält
2. Fügen Sie den neuen Block zum Array der vorhandenen Blöcke hinzu
3. Andernfalls ist der aktuelle Block der letzte Block im Array von Blöcken
4. Fügen Sie dem Block den aktuellen Wert hinzu
5. Gibt das geänderte Array von Chunks zurück
6. Initialisieren Sie die Reduzierung, indem Sie ein leeres Array übergeben

Currying basierend auf chunkSize:

var chunk3 = function(array) {
    return chunk(3, array);
};

console.log(chunk3(['a', 'b', 'c', 'd', 'e']));
// prints [ [ 'a', 'b', 'c' ], [ 'd', 'e' ] ]

Sie können die chunk()Funktion zum globalen ArrayObjekt hinzufügen :

Object.defineProperty(Array.prototype, 'chunk', {
    value: function(chunkSize) {
        return this.reduce(function(previous, current) {
            var chunk;
            if (previous.length === 0 || 
                    previous[previous.length -1].length === chunkSize) {
                chunk = [];
                previous.push(chunk);
            }
            else {
                chunk = previous[previous.length -1];
            }
            chunk.push(current);
            return previous;
        }, []);
    }
});

console.log(['a', 'b', 'c', 'd', 'e'].chunk(4));
// prints [ [ 'a', 'b', 'c' 'd' ], [ 'e' ] ]

in coffeescript:

b = (a.splice(0, len) while a.length)

demo 
a = [1, 2, 3, 4, 5, 6, 7]

b = (a.splice(0, 2) while a.length)
[ [ 1, 2 ],
  [ 3, 4 ],
  [ 5, 6 ],
  [ 7 ] ]

results = []
chunk_size = 10
while(array.length > 0){
   results.push(array.splice(0, chunk_size))
}

Der folgende ES2015-Ansatz funktioniert ohne Definition einer Funktion und direkt auf anonymen Arrays (Beispiel mit Blockgröße 2):

[11,22,33,44,55].map((_, i, all) => all.slice(2*i, 2*i+2)).filter(x=>x.length)

Wenn Sie eine Funktion dafür definieren möchten, können Sie dies wie folgt tun (Verbesserung des Kommentars von K ._ zu Blazemongers Antwort ):

const array_chunks = (array, chunk_size) => array
    .map((_, i, all) => all.slice(i*chunk_size, (i+1)*chunk_size))
    .filter(x => x.length)

Und das wäre mein Beitrag zu diesem Thema. Ich denke, das .reduce()ist der beste Weg.

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);
        res = segment(arr,7);
console.log(JSON.stringify(res));

Die obige Implementierung ist jedoch nicht sehr effizient, da .reduce()sie alle arrFunktionen durchläuft . Ein effizienterer Ansatz (der der schnellsten imperativen Lösung sehr nahe kommt) wäre, über das reduzierte (zu zerteilende) Array zu iterieren, da wir seine Größe im Voraus durch berechnen können Math.ceil(arr/n);. Sobald wir das leere Ergebnisarray haben, müssen wir wie Array(Math.ceil(arr.length/n)).fill();der Rest Slices des arrArrays darauf abbilden .

function chunk(arr,n){
  var r = Array(Math.ceil(arr.length/n)).fill();
  return r.map((e,i) => arr.slice(i*n, i*n+n));
}

arr = Array.from({length: 31},(_,i) => i+1);
res = chunk(arr,7);
console.log(JSON.stringify(res));

Verwenden Sie ein Stück von lodash

lodash.chunk(arr,<size>).forEach(chunk=>{
  console.log(chunk);
})

Eine weitere Lösung mit arr.reduce():

const chunk = (arr, size) => (
  arr.reduce((acc, _, i) => {
    if (i % size === 0) acc.push(arr.slice(i, i + size))
    return acc
  }, [])
)

// Usage:
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const chunked = chunk(numbers, 3)
console.log(chunked)

Diese Lösung ist der Lösung von Steve Holgado sehr ähnlich . Da diese Lösung jedoch keine Array-Streuung verwendet und keine neuen Arrays in der Reduzierungsfunktion erstellt, ist sie schneller (siehe jsPerf-Test ) und subjektiv besser lesbar (einfachere Syntax) als die andere Lösung.

Bei jeder n-ten Iteration (wobei n = size; beginnend mit der ersten Iteration) wird dem Akkumulatorarray ( acc) ein Teil des Arrays angehängt (arr.slice(i, i + size) ) und dann zurückgegeben. Bei anderen Iterationen wird das Akkumulatorarray unverändert zurückgegeben.

Wenn sizeNull ist, gibt die Methode ein leeres Array zurück. Wenn dies sizenegativ ist, gibt die Methode fehlerhafte Ergebnisse zurück. Wenn dies in Ihrem Fall erforderlich ist, möchten Sie möglicherweise etwas gegen negative oder nicht positive sizeWerte unternehmen .

Wenn in Ihrem Fall die Geschwindigkeit wichtig ist, ist eine einfache forSchleife schneller als die Verwendung arr.reduce()(siehe jsPerf-Test ), und einige finden diesen Stil möglicherweise auch besser lesbar:

function chunk(arr, size) {
  // This prevents infinite loops
  if (size < 1) throw new Error('Size must be positive')

  const result = []
  for (let i = 0; i < arr.length; i += size) {
    result.push(arr.slice(i, i + size))
  }
  return result
}

Für eine funktionale Lösung mit Ramda :

Wo popularProductsist Ihr Eingabearray, 5ist die Blockgröße

import splitEvery from 'ramda/src/splitEvery'

splitEvery(5, popularProducts).map((chunk, i) => {
// do something with chunk

})

Einzeiliger ES6-Ansatz basierend auf Array.prototype reduceund pushMethoden:

const doChunk = (list, size) => list.reduce((r, v) =>
  (!r.length || r[r.length - 1].length === size ?
    r.push([v]) : r[r.length - 1].push(v)) && r
, []);

console.log(doChunk([0,1,2,3,4,5,6,7,8,9,10,11,12], 5));
// [[0, 1, 2, 3, 4], [5, 6, 7, 8, 9], [10, 11, 12]]

ES6 Generator Version

function* chunkArray(array,size=1){
    var clone = array.slice(0);
    while (clone.length>0) 
      yield clone.splice(0,size); 
};
var a = new Array(100).fill().map((x,index)=>index);
for(const c of chunkArray(a,10)) 
    console.log(c);

Dies ist die effizienteste und einfachste Lösung, die ich mir vorstellen kann:

function chunk(array, chunkSize) {
    let chunkCount = Math.ceil(array.length / chunkSize);
    let chunks = new Array(chunkCount);
    for(let i = 0, j = 0, k = chunkSize; i < chunkCount; ++i) {
        chunks[i] = array.slice(j, k);
        j = k;
        k += chunkSize;
    }
    return chunks;
}

ES6 verbreitet funktionale #ohmy #ftw

const chunk =
  (size, xs) => 
    xs.reduce(
      (segments, _, index) =>
        index % size === 0 
          ? [...segments, xs.slice(index, index + size)] 
          : segments, 
      []
    );

console.log( chunk(3, [1, 2, 3, 4, 5, 6, 7, 8]) );

Hier ist eine rekursive Lösung, die Tail Call Optimize ist.

const splitEvery = (n, xs, y=[]) =>
  xs.length===0 ? y : splitEvery(n, xs.slice(n), y.concat([xs.slice(0, n)])) 

console.log(splitEvery(2, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]))

BEARBEITEN: @ mblase75 hat der früheren Antwort während des Schreibens meiner Antwort einen präziseren Code hinzugefügt, daher empfehle ich, mit seiner Lösung fortzufahren.

Sie könnten folgenden Code verwenden:

var longArray = ["Element 1","Element 2","Element 3", /*...*/];
var smallerArrays = []; // will contain the sub-arrays of 10 elements each
var arraySize = 10;
for (var i=0;i<Math.ceil(longArray.length/arraySize);i++) {
    smallerArrays.push(longArray.slice(i*arraySize,i*arraySize+arraySize));
}

Ändern Sie den Wert von arraySize, um die maximale Länge der kleineren Arrays zu ändern.

Hier ist eine nicht mutierende Lösung, die nur Rekursion und Slice () verwendet.

const splitToChunks = (arr, chunkSize, acc = []) => (
    arr.length > chunkSize ?
        splitToChunks(
            arr.slice(chunkSize),
            chunkSize,
            [...acc, arr.slice(0, chunkSize)]
        ) :
        [...acc, arr]
);

Dann benutze es einfach gerne um splitToChunks([1, 2, 3, 4, 5], 3)zu bekommen [[1, 2, 3], [4, 5]].

Hier ist eine Geige, die Sie ausprobieren können: https://jsfiddle.net/6wtrbx6k/2/