Disons que j'ai un tableau Javascript qui ressemble à ceci:

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

Quelle approche serait appropriée pour fragmenter (diviser) le tableau en plusieurs tableaux plus petits avec, disons, 10 éléments au maximum?

La méthode array.slice peut extraire une tranche du début, du milieu ou de la fin d'un tableau à toutes fins utiles, sans modifier le tableau d'origine.

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

Modifié à partir d'une réponse de 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]]

addendum mineur :

Je dois souligner que ce qui précède est une solution de contournement pas si élégante (dans mon esprit) à utiliser Array.map. Il fait essentiellement ce qui suit, où ~ est la concaténation:

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

Il a le même temps d'exécution asymptotique que la méthode ci-dessous, mais peut-être un facteur constant pire en raison de la création de listes vides. On pourrait réécrire ceci comme suit (principalement la même que la méthode de Blazemonger, c'est pourquoi je n'ai pas soumis cette réponse à l'origine):

Méthode plus efficace:

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

De nos jours, ma voie préférée est celle ci-dessus, ou l'une des suivantes:

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

  }
});

Démo:

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

Ou si vous ne voulez pas d'une fonction Array.range, c'est en fait juste une ligne (à l'exception du fluff):

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

ou

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

Voici une version ES6 utilisant réduire

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

Et vous êtes prêt à enchaîner davantage la carte / réduire les transformations. Votre tableau d'entrée est laissé intact

Si vous préférez une version plus courte mais moins lisible, vous pouvez en saupoudrer concatdans le mix pour le même résultat final:

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

Essayez d'éviter le bourrage avec des prototypes natifs, y compris Array.prototype, si vous ne savez pas qui va consommer votre code (tiers, collègues, vous-même à une date ultérieure, etc.).

Il existe des moyens d'étendre les prototypes en toute sécurité (mais pas dans tous les navigateurs) et il existe des moyens de consommer en toute sécurité des objets créés à partir de prototypes étendus, mais une meilleure règle de base est de suivre le principe de la moindre surprise et d'éviter complètement ces pratiques.

Si vous avez un peu de temps, regardez la conférence JSConf 2011 d'Andrew Dupont, "Tout est permis: extension des fonctions intégrées" , pour une bonne discussion sur ce sujet.

Mais revenons à la question, bien que les solutions ci-dessus fonctionnent, elles sont trop complexes et nécessitent des frais de calcul inutiles. Voici ma solution:

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;

J'ai testé les différentes réponses sur jsperf.com. Le résultat est disponible ici: https://web.archive.org/web/20150909134228/https://jsperf.com/chunk-mtds

Et la fonction la plus rapide (et qui fonctionne à partir d'IE8) est celle-ci:

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

Je préfère utiliser la méthode d' épissure :

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

Une doublure dans 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))

Ancienne question: nouvelle réponse! En fait, je travaillais avec une réponse à cette question et j'ai demandé à un ami de l'améliorer! Voici donc:

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

De nos jours, vous pouvez utiliser la fonction chunk de lodash pour diviser le tableau en plus petits tableaux https://lodash.com/docs#chunk Plus besoin de jouer avec les boucles!

Il y a eu beaucoup de réponses mais voici ce que j'utilise:

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

Tout d'abord, recherchez un reste lorsque vous divisez l'index par la taille du bloc.

S'il y a un reste, renvoyez simplement le tableau d'accumulateurs.

S'il n'y a pas de reste, alors l'index est divisible par la taille du morceau, alors prenez une tranche du tableau d'origine (en commençant à l'index actuel) et ajoutez-la au tableau d'accumulateurs.

Ainsi, le tableau d'accumulateurs renvoyé pour chaque itération de réduction ressemble à ceci:

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

Utilisation de générateurs

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, commençons par un assez serré:

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

Qui est utilisé comme ceci:

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

Ensuite, nous avons cette fonction de réduction serrée:

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

Qui est utilisé comme ceci:

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

Puisqu'un chaton meurt quand nous nous lions this à un nombre, nous pouvons effectuer un curry manuel comme ceci à la place:

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

Qui est utilisé comme ceci:

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

Ensuite, la fonction encore assez serrée qui fait tout en une seule fois:

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

Je visais à créer une solution simple non mutante en ES6 pur. Les particularités en javascript obligent à remplir le tableau vide avant le mappage :-(

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

Cette version avec récursivité semble plus simple et plus convaincante:

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

Les fonctions de tableau ridiculement faibles d'ES6 font de bons puzzles :-)

Je pense que c'est une belle solution récursive avec la syntaxe 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));

Création d'un package npm pour ce 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;

Lors de l'utilisation d'un TypedArray

var result = [];

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

Si vous utilisez la version EcmaScript> = 5.1, vous pouvez implémenter une version fonctionnelle de l' chunk()utilisation de array.reduce () qui a une complexité 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' ] ]

