Вхід без ключа: робота з JavaScript циклом for of…

26

Від автора: одна із самих нудних речей, пов’язана з циклами в JavaScript – необхідно витратити досить багато часу на їх налаштування: звичайний цикл for приймає змінну, ітератор і умова для старту.

У новий JS цикл for…of вбудована базова структура ітерації елементів, що дозволяє відразу приступити до маніпуляції даними. Звичайний цикл for…of починається з масиву:

var jupiterMoons = [«Europa», «Ganymede», «Io», «Callisto», «Amalthea»];
for (var moon of jupiterMoons) {
console.log(moon);
}

В результаті в консолі ми отримаємо зміст масиву:

> Europa
> Ganymede
> Io
> Callisto
> Amalthea

Змінна moon обрана довільно в контексті циклу. Змінну можна назвати як завгодно, дотримуючись правила іменування.

Ви зустрінете багато прикладів циклу for…of із ключовим словом let для створення змінної. Даний підхід не можна назвати неправильним, але я б порекомендував використовувати ключове слово var, так як деякі браузери підтримують сам цикл for…of, але не підтримують let (але підтримують var). Також можна використовувати const, але я уникаю його по тим же причинам. Крім того, константи не вписуються в контекст нашого циклу (як на це вказав Крістіан в коментарях нижче). Пара зауважень:

Потрібно акуратно дивитися, до якихось елементів застосовувати цикл for…of. Деякі браузери досі не підтримують ітерацію по дереву вузлів DOM (NodeList.prototype[Symbol.iterator]). Дані, зібрані через document.querySelectorAll можна прогнати в циклі for…of в останніх версіях Chrome і Firefox, а в поточній версії Safari цього зробити не можна.

Цикл for…of можна використовувати на рядках, асоціативних масивах, типізованих масивах, колекціях і генераторах.

Цикл for…of зберігає порядок елементів у масиві при зчитуванні чи маніпуляціях (на відміну від for…in, який може і перемішати елементи).

На відміну від циклу forEach, for…of можна використовувати ключові слова break, continue і return.

Цикл for…of працює з колекціями як з об’єктами. Все інше в об’єктах потрібно робити через for…in або object.keys.

Сумісність

Цикл for…of добре підтримується у всіх браузерах, якщо ви працюєте в останніх версіях: Chrome 51, Edge (але не IE) і Opera 25. У Firefox і Safari підтримка йде з більш старих версій 13 і 7.1 відповідно.