Скажімо, у мене масив Javascript виглядає так:

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

Який підхід був би доцільним для того, щоб зрізати (розділити) масив на багато менших масивів з, скажімо, максимум 10 елементів?

Метод array.slice може витягти фрагмент з початку, середини чи кінця масиву для будь-яких цілей, які вам потрібні, не змінюючи початковий масив.

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

Змінено з відповіді 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]]

незначний додаток :

Я мушу зазначити, що вищесказане - це не дуже елегантний (на мій погляд) спосіб використання Array.map. В основному це робить наступне, де ~ - конкатенація:

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

Він має такий самий асимптотичний час роботи, що і метод нижче, але, можливо, гірший постійний коефіцієнт через побудову порожніх списків. Можна було б переписати це так (здебільшого так само, як метод Блаземонгера, саме тому я спочатку не подав цю відповідь):

Більш ефективний метод:

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

У наш час найкращим способом є вищезгаданий або один із наступних:

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

  }
});

Демонстрація:

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

Або якщо ви не хочете функцію Array.range, це насправді лише однолінійний (за винятком пуху):

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

або

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

Ось версія ES6, що використовує зменшення

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

І ви готові ланцюжок подальших карт / зменшення перетворень. Ваш вхідний масив залишився неушкодженим

Якщо ви віддаєте перевагу більш короткій, але менш читаній версії, ви можете пересипати трохи concatсуміші для того ж кінцевого результату:

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

Постарайтеся уникати спілкування з власними прототипами, включаючи Array.prototype, якщо ви не знаєте, хто буде споживати ваш код (треті сторони, співробітники, ви самі пізніше та інше).

Існують способи безпечного поширення прототипів (але не у всіх браузерах), і є способи безпечного споживання об'єктів, створених із розширених прототипів, але краще правило - дотримуватися Принципу найменшого сюрпризу та уникати цих практик взагалі.

Якщо у вас є деякий час, перегляньте виступ Ендрю Дюпона про JSConf 2011 "Все дозволено: розширення вбудованих модулів" , щоб добре обговорити цю тему.

Але повернемося до питання, хоча рішення, що подані вище, працюватимуть, вони надмірно складні і вимагають зайвих обчислювальних витрат. Ось моє рішення:

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;

Я перевірив різні відповіді на jsperf.com. Результат доступний там: https://web.archive.org/web/20150909134228/https://jsperf.com/chunk-mtds

І найшвидша функція (яка працює з IE8) - це ця:

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

Я вважаю за краще використовувати метод сплайсингу :

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

Одне вкладиш в 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))

Старе питання: Нова відповідь! Я фактично працював з відповіддю на це запитання і мав товариша вдосконалити його! Отже ось це:

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

Сьогодні ви можете використовувати функцію lodash 'chunk, щоб розділити масив на менші масиви https://lodash.com/docs#chunk Більше не потрібно возитися з циклами!

Відповідей було багато, але це те, що я використовую:

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

Спочатку перевірте на залишок, діливши індекс на розмір шматка.

Якщо є залишок, просто поверніть масив акумулятора.

Якщо немає залишку, то індекс ділиться на розмір шматка, тому візьміть фрагмент з початкового масиву (починаючи з поточного індексу) і додайте його до масиву акумулятора.

Отже, повернутий масив акумуляторів для кожної ітерації зменшення виглядає приблизно так:

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

Використання генераторів

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

Гаразд, почнемо з досить тісного:

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

Що використовується так:

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

Тоді ми маємо цю жорстку функцію редуктора:

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

Що використовується так:

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

Оскільки кошеня помирає, коли ми прив'язуємося thisдо числа, ми можемо замість цього зробити ручне вигулювання:

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

Що використовується так:

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

Тоді все ще досить тісна функція, яка робить все це одним ходом:

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

Я мав на меті створити простий немутуючий розчин у чистому ES6. Особливості javascript змушують заповнити порожній масив перед картографуванням :-(

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

Ця версія з рекурсією здається більш простою та переконливою:

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

Смішно слабкі функції масиву ES6 створюють непогані головоломки :-)

