Какое значение возвращают инструкции прерывания цикла итерации в js

Назначение и виды циклов

Циклы – это простой способ для многократного выполнения одних и тех же действий (кода).

При этом однократное выполнения кода в цикле называется итерацией.

В JavaScript существуют различные виды циклов, но все они, по сути, делают одно и тоже. Просто с помощью одних циклов более просто решаются одни задачи, с помощью других – иные:

• for;
• while;
• do…while;
• for…in;
• for…of (появился в версии ES6).

Цикл for

Данный цикл в основном используется когда известно точное количество повторений. Этот цикл ещё называют циклом со счётчиком.

Синтаксис цикла «for»:

for (инициализация; условие; финальное выражение) {
  /* тело цикла */
}

Основные части конструкции цикла «for»:

• инициализация — это выражение, которое выполняется один раз перед выполнением цикла; обычно используется для инициализации счётчика;
• условие — это выражение, истинность которого проверяется перед каждой итерацией; если выражение вычисляется как истина, то выполняется итерация; в противном случае цикл «for» завершает работу;
• финальное выражение — это выражение, которое выполняется в конце каждой итерации; обычно используется для изменения счетчика;
• тело цикла — инструкции, выполнение которых нужно повторять.

Рассмотрим пример цикла, который выведет в консоль числа от 1 до 8:

// цикл «for» от 1 до 8, с шагом 1
for (var i = 1; i <= 8; i++) {
  console.log(i);
}

В этом примере:

• инициализация: var i = 1 (объявление переменной i и присвоение ей значения 1);
• условие выполнения цикла: i <= 8 (пока значение переменной i меньше или равно 8);
• финальное выражение, которое нужно выполнять в конце каждой итерации: i++ (увеличение значение переменной i на 1);
• инструкция, которую нужно выполнять: console.log(i) (выведение значения счётчика в консоль).

При этом если тело цикла состоит из одной инструкции, то её можно не заключать в фигурные скобки.

Таким образом, пример, приведённый выше, можно записать ещё так:

// цикл «for» от 1 до 8, с шагом 1
for (var i = 1; i <= 8; i++) console.log(i);

Необязательные части цикла «for».

В «for» все части цикла являются не обязательными.

Например, можно пропустить выражение инициализации:

var i = 1;
// цикл «for»
for (; i <= 8; i++) {
  console.log(i);
}

В этом случае инициализацию переменной можно вынести за пределы цикла.

Условие в «for» тоже является не обязательным. Без условия цикл будет выполняться бесконечное количество раз. В этом случае чтобы его прервать (выйти из цикла) необходимо использовать инструкцию break.

// цикл «for»
for (var i = 1; ; i++) {
  if (i >= 8) { // условие прерывания цикла
    break;
  }
  console.log(i);
}

Финальное выражение в «for» также является не обязательным. Счётчик цикла в этом случае можно, например, изменять в теле.

// цикл «for»
for (var i = 1; i <= 8; ) {
  console.log(i);
  i++; // увеличение счетчика на 1
}

В «for» можно вообще опустить 3 выражения (бесконечный цикл):

var i = 1;
// цикл «for»
for (;;) {
  if (i >= 8) {
    break;
  }
  console.log(i);
  i++;
}

Кроме этого, в качестве тела цикла «for» можно использовать пустое выражение (;). Это используется, когда вам не нужно выполнять ни одной инструкции.

Например:

var
  arrA = [8, 12, 24],
  arrB = [];
for (i = 0; i < arrA.length; arrB[i] = arrA[i++] / 2) ;
console.log(arrB); // [4, 6, 12]

Пустое выражение в этом случае рекомендуется дополнительно снабжать комментарием:

// сумма чисел в массиве
var arr = [2, 7, 3];
for (var i = 0, length = arr.length, sum = 0; i < length; sum += arr[i++]) /* пустое выражение */ ;
// выведем сумму чисел в консоль:
console.log(sum); // 12

Пример использования цикла «for» для перебора элементов массива:

var arr = ["a", "b", "c"]; // массив
for (var i = 0, length = arr.length; i < length; i++) {
  console.log(arr[i]);
}

Пример, в котором выведем таблицу умножения в консоль. Для реализации этого примера будем использовать вложенные циклы.

var output = '';
for (var i = 1; i <= 9; i++) {
  for (var j = 1; j <= 9; j++) {
    output += ' ' + i * j;
    if (i * j < 10) {
      output += ' ';
    }
  }
  console.log(output);
  output = '';
}

