Это сообщение изначально было опубликовано на webinuse.com
О циклах в JavaScript мы уже писали в статье Циклы массивов JavaScript. Теперь введем новый — цикл for of.
for of loop
похож на цикл forEach
, но с циклом for of мы можем использовать break
и продолжить. Это то, что делает его еще более привлекательным.
Синтаксис for of loop
довольно прост и понятен.
Первый параметр for of loop
— это переменная цикла, а второй параметр — это массив, который мы итерируем. Если мы хотим выйти из цикла, мы должны использовать ключевое слово break
.
const arr = [1, 2, 3];
for (const el of arr) { if (el === 3) break; console.log(el) }
//Result //1 //2
Кроме того, мы можем пропустить итерацию, используя ключевое слово continue
.
const arr = [1, 2, 3];
for (const el of arr) { if (el === 2) continue; console.log(el) }
//Result //1 //3
Часто при работе с циклами нам нужно знать текущий индекс. Мы можем добиться этого с помощью цикла for of, используя entries()
.
const arr = ['js', 'py', 'php'];
for (const el of arr.entries()) { console.log(el) }
//Result: //[0, 'js'] //[1, 'py'] //[2, 'php']
В приведенном выше примере console.log
вернул индекс и значение текущего индекса в виде массива. Но мы можем упростить это еще больше, разрушив структуру массива. Это означает, что мы можем извлекать значения из массива вместе с индексом как отдельные переменные.
const arr = ['js', 'py', 'php'];
for (const [index, el] of arr.entries()) { console.log(index) console.log(el) }
//Result: //0 //js //1 //py //2 //php
Но мы должны быть осторожны, если используем деструктурирование. ВСЕГДА index
идет первым, а element
вторым. Кроме того, в этом случае мы можем использовать const
, потому что каждая новая итерация for of loop
создает новую область.
Если у вас есть какие-либо вопросы или что-то еще, вы можете найти меня в моем Твиттере, или вы можете прочитать некоторые из моих других статей, таких как Что такое деструктуризация объектов в JavaScript?.