Разделение массива на части в JavaScript: метод chunk
Быстрый ответ
Представленная ниже функция создаёт новый массив, последовательно генерируя подмассивы заданной длины из исходного массива при помощи метода slice
:
const chunkArray = (array, size) =>
Array.from({ length: Math.ceil(array.length / size) }, (_, index) =>
array.slice(index * size, index * size + size)
);
// Пример
console.log(chunkArray([1, 2, 3, 4, 5], 2)); // Вывод: [[1, 2], [3, 4], [5]]
Данный элегантный код использует Array.from
и математические вычисления для определения необходимого количества блоков.
Продвинутые техники разделения массива на блоки
Недостатки прямолинейного подхода
Быстрый ответ представляет собой простое и прямое решение. Однако оно может быть неоптимальным для больших массивов или при малом размере блоков.
Преимущества ES6: комбинация reduce
и concat
Связка метода reduce
из ES6 с concat
предлагает элегантный путь в стиле функционального программирования:
const chunkArrayWithReduce = (array, size) =>
array.reduce((chunks, item, index) =>
index % size === 0 ? [...chunks, array.slice(index, index + size)] : chunks, []);
// console.log(chunkArrayWithReduce(["яйца", "бекон", "кофе", "тост", "масло"], 2));
// Завтрак по-американски, верно?
Генераторы для ленивых вычислений
Генераторы идеально подходят для больших массивов, так как они позволяют избежать создания промежуточных массивов:
function* chunkArrayGenerator(array, size) {
for (let i = 0; i < array.length; i += size) {
yield array.slice(i, i + size);
}
// Идеально подходит для кофе-паузы с пончиками.
}
TypeScript для безопасности через строгую типизацию
Типизация в TypeScript обеспечивает дополнительную безопасность:
function* chunkArrayGenerator<T>(array: T[], size: number): Generator<T[]> {
for (let i = 0; i < array.length; i += size) {
yield array.slice(i, i + size);
}
}
Будьте внимательны и разумны
Избегайте бесконечных циклов
Проверьте, что размер блока больше нуля, чтобы не столкнуться с бесконечной цикличностью:
if (size <= 0) {
throw new Error('Размер блока должен быть больше нуля, иначе вас ждёт "день сурка"');
}
Поведение должно быть предсказуемым
Функции должны работать предсказуемо в соответствии с принципом наименьшего удивления. Пусть код будет понятен и прозрачен.
Локализация функций
Ограничивайте область видимости функций, чтобы избежать конфликтов в глобальном пространстве имен.
Разделение массива: вопросы эффективности
Все методы разделения работают примерно одинаково по времени выполнения, но имеют разную эффективность из-за различного использования ресурсов и промежуточных структур.
Визуализация
Возможно, удобно представить разбиение массива на блоки как деление батончика шоколада на равные части:
До: 🍫🍫🍫🍫🍫🍫🍫🍫 Разделим его на блоки по три:
После: [🍫🍫🍫] [🍫🍫🍫] [🍫🍫]
Так же как и шоколадку, большой массив мы разбиваем на маленькие сегменты.
Дальнейшие направления для изучения
Использование map
и fill
Применение Array.map
и Array.fill
открывает новые возможности для работы с массивами:
const chunkArrayWithFill = (array, size) =>
Array.from({ length: Math.ceil(array.length / size) })
.fill()
.map((_, index) => array.slice(index * size, (index + 1) * size));
Итерационные методы для обхода массива
Простые итерационные методы, такие как forEach
и for...of
, также способны создавать блоки, хотя и менее изящно, чем Array.from
и reduce
.
Добавление своих методов
Может возникнуть искушение дополнить прототип Array собственным методом. Однако такой подход может вызвать проблемы в больших проектах.
Анализ крайних случаев
Не забудьте проверить такие случаи, когда массив не делится на равные части, чтобы избежать неприятных сюрпризов.
Полезные материалы
- Array.prototype.slice() – JavaScript | MDN — официальная документация по методу
Array.slice()
. - javascript – Разбиение массива на блоки – Stack Overflow — обсуждение на Stack Overflow с рекомендациями сообщества.
- Четыре способа разделить массив | от Ngoc Vuong | Medium — статья о различных подходах к разделению массивов на блоки.
- Методы работы с массивами – JavaScript.info — обзор различных методов работы с массивами.
- JavaScript Array Distinct(). Получение списка уникальных элементов… | от Changhui Xu | codeburst — обсуждение уникальных значений в массиве, которое может быть применено в паре с разделением массива на блоки.
- Как использовать методы массивов в JavaScript: Методы итерации | DigitalOcean — учебное пособие по методам итерации массивов.