Цикл называется вложенным, если он находится в теле другого цикла.

Цикл while

Данный цикл предназначен для многократного выполнения одних и тех же инструкций до тех пор, пока истинно некоторое условие. Цикл «while» в основном используется, когда количество повторений заранее не известно.

while (условие) {
  /* тело цикла */
}

Истинность условия проверяется перед каждым выполнением. Если перед первой итерацией условие ложно, то цикл не выполнится ни разу.

Пример, в котором выведем в консоль чётные числа в диапазоне от 1 до 8:

// объявим переменную а и присвоим ей значение 0
let a = 0;
//цикл while с условием a <= 8
while (a <= 8) {
  // увеличим значение переменной a на 1
  a++;
  // если число нечётное (остаток от деления на 2 не равен 0), то...
  if (a % 2 !== 0) {
    // пропустим дальнейшее выполнение текущей итерации и перейдём к следующей
    continue;
  }
  // выведем значение переменной a в консоль
  console.log(a);
}

Цикл do…while

Цикл «do…while», также как и цикл «while», выполняет одни и те же инструкции до тех пор, пока указанное условие истинно. Но в отличие от «while» в «do…while» условие проверяется после выполнения инструкций. Поэтому цикл «do…while» в любом случае выполнится не меньше одного раза, даже если условие изначально ложно.

do {
  /* тело цикла */
} while (условие)

Пример, в котором выведем в консоль сумму чисел, которые будем запрашивать у пользователя с помощью функции prompt:

// num – переменная для хранения числа, введённого пользователем
// sum – переменная для хранения суммы чисел
let num, sum = 0;
// цикл «do...while»
do {
  // запросим у пользователя данные и приведём их к числу
  num = +prompt ('Введите число', '');
  // если то, что ввёл пользователь после приведения является числом, то...
  if (num) {
    // прибавим к сумме число, введённое пользователем
    sum += num;
  }
// если num приводится к истине, то выполняем ещё итерацию
} while (num);

console.log(sum);

Цикл for…in

Цикл «for…in» предназначен для перебора перечисляемых имён свойств объекта. В JavaScript свойство является перечисляемым, если его внутренний флаг [[Enumerable]] равен true.

Свойства объекта, которые не относятся к перечисляемым, в цикле не участвуют.

Например, объект (массив) созданный с использованием функции-конструктора Array или его литеральной записи имеет не перечисляемые свойства от Array.prototype и Object.prototype, такие как indexOf(), some(), toString() и др. Они не будут участвовать в цикле.

/* цикл для перебора всех перечисляемых свойств объекта
    - key – переменная, в которую будет помещаться имя свойства объекта
    - object – объект, свойства которого нужно перебрать */
for (key in object) {
  /* тело цикла */
}

Переберём свойства объекта, созданного с помощью литеральной записи:

let car = {
  manufacturer: 'Ford',
  model: 'Fiesta',
  color: 'black'
};
for (let propName in car) {
  // propName – имя свойства
  // car[propName] – значение свойства
  console.log(propName + ' = ' + car[propName]);
}
// в консоль будет выведено: manufacturer = Ford, model = Fiesta, color = black

Кроме этого, следует отметить, что цикл for...in проходит не только по перечисляемых свойствам этого объекта, но и по наследуемым.

let item = {
  a: 1,
  b: 2
}
let newItem = Object.create(item);
newItem.c = 3;
newItem.d = 4;
for (let propName in newItem) {
  console.log(propName);
}
// в консоли будет выведено: c, d, a, b

Если вам наследуемые свойства не нужно учитывать, то их можно пропустить:

for (let propName in newItem) {
  // переходим к следующей итерации, если текущее свойство не принадлежит этому объекту
  if(!newItem.hasOwnProperty(propName)) {
    continue;
  }
  console.log(propName);
}
// в консоли будет выведено: c, d

Использование цикла for… in для перебора массива. В массиве свойствами являются числовые индексы.

// массив
var arr = ["Rock", "Jazz", "Classical", "Hip Hop"];
// перебор массива с помощью цикла for in
for (let index in arr) {
  // index - индекс элемента массива
  // arr[index] – значение элемента
  console.log(arr[index]);
}
// в результате в консоль будет выведено: "Rock", "Jazz", "Classical", "Hip Hop"