Explication de chacun // nbrci-dessus:

1. Créez un nouveau bloc si la valeur précédente, c'est-à-dire le tableau de blocs précédemment renvoyé, est vide ou si le dernier bloc précédent contient des chunkSizeéléments
2. Ajouter le nouveau morceau à la gamme de morceaux existants
3. Sinon, le bloc actuel est le dernier bloc du tableau de blocs
4. Ajouter la valeur actuelle au morceau
5. Renvoyer le tableau modifié de morceaux
6. Initialiser la réduction en passant un tableau vide

Curry basé sur chunkSize:

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

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

Vous pouvez ajouter la chunk()fonction à l' Arrayobjet global :

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

L'approche ES2015 suivante fonctionne sans avoir à définir de fonction et directement sur des tableaux anonymes (exemple avec la taille de bloc 2):

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

Si vous voulez définir une fonction pour cela, vous pouvez le faire comme suit (en améliorant le commentaire de K. sur la réponse de Blazemonger ):

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

Et ce serait ma contribution à ce sujet. Je suppose que .reduce()c'est la meilleure façon.

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

Mais l'implémentation ci-dessus n'est pas très efficace car elle .reduce()parcourt toutes les arrfonctions. Une approche plus efficace (très proche de la solution impérative la plus rapide) serait d'itérer sur le tableau réduit (à fragmenter) car nous pouvons calculer sa taille à l'avance par Math.ceil(arr/n);. Une fois que nous avons le tableau de résultats vide comme Array(Math.ceil(arr.length/n)).fill();le reste, il faut y mapper des tranches 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));

Utilisez un morceau de lodash

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

Encore une solution en utilisant 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)

Cette solution est très similaire à la solution de Steve Holgado . Cependant, parce que cette solution n'utilise pas l'étalement des tableaux et ne crée pas de nouveaux tableaux dans la fonction de réduction , c'est plus rapide (voir test jsPerf ) et subjectivement plus lisible (syntaxe plus simple) que l'autre solution.

À chaque nième itération (où n = size; à partir de la première itération), le tableau accumulateur ( acc) est ajouté avec un morceau du tableau (arr.slice(i, i + size) ) puis renvoyé. À d'autres itérations, le tableau d'accumulateurs est renvoyé tel quel.

Si sizeest égal à zéro, la méthode renvoie un tableau vide. Si sizeest négatif, la méthode renvoie des résultats cassés. Donc, si nécessaire dans votre cas, vous voudrez peut-être faire quelque chose à propos des sizevaleurs négatives ou non positives .

Si la vitesse est importante dans votre cas, une simple forboucle serait plus rapide que l'utilisation arr.reduce()(voir le test jsPerf ), et certains trouveront peut-être aussi ce style plus lisible:

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
}

Pour une solution fonctionnelle, en utilisant Ramda :

Où popularProductsest votre tableau d'entrée, 5est la taille du bloc

import splitEvery from 'ramda/src/splitEvery'

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

})

Approche unifilaire ES6 basée sur Array.prototype reduceet pushméthodes:

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 Générateur 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);

C'est la solution la plus efficace et la plus simple à laquelle je puisse penser:

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 propage #ohmy #ftw fonctionnel

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

Voici une solution récursive qui est l'optimisation des appels de queue.

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

EDIT: @ mblase75 a ajouté un code plus concis à la réponse précédente pendant que j'écrivais la mienne, donc je recommande d'aller avec sa solution.

Vous pouvez utiliser du code comme celui-ci:

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

Modifiez la valeur de arraySizepour modifier la longueur maximale des petits tableaux.

Voici une solution non mutante utilisant uniquement la récursivité et slice ().

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

Ensuite, utilisez-le simplement comme splitToChunks([1, 2, 3, 4, 5], 3)pour obtenir [[1, 2, 3], [4, 5]].

Voici un violon à essayer: https://jsfiddle.net/6wtrbx6k/2/