В мире TypeScript цикл for…of — это мощная конструкция, позволяющая перебирать различные коллекции и выполнять действия над их элементами. В этой статье блога мы углубимся в детали цикла for…of и рассмотрим различные методы и приемы, позволяющие полностью раскрыть его потенциал. Итак, хватайте свой любимый напиток и начнем!

Понимание цикла for…of:
Цикл for…of специально разработан для перебора повторяемых объектов, таких как массивы, строки, карты, наборы и т. д. Он обеспечивает более простой и понятный синтаксис по сравнению с традиционными циклами for, что делает ваш код более читабельным и кратким.

Синтаксис:
Прежде чем мы перейдем к методам, давайте взглянем на базовый синтаксис цикла for…of:

for (const element of iterable) {
  // Code to execute for each element
}

Метод 1. Разрыв цикла с помощью команды «break».
Иногда вам может потребоваться преждевременно выйти из цикла по определенному условию. В таких сценариях на помощь приходит оператор «break». Вот пример:

const numbers = [1, 2, 3, 4, 5];
for (const num of numbers) {
  if (num === 3) {
    break; // Exit the loop when num is 3
  }
  console.log(num);
}

Выход:

1
2

В приведенном выше примере цикл проходит по массиву чисел, и когда он встречает элемент «3», выполняется оператор «break», останавливающий выполнение цикла.

Метод 2. Обработка вложенных циклов с помощью помеченных операторов.
В некоторых случаях у вас могут быть вложенные циклы, в которых вы хотите выйти из внешнего цикла из внутреннего цикла. Этого можно добиться с помощью помеченных операторов. Давайте рассмотрим пример:

const letters = ['A', 'B', 'C'];
const numbers = [1, 2, 3, 4, 5];
outerLoop: for (const letter of letters) {
  for (const num of numbers) {
    if (num === 3) {
      break outerLoop; // Exit both loops when num is 3
    }
    console.log(letter + num);
  }
}

Выход:

A1
A2
A3

В приведенном выше примере у нас есть внешний цикл, перебирающий массив «буквы», и внутренний цикл, перебирающий массив «цифры». Когда внутренний цикл встречает элемент «3», выполняется оператор «break» с меткой «outerLoop», что приводит к завершению обоих циклов.