Цикл for…in проходит по свойствам в произвольном порядке. Поэтому если при переборе массива для вас важен порядок символов, то данный цикл лучше не использовать.

При использовании цикла for…in стоит обратить внимание на то, что если вы к массиву добавили свои пользовательские свойства, то он по ним тоже пройдётся:

var arr = [5, 7, -3];
arr.sum = 2;
for (var key in arr) {
  console.log(arr[key]);
}
// в консоль будет выведено 5, 7, -3, 2

Если вам такой сценарий не нужен, то тогда для перебора массивов лучше использовать обычный цикл for.

Использование цикла for…in для перебора символов в строке:

var str = 'Метод';
for (var key in str) {
  console.log(str[key]);
}
// М, е, т, о, д

Инструкции break и continue

Внутри тела цикла можно использовать специальные инструкции: break и continue.

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

Пример, в котором завершим цикл по перебору элементов массива, если его текущий элемент не будет являться числом:

// массив
var arr = [5, 3, "a", 4, "b", 16];
// цикл «for» для перебора массива arr
for (var i = 0, length = arr.length; i < length; i++) {
  // если текущий элемент массива не является числом, то...
  if (typeof arr[i] !== 'number') {
    // прерываем выполнение цикла
    break;
  }
  // выводим текущий элемент массива в консоль
  console.log(arr[i]);
}
// в результате в консоль будет выведено: 5, 3

Инструкция «continue» предназначена для прекращения дальнейшего выполнения кода и перехода к следующей итерации цикла.

Пример, в котором найдём в слове «программирование» символы «а» и «о», и выведем их позиции в консоль:

// строка
var str = 'программирование';
// цикл "for" для перебора символов строки
for (var i = 0, length = str.length; i < length; i++) {
  // если текущий символ не равен а и о, то...
  if (str[i] !== 'а' && str[i] !== 'о') {
    // прекращаем выполнение текущей итерации и переходим к следующей
    continue;
  }
  // выведем в консоль сам символ и его индекс
  console.log(i + ' => ' + str[i]);
}
// данный цикл выведет в консоль: 2 => "о", 5 => "а", 10 => "о", 12 => "а"

Метки для break и continue

Метка представляет собой идентификатором с двоеточием, который необходимо указать перед циклом.

someLabel: while (условие) {
  // текло цикла
}

Далее после оператора break или continue необходимо указать эту метку:

someLabel: while (условие) {
  if (условие) {
    break someLabel;
  }
}

Вызов break someLabel приведёт к переходу в конец цикла, перед которым данная метка указана.

Если метка используется с ключевым словом continue, то в этом случае выполнение этого действия приведёт к немедленному переходу к следующей итерации цикла, перед которым данная метка указана.

В коде с одиночным циклом использование метки не даст никакого результата. Её есть смысл использовать только когда вам нужно выйти сразу из нескольких циклов.

Пример, в котором выйдем сразу из 2 циклов, когда произведение значений переменных-счётчиков даст число большее 10.

// обозначим внешний цикл, используя метку outer
outer: for (var i = 2; i < 5; i++) {
  // вложенный цикл
  for (var j = 2; j < 5; j++) {
    // если условие выполняется, то прерываем работу и переходим к концу цикла с меткой outer
    if (i * j > 10) break outer;
    // выведем в консоль
    console.log(i + ' * ' + j + ' = ' + i * j);
  }
}
// в консоль будет выведено: 2 * 2 = 4, 2 * 3 = 6, 2 * 4 = 8, 3 * 2 = 6, 3 * 3 = 9

Кроме этого, операторы break и continue нельзя использовать в выражениях тернарных операторов.

Цикл for…of (новинка в ES6)

Цикл for...of появился в стандарте ES6. Предназначен он для перебора итерируемых объектов, т.е. объектов, в которых реализован метод Symbol.iterator. Этот метод ещё называют итератором. Именно его и использует цикл for...of для перебора объектов.

Метод Symbol.iterator имеется у String, Array, Map, Set, arguments, NodeList и других объектов.

Пример использование цикла for...of для посимвольного перебора строки:

// переменная, содержащая строку
let str = 'Новый';
// посимвольный перебор строки
for (let char of str) {
  console.log(char);
}
// в консоль будет выведено: "Н", "о", "в", "ы", "й"

Пример использование цикла for...of для перебора коллекции DOM-элементов:

let elements = document.querySelectorAll('p');
for (let element of elements) {
  console.log(element);
}

Пример использование цикла for...of для перебора массива:

// массив
let superHeroes = ['Iron Man', 'Thor', 'Hulk'];
// перебор массива
for (let value of superHeroes) {
  console.log(value);
}
// в консоль будет выведено: "Iron Man", "Thor", "Hulk"

Чем цикл for…of отличается от for…in

Первое отличие цикла for...of от for...in заключается в том, что он может применяться только для итерируемым объектов, т.е. объектов, в которых реализован итератор (Symbol.iterator). Цикл for...in итератор не использует. Он предназначен для перебора любых объектов.

Второе отличие заключается в том, что цикл for...of перебирает объект так, как это определено в итераторе. Например, в Array итератор реализован так, что цикл for...of пройдёт только по значениям в массиве и не будет включать в перебор другие (не индексные) свойства. Цикл for...in организован по-другому, он перебирает все перечисляемые свойства (имена ключей) объекта, в том числе и наследуемые.

Рассмотрим эти отличия. Для этого возьмём предыдущий пример и добавим к нему пользовательское свойство, например, hero и установим ему значение 'Wasp'.

let superHeroes = ['Iron Man', 'Thor', 'Hulk'];
superHeroes.hero = 'Wasp';

При использовании for...of он переберёт все значения этого массива:

// цикл for...of
for (let value of superHeroes) {
  console.log(value);
}
// в консоль будет выведено: "Iron Man", "Thor", "Hulk"

При использовании for...in он переберёт все перечисляемые имена ключей этого объекта:

// цикл for...in
for (let key in superHeroes) {
  console.log(key);
}
// в консоль будет выведено: 0, 1, 2, "hero"

Чтобы получить значение ключа по его имени можно воспользоваться квадратными скобками:

// цикл for...in
for (let key in superHeroes) {
  console.log(superHeroes[key]);
}
// в консоль будет выведено: "Iron Man", "Thor", "Hulk", "Wasp"

Самостоятельное создание итератора для объекта

Рассмотрим ещё один пример. В этом примере мы самостоятельно определим как должен итерироваться объект. Для этого создадим объект и определим ему итератор.

Создание итератора начинается с добавления к объекту специального метода. Этот метод необходимо спроектировать так, чтобы он возвращал значения последовательно (одно за другим). Название методу согласно стандарту необходимо определить с помощью символа Symbol.iterator. Итератор должен возвращать всего один метод next(). Этот метод в свою очередь тоже должен возвращать объект, состоящий из 2 свойств: value и done. Ключ done — булевый. Он определяет есть ли ещё значения в последовательности (false — да, true — нет). Ключ value должен содержать следующее значение последовательности.

let car = {
  color: 'black',
  brand: 'Ford',
  // создадим итератор, используя символ
  [Symbol.iterator]() {
    // получим имена перечисляемых свойств объекта
    const keys = Object.keys(this);
    // создадим переменную (текущий индекс последовательности)
    let index = 0;
    return {
      next() {
        let done = index >= keys.length;
        let value = done ? undefined : keys[index++];
        return {
          value,
          done
        }
      }
    }
  }
}

for (let key of car) {
  console.log(key + ' => ' + car[key]);
}
// в консоль будет выведено: color => "black", brand => "Ford"

Задачи по циклам

1. Написать с помощью цикла while «переворот» числа. Другими словами, нужно создать новое число, у которого цифры шли бы в обратном порядке (например: 472 -> 274).

Решение

2. Найти самую большую цифру в целом числе.

Решение

3. Вычислить сумму первой и последней цифр целого числа.

Решение

Оператор break завершает текущий оператор цикла, switch или метки и передает управление программой оператору, следующему за завершенным оператором.

function testBreak(x) {
  let i = 0;

  while (i < 6) {
    if (i === 3) {
      break;
    }
    i += 1;
  }

  return i * x;
}

const food = "sushi";

switch (food) {
  case "sushi":
    console.log("Sushi is originally from Japan.");
    break;
  case "pizza":
    console.log("Pizza is originally from Italy.");
    break;
  default:
    console.log("I have never heard of that dish.");
    break;
}

outerBlock: {
  innerBlock: {
    console.log('1');
    break outerBlock; 
    console.log(':-('); 
  }
  console.log('2'); 
}

block1: {
  console.log('1');
  break block2; 
}

block2: {
  console.log('2');
}

function testBreak(x) {
  let i = 0;

  while (i < 6) {
    if (i === 3) {
      (function () {
        break;
      })();
    }
    i += 1;
  }

  return i * x;
}

testBreak(1); 

block_1: {
  console.log('1');
  (function () {
    break block_1; 
  })();
}

Specifications

Browser compatibility

JavaScript

• async function*

  Объявление async function*определяет генератор,который возвращает объект AsyncGenerator.

• block

  Блочное утверждение используется для группировки нуля или более утверждений.

• class

  Объявление класса создает новый с заданным именем,используя наследование по прототипу.

• const

  Константы имеют блочное копирование,как и переменные,объявленные с помощью ключевого слова let.

Циклы

Последнее обновление: 31.08.2021

Циклы позволяют в зависимости от определенных условий выполнять некоторое действие множество раз. В JavaScript имеются следующие виды циклов:

• for

• for..in

• for..of

• while

• do..while

Цикл for

Цикл for имеет следующее формальное определение:

for ([инициализация счетчика]; [условие]; [изменение счетчика]){

    // действия
}

Например, используем цикл for для перебора чисел от 0 до 4:

for(let i = 0; i<5; i++){
	
	console.log(i);
}
console.log("Конец работы");

Первая часть объявления цикла — let i = 0 — создает и инициализирует счетчик — переменную i. И перед выполнением цикла ее
значение будет равно 0. По сути это то же самое, что и объявление переменной.

Вторая часть — условие, при котором будет выполняться цикл: i<5. В данном случае цикл будет выполняться, пока значение i не достигнет 5.

Третья часть — i++ — приращение счетчика на единицу.

То есть при запуске переменная i равна 0. Это значение отвечает условию i<5, поэтому будет выполняться блок цикла, а именно строка кода

console.log(i);

После выполнения блока цикла выполняется треться часть объявления цикла — приращение счетчика. То есть переменная i сановится равной 1. Это значение
также отвечает условию, поэтому блок цикла снова выполняется. Таким образом, блок цикла сработает 5 раз, пока значение i не станет равным 5. Это значение НЕ отвечает условию, поэтому произойдет выход из цикла.
И управление программой перейдет к инструкциям, которые идут после блока цикла. Консольный вывод программы:

0
1
2
3
4
Конец работы

Каждое отдельное повторение цикла называется итерацией. Таким образом, в данном случае сработают 5 итераций.

При этом необязательно увеличивать счетчик на единицу, можно производить с ним другие действия, например, уменьшать на единицу:

for(let i = 10; i > 5; i--){
     
    console.log(i);
}

В данном случае на консоль выводится числа от 10 до 6.

Или увеличим счетчик на 2:

for(let i = 0; i < 10; i+=2){
     
    console.log(i);
}

Здесь выводятся на консоль все четные числа от 0 до 8

При этом можно опускать различные части объявления цикла:

let i = 0;
for(; i < 60;){
     
    console.log(i);
	i = i + 10;
}

В данном случае переменная i определена вне цикла. В самом объявлении цикла есть только условие, остальные две части отсутствуют. Изменение переменной
происходит в самом блоке цикла: оно увеличивается на 10. В итоге на консоль будут выведены числа 0, 10, 20, 30, 40, 50.

Применение нескольких счетчиков в цикле

При необходимости можно использовать несколько счетчиков:

for(let i = 1, j=1; i < 5, j < 4; i++, j++){
     
    console.log(i + j);
}
// 1 итерация: i=1, j=1; i + j = 2
// 2 итерация: i=2, j=2; i + j = 4
// 3 итерация: i=3, j=3; i + j = 6

Здесь теперь используются два счетчика и два условия. Рассмотрим пошагово, что здесь происходит:

1. Первая итерация. Начальные значения переменных i и y:

   i=1, j=1;

   Для каждой переменной установлены свои условия. И вначале начальные значения переменных соответствуют этим условиям:

   i < 5, j < 4;

   В блоке цикла выводится сумма этих переменных. И дальше значения обоих переменных увеличиваются на единицу. Они становятся равны

   i=2, j=2;

   Эти значения также соответствуют условиям, поэтому выполняется вторая итерация

2. Вторая итерация. Значения переменных i и y:

   i=2, j=2;

   После выполнения блока цикла значения обоих переменных увеличиваются на единицу. Они становятся равны

   i=3, j=3;

   Эти значения также соответствуют условиям, поэтому выполняется третья итерация

3. Третья итерация. Значения переменных i и y:

   i=3, j=3;

   После выполнения блока цикла значения обоих переменных увеличиваются на единицу. Они становятся равны

   i=4, j=4;

   Значение переменной i соответствует условию i < 5, однако значение переменной j (4) НЕ соответствует условию
   j < 4. Поэтому происходит выход из цикла. Его работа завершена.

Вложенные циклы

Одни циклы могут внутри себя содержать другие:

for(let i=1; i <= 5; i++){
     
	 for(let j = 1; j <=5; j++){
		console.log(i * j);
	 }
}

Здесь один цикл включается в себя другой. ВО внешнем цикле определяется переменная i. Вначале она равна 1 и это значение соответствует условию цикла
(i <=5), поэтому будет выполняться блок цикла, который содержит внутренний цикл.

Во внутреннем цикле определяется переменная-счетчик j, которая изначально равна 1, и потом внутренний цикл выполняет 5 итераций, пока переменная j не станет равна 5.

После того, как блок внешнего цикла завершен, переменная i увеличивается на 1 и становится равной 2, что опять же соответствует условию. И снова выполняется
блок внешнего цикла. В этом блоке снова выполняются пять итераций внутреннего цикла. И так далее. В итоге внутренний цикл будет выполняться 25 раз.

Цикл while

Цикл while выполняется до тех пор, пока некоторое условие истинно. Его формальное определение:

while(условие){
	
	// действия
}

Опять же выведем с помощью while числа от 1 до 5:

let i = 1;
while(i <=5){
	
	console.log(i);
	i++;
}

Цикл while здесь будет выполняться, пока значение i не станет равным 6.

do..while

В цикле do сначала выполняется код цикла, а потом происходит проверка условия в инструкции while. И пока это условие истинно, цикл
повторяется. Например:

let i = 1;
do{
	console.log(i);
	i++;
}while(i <= 5)

Здесь код цикла сработает 5 раз, пока i не станет равным 5. При этом цикл do гарантирует хотя бы однократное выполнение действий, даже если условие в инструкции while не будет истинно.

Операторы continue и break

Иногда бывает необходимо выйти из цикла до его завершения. В этом случае мы можем воспользоваться оператором break:

for(let i=1; i <= 10; i++){
     
	 if(i===6) break;
	 console.log(i);
}
console.log("Конец работы");

Данный цикл увеличивает переменную i c 1 до 10 включая, то есть согласно условию цикла блок цикла должен выполняться 10 раз, то есть поизвести 10 итераций.
Однако поскольку в блоке цикла происходит поверка if(i===6) break;, то, когда значение переменной i достигнет 6, то данное условие
прервет выполнение цикла с помощью оператора break. И цикл заершит работу.

1
2
3
4
5
Конец работы

Если нам надо просто пропустить итерацию, но не выходить из цикла, мы можем применять оператор continue:

for(let i=1; i <= 10; i++){
     
	 if(i===6) continue;
	 console.log(i);
}
console.log("Конец работы");

В этом случае, когда значение переменной i станет равным 6, то в цикле конструкция if(i===6) continue завершит текущую итерацию, далее идущие инструкции цикла не будут
выполняться, и произойдет переход к следующей итерации:

1
2
3
4
5
7
8
9
10
Конец работы

for..in

Цикл for..in предназначен главным образом для перебора объектов. Его формальное определение:

for (свойство in объект) {
	// действия
}

Этот цикл перебирает все свойства объекта. Например:

const person = {name: "Tom", age: 37};
for(prop in person){
     
	 console.log(prop);
}

Здесь перебирается объек person, который имеет два свойства — name и age. Соответственно на консоли мы увидим:

name
age

Цикл for…of

Цикл for…of предназначен для перебора наборов данных. Например, строка представляет фактически набор символов. И мы можем перебрать ее с помощью данного цикла:

const website = "METANIT.COM";
for(ch of website){
     
	 console.log(ch);
}

В итоге цикл перебирает все символы строки website и помещает каждый текущий символ в переменную ch, значение которой затем
выводится на консоль.

M
E
T
A
N
I
T
.
C
O
M

Другим примером может быть перебор массива:

const people = ["Tom", "Sam", "Bob"];
for(const person of people) {
    console.log(person);
}

В данном случае цикл перебирает элементы массива people. Каждый элемент последовательно помещается в константу person. И далее мы можем вывести ее значение на консоль:

Tom
Sam
Bob