Powiedzmy, że mam tablicę JavaScript wyglądającą następująco:

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

Jakie podejście byłoby odpowiednie, aby podzielić (podzielić) tablicę na wiele mniejszych tablic zawierających, powiedzmy, maksymalnie 10 elementów?

Metoda array.slice może wyodrębnić plasterek z początku, środka lub końca tablicy dla dowolnych potrzeb, bez zmiany oryginalnej tablicy.

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

Zmodyfikowano na podstawie odpowiedzi 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]]

drobne uzupełnienie :

Powinienem zauważyć, że powyższe jest nie tak eleganckim (moim zdaniem) obejściem do użycia Array.map. Zasadniczo wykonuje następujące czynności, gdzie ~ jest konkatenacją:

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

Ma taki sam asymptotyczny czas działania, jak w poniższej metodzie, ale być może gorszy stały czynnik ze względu na tworzenie pustych list. Można to przepisać w następujący sposób (głównie taki sam jak metoda Blazemongera, dlatego pierwotnie nie przesłałem tej odpowiedzi):

Bardziej wydajna metoda:

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

Mój ulubiony sposób w dzisiejszych czasach to powyższe lub jedno z poniższych:

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

  }
});

Próbny:

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

Lub jeśli nie chcesz funkcji Array.range, w rzeczywistości jest to tylko jedna linijka (wyłączając puch):

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

lub

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

Oto wersja ES6 wykorzystująca redukcję

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

I jesteś gotowy do tworzenia kolejnych map / redukcji transformacji. Twoja tablica wejściowa pozostaje nienaruszona

Jeśli wolisz krótszą, ale mniej czytelną wersję, możesz dodać trochę concatdo miksu, aby uzyskać ten sam efekt końcowy:

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

Staraj się unikać zmarnowania natywnych prototypów, w tym Array.prototype, jeśli nie wiesz, kto będzie konsumował Twój kod (osoby trzecie, współpracownicy, ty w późniejszym terminie itp.).

Istnieją sposoby bezpiecznego rozszerzania prototypów (ale nie we wszystkich przeglądarkach) i istnieją sposoby bezpiecznego konsumowania obiektów utworzonych z rozszerzonych prototypów, ale lepszą zasadą jest przestrzeganie zasady najmniejszej niespodzianki i całkowite unikanie tych praktyk.

Jeśli masz trochę czasu, obejrzyj wykład JSConf 2011 Andrew Duponta „Wszystko jest dozwolone: ​​rozszerzanie wbudowanych” , aby uzyskać dobrą dyskusję na ten temat.

Ale wracając do pytania, chociaż powyższe rozwiązania będą działać, są one zbyt złożone i wymagają niepotrzebnego narzutu obliczeniowego. Oto moje rozwiązanie:

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;

Testowałem różne odpowiedzi na stronie jsperf.com. Wynik jest dostępny tam: https://web.archive.org/web/20150909134228/https://jsperf.com/chunk-mtds

A najszybszą funkcją (i działa z IE8) jest ta:

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

Wolałbym użyć metody łączenia :

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

Jednowarstwowy w 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))

Stare pytanie: nowa odpowiedź! Właściwie pracowałem z odpowiedzią na to pytanie i mój przyjaciel poprawił to! Oto on:

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

W dzisiejszych czasach możesz użyć funkcji fragmentu lodash, aby podzielić tablicę na mniejsze tablice https://lodash.com/docs#chunk Nie musisz już bawić się pętlami!

Było wiele odpowiedzi, ale używam tego:

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

Najpierw sprawdź resztę przy dzieleniu indeksu przez wielkość porcji.

Jeśli pozostała resztka, po prostu zwróć zestaw akumulatorów.

Jeśli nie ma reszty, indeks dzieli się przez wielkość porcji, więc weź wycinek z oryginalnej tablicy (zaczynając od bieżącego indeksu) i dodaj go do tablicy akumulatorów.

Tak więc zwrócona tablica akumulatorów dla każdej iteracji redukcji wygląda mniej więcej tak:

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

Korzystanie z generatorów

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, zacznijmy od dość ciasnego:

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

Który jest używany w ten sposób:

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

Następnie mamy tę funkcję ścisłego reduktora:

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

Który jest używany w ten sposób:

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

Ponieważ kotek umiera, gdy łączymy się thisz liczbą, możemy zamiast tego wykonać ręczne curry:

// 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;
   };
}

Który jest używany w ten sposób:

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

Następnie wciąż dość ścisła funkcja, która robi to wszystko za jednym razem:

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

Chciałem stworzyć proste, niemutujące rozwiązanie w czystym ES6. Specyfika javascript wymaga wypełnienia pustej tablicy przed mapowaniem :-(

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

Ta wersja z rekurencją wydaje się prostsza i bardziej przekonująca:

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

Śmiesznie słabe funkcje tablicowe ES6 stanowią dobre łamigłówki :-)

