Цикл без изменяемых переменных в ES6: методы и альтернативы

Быстрый ответ

[...Array(X)].forEach((_, i) => {/* код цикла с i */});

Применяйте оператор расширения в связке с конструктором Array, чтобы создать массив. А метод forEach обеспечит быстрое выполнение цикла без изменений переменных. Замените "X" на необходимое число и "код цикла с i" — на код, что необходимо повторить X раз.

Упрощение кода с помощью возможностей ES6

Разберитесь, как можно выполнить цикл x раз в ES6, уменьшив использование изменяемых переменных.

Создание массива с помощью Array.from без лишних усилий

Для инициализации нового массива и его перебора не нужно обращаться к изменяемым переменным, достаточно воспользоваться Array.from:

Array.from({ length: x }, (_, i) => {/* код цикла с i */});

Array.from сформирует массив и равновременно выполнит функцию отображения, исключая необходимость дополнительно вызывать .map().

Подробнее об этом расскажет наш спикер на видео

Найдите гармонию с циклом for...of

Более вдумчивый подход заключается в использовании цикла for...of со связанным .keys():

for (const i of Array(x).keys()) {
  // Всё остаётся неизменным — именно так нужно
}

Такой неизменяемый итератор последовательно перебирает числовые значения до x, минуя мутации.

Рекурсивные функции и оптимизация хвостового вызова

Создайте рекурсивную функцию, которая сама себя вызывает до достижения базового случая:

function loop(x, callback, i = 0) {
  if (i < x) {
    callback(i);
    // Смотри, без ошибки Stack overflow!
    return loop(x, callback, ++i);
  }
}

Благодаря оптимизации хвостового вызова вы избежите ошибок переполнения стека в поддерживаемых средах.

Генераторы — Ваш новый лучший друг

Генераторные функции позволяют в ES6 создавать значения, не строго придерживаясь оператора ++:

function* loopGen(x) {
  let i = 0; // Обещаю остаться неизменным
  while (i < x) {
    yield i++;
    // Ладно, я промазал... Но это ведь так нужно!
  }
}

for (const i of loopGen(x)) {
  // Ещё раз танцуем с бубном, да?
}

Генераторы предоставляют протокол итерации для строгого контроля итераций определённого количества раз.

Визуализация

Представьте городской автобус (🚌), который выполняет строго x остановок:

[...Array(x)].forEach((_, i) => {
  console.log(`Остановка ${i+1}: 🚏`);
});

Каждая остановка символизирует одну итерацию цикла.

Маршрут автобуса: [🚏1, 🚏2, 🚏3, ..., 🚏x]

Автобус заканчивает свой путь без изменения количества остановок.

Откройте для себя множество возможностей ES6

Освоив базовые навыки, пришло время проникнуться возможностями ES6 для упрощения работы с циклами:

Принимайте мир функционального программирования

Откройте для себя мир функционального программирования с помощью методов вроде .reduce() или .filter(), где процессы агрегирования и фильтрации даются с лёгкостью:

// Добро пожаловать в мир без изменяемых переменных!
[...Array(x)].reduce((acc, _, i) => {
  // Уверенно двигаемся от остановки к остановке.
}, initialValue);

Скобки, не прячьтесь!

Более лаконичный код можно получить с помощью оператора запятой:

[...Array(x)].forEach((_, i) => (processItem(i), i));

В этом выражении processItem(i) выполняется и вернёт i в контексте одного аккуратного выражения.

Создайте персонализированный цикл для улучшения читабельности кода

Персонализированная итерационная функция делает повторяющийся код куда более приятным:

function customLoop(start, end, callback) {
  if (start < end) {
    callback(start);
    // Смотри, без изменения состояний! Чистый дзен.
    return customLoop(start + 1, end, callback);
  }
}

Сократите циклы до одной строки

ES6 предоставляет вам возможность остаться креативным, реализовывая мощные конструкции в одну строку:

Array.from({ length: x }, (_, i) => i).forEach(i => {/* код цикла с i */});

Этот код создаёт массив, отображает его для необходимого диапазона значений и выполняет итерацию, и всё это за мгновение.

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

1. for – JavaScript | MDN — Принципы работы с циклами for в JavaScript.
2. ECMAScript 2015 Language Specification – ECMA-262 6th Edition — Официальная спецификация для 'for-of' циклов в ES6.
3. javascript – How to generate range of numbers from 0 to n in ES2015 only? – Stack Overflow — Полезные советы и примеры выполнения циклов в ES6 от сообщества разработчиков.
4. Array.prototype.map() – JavaScript | MDN — Использование метода Array.map() для создания повторяющихся конструкций, при этом сохраняя неизменяемость данных.
5. Tail call optimization in ECMAScript 6 — Всё об искусстве рекурсии с использованием стандартных параметров для создания итераций без мутаций в ES6.
6. Spread syntax (...) – JavaScript | MDN — Применение оператора расширения для создания неизменяемых шаблонов кода в ES6.