От автора: одна из самых нудных вещей, связанная с циклами в JavaScript – необходимо потратить довольно много времени на их настройку: обычный цикл for принимает переменную, итератор и условие для старта.
В новый JS цикл for…of встроена базовая структура итерации элементов, что позволяет сразу приступить к манипуляции данными. Обычный цикл for…of начинается с массива:
|
1 2 3 4 5 |
var jupiterMoons = ["Europa", "Ganymede", "Io", "Callisto", "Amalthea"]; for (var moon of jupiterMoons) { console.log(moon); } |
В результате в консоли мы получим содержание массива:
|
1 2 3 4 5 |
> 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 соответственно.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