Myślę, że to miłe rekurencyjne rozwiązanie ze składnią ES6:

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

Utworzono pakiet npm dla tego 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;

Podczas korzystania z TypedArray

var result = [];

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

Jeśli używasz EcmaScript w wersji> = 5.1, możesz zaimplementować funkcjonalną wersję za chunk()pomocą array.reduce () o złożoności O (N):

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

Wyjaśnienie każdego z // nbrpowyższych:

1. Utwórz nową porcję, jeśli poprzednia wartość, tj. Poprzednio zwrócona tablica porcji, jest pusta lub jeśli ostatnia poprzednia porcja zawiera chunkSizeelementy
2. Dodaj nową porcję do tablicy istniejących porcji
3. W przeciwnym razie bieżąca porcja jest ostatnią porcją w tablicy porcji
4. Dodaj bieżącą wartość do porcji
5. Zwraca zmodyfikowaną tablicę porcji
6. Zainicjuj redukcję, przekazując pustą tablicę

Curry oparte na chunkSize:

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

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

Możesz dodać chunk()funkcję do Arrayobiektu globalnego :

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

Poniższe podejście ES2015 działa bez konieczności definiowania funkcji i bezpośrednio na anonimowych tablicach (przykład z wielkością porcji 2):

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

Jeśli chcesz zdefiniować dla tego funkcję, możesz to zrobić w następujący sposób (poprawa komentarza K. do odpowiedzi Blazemongera ):

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

I to byłby mój wkład w ten temat. Myślę, że .reduce()to najlepszy sposób.

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

Ale powyższa implementacja nie jest zbyt wydajna, ponieważ .reduce()przebiega przez wszystkie arrfunkcje. Bardziej wydajnym podejściem (bardzo zbliżonym do najszybszego imperatywnego rozwiązania) byłoby iterowanie po zredukowanej (do porcji) tablicy, ponieważ możemy wcześniej obliczyć jej rozmiar Math.ceil(arr/n);. Gdy mamy już pustą tablicę wyników, podobnie jak Array(Math.ceil(arr.length/n)).fill();reszta, należy zmapować na nią jej plasterki arr.

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

Użyj fragmentu z lodash

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

Aby uzyskać funkcjonalne rozwiązanie, używając Ramdy :

Gdzie popularProductsjest twoja tablica wejściowa, 5to wielkość porcji

import splitEvery from 'ramda/src/splitEvery'

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

})

ES6 podejście jedna linia na podstawie Array.prototype reducei pushmetod:

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

Wersja generatora ES6

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

To najbardziej wydajne i proste rozwiązanie, o jakim mogłem myśleć:

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 rozprzestrzenia funkcjonalne #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]) );

Oto rekurencyjne rozwiązanie, które polega na optymalizacji ogonów.

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

Jeszcze jedno rozwiązanie wykorzystujące 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)

To rozwiązanie jest bardzo podobne do rozwiązania Steve'a Holgado . Ponieważ jednak to rozwiązanie nie wykorzystuje rozkładania tablic i nie tworzy nowych tablic w funkcji reduktora, jest szybsze (patrz test jsPerf ) i subiektywnie bardziej czytelne (prostsza składnia) niż inne rozwiązanie.

Przy każdej n-tej iteracji (gdzie n = size; zaczynając od pierwszej iteracji) do tablicy akumulatorów ( acc) dołączany jest fragment tablicy ( arr.slice(i, i + size)), a następnie zwracany. W innych iteracjach tablica akumulatorów jest zwracana w niezmienionej postaci.

Jeśli sizewynosi zero, metoda zwraca pustą tablicę. Jeśli sizejest ujemny, metoda zwraca zepsute wyniki. Tak więc, jeśli zajdzie taka potrzeba, możesz zrobić coś z wartościami ujemnymi lub dodatnimi size.

Jeśli w twoim przypadku ważna jest prędkość, prosta forpętla byłaby szybsza niż używanie arr.reduce()(patrz test jsPerf ), a niektórzy mogą uważać ten styl za bardziej czytelny:

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
}

EDYCJA: @ mblase75 dodał bardziej zwięzły kod do wcześniejszej odpowiedzi, kiedy pisałem mój, więc zalecam skorzystanie z jego rozwiązania.

Możesz użyć takiego kodu:

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

Zmień wartość, arraySizeaby zmienić maksymalną długość mniejszych tablic.

Oto niemutujące rozwiązanie wykorzystujące tylko rekurencję i slice ().

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

Następnie po prostu użyj go tak, jak splitToChunks([1, 2, 3, 4, 5], 3)chcesz [[1, 2, 3], [4, 5]].

Oto skrzypce do wypróbowania: https://jsfiddle.net/6wtrbx6k/2/