Я думаю, що це приємне рекурсивне рішення з синтаксисом 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));

Створено пакет npm для цього 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;

Під час використання TypedArray

var result = [];

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

Якщо ви використовуєте версію EcmaScript> = 5.1, ви можете реалізувати функціональну версію, chunk()використовуючи array.reduce (), що має складність 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' ] ]

Пояснення кожного // nbrвище:

1. Створіть новий фрагмент, якщо попереднє значення, тобто раніше повернутий масив фрагментів, порожній або якщо в останньому попередньому фрагменті є chunkSizeелементи
2. Додайте новий фрагмент до масиву існуючих фрагментів
3. В іншому випадку поточний фрагмент - останній фрагмент у масиві фрагментів
4. Додайте поточне значення до шматка
5. Повернути модифікований масив фрагментів
6. Ініціалізуйте скорочення, передаючи порожній масив

Крірінг на основі chunkSize:

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

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

Ви можете додати chunk()функцію до глобального Arrayоб'єкта:

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

Наступний підхід ES2015 працює без необхідності визначення функції та безпосередньо на анонімних масивах (приклад з розміром 2):

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

Якщо ви хочете визначити функцію для цього, ви можете зробити це наступним чином (вдосконалюючи коментар K ._ щодо відповіді Блаземонгера ):

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

І це був би мій внесок у цю тему. Я думаю, .reduce()це найкращий спосіб.

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

Але вищевказана реалізація не дуже ефективна, оскільки .reduce()працює через усі arrфункції. Більш ефективним був би підхід (дуже близький до найшвидшого імперативного рішення) - повторення скороченого масиву, який ми можемо обчислити заздалегідь Math.ceil(arr/n);. Як тільки у нас з'явиться порожній масив результатів, як Array(Math.ceil(arr.length/n)).fill();і решта, - це зіставити фрагменти 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));

Використовуйте шматок лодаша

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

Для функціонального рішення використовуйте Ramda :

Де popularProducts ваш вхідний масив, 5розмір шматка

import splitEvery from 'ramda/src/splitEvery'

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

})

Однолінійний підхід ES6 на основі Array.prototype reduceта pushметодах:

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 генератор версія

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

Це найефективніше і прямолінійне рішення, про яке я міг придумати:

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 поширює функціональний #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]) );

Ось рекурсивне рішення оптимізації виклику хвоста.

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

Ще одне рішення з використанням 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)

Це рішення дуже схоже на рішення Стіва Холгадо . Однак, оскільки це рішення не використовує поширення масиву і не створює нових масивів у функції редуктора, це швидше (див. Тест jsPerf ) та суб'єктивно більш читабельне (простіший синтаксис), ніж інше рішення.

При кожній n-й ітерації (де n = size; починаючи з першої ітерації) до масиву акумулятора ( acc) додається шматок масиву ( arr.slice(i, i + size)), а потім повертається. При інших ітераціях масив акумуляторів повертається як є.

Якщо sizeдорівнює нулю, метод повертає порожній масив. Якщо sizeнегативний, метод повертає порушені результати. Тож, якщо це потрібно у вашому випадку, ви можете зробити щось щодо негативних чи непозитивних sizeзначень.

Якщо швидкість важлива у вашому випадку, простий forцикл буде швидшим, ніж використання arr.reduce()(див. Тест jsPerf ), і деякі можуть також вважати цей стиль читабельнішим:

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
}

EDIT: @ mblase75 додав більш короткий код до попередньої відповіді, коли я писав моє, тому рекомендую перейти до його рішення.

Ви можете використовувати такий код:

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

Змініть значення, arraySizeщоб змінити максимальну довжину менших масивів.

Ось немутуючий розчин, що використовує лише рекурсію та фрагмент ().

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

Тоді просто використовуйте його, як splitToChunks([1, 2, 3, 4, 5], 3)отримати [[1, 2, 3], [4, 5]].

Ось загадка, яку ви можете спробувати: https://jsfiddle.net/6wtrbx6k/2/