Это сообщение изначально было опубликовано на 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?.