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