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

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

От автора: одна из самых нудных вещей, связанная с циклами в 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 соответственно.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Курс по JavaScript: основы

Изучите JavaScript с нуля до результата!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree