Разделение массива на части в 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 собственным методом. Однако такой подход может вызвать проблемы в больших проектах.

Анализ крайних случаев

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

Полезные материалы

1. Array.prototype.slice() – JavaScript | MDN — официальная документация по методу Array.slice().
2. javascript – Разбиение массива на блоки – Stack Overflow — обсуждение на Stack Overflow с рекомендациями сообщества.
3. Четыре способа разделить массив | от Ngoc Vuong | Medium — статья о различных подходах к разделению массивов на блоки.
4. Методы работы с массивами – JavaScript.info — обзор различных методов работы с массивами.
5. JavaScript Array Distinct(). Получение списка уникальных элементов… | от Changhui Xu | codeburst — обсуждение уникальных значений в массиве, которое может быть применено в паре с разделением массива на блоки.
6. Как использовать методы массивов в JavaScript: Методы итерации | DigitalOcean — учебное пособие по методам итерации массивов.