Как разделить массив на куски в JavaScript

Вступление

Массивы – одна из самых часто используемых структур в JavaScript, поэтому важно знать её встроенные методы.

В этом уроке мы рассмотрим, как в JavaScript разделить массив на куски.

В частности, мы рассмотрим два подхода:

1. Используя метод slice() и цикл for
2. Используя метод splice() и цикл while

Делим массив с помощью метода slice()

Самый простой способ извлечь фрагмент массива или, скорее, разрезать его на части – это метод slice():

slice(start, end) – выводит часть массива между индексами start и end.

Примечание: индексы могут быть отрицательными целыми числами. Это значит, что они перечисляются с конца массива. -1 – последний элемент массива, -2 – предпоследний и так далее…

Массив выводит копию, это значит, что любые ссылки в исходном массиве будут скопированы как ест, а значит нам не нужно выделять память для новых объектов.

Итак, чтобы разделить список или массив на ровные куски, используем метод slice():

function sliceIntoChunks(arr, chunkSize) {
    const res = [];
    for (let i = 0; i < arr.length; i += chunkSize) {
        const chunk = arr.slice(i, i + chunkSize);
        res.push(chunk);
    }
    return res;
}

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(sliceIntoChunks(arr, 3));

Результат будет следующим:

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

В приведенном выше коде мы разбиваем arr на более мелкие фрагменты размером 3, повторяя массив и разрезая его на части. На последней итерации останется только один элемент (10).

Делим массив с помощью метода splice()

Несмотря на то, что метод splice() может показаться похожим на метод slice(), они всё же различаются. Сейчас покажем:

myArray.splice(startIdx, deleteCount, newElem1, newElem2...)

let arrTest = [2, 3, 1, 4]
let chunk = arrTest.splice(0,2)
console.log(chunk) // [2, 3]
console.log(arrTest) // [1, 4]

function spliceIntoChunks(arr, chunkSize) {
    const res = [];
    while (arr.length > 0) {
        const chunk = arr.splice(0, chunkSize);
        res.push(chunk);
    }
    return res;
}

const arr = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(spliceIntoChunks(arr, 2));

Результат:

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

Мы используем цикл while для обхода массива. На каждой итерации мы выполняем операцию сращивания и помещаем каждый фрагмент в результирующий массив до тех пор, пока в исходном массиве не останется больше элементов (arr.length > 0).

Заметьте, что splice() изменяет исходный массив, а slice() создаёт копию исходного массива, поэтому исходный массив остаётся без изменений.

Заключение

В этой статье мы рассмотрели несколько простых способов, как в JavaScript разбить список на фрагменты. Также мы узнали, как работать с методами slice() и splice().