Традиционный for цикл в JavaScript - теперь в прошлом! Встречайте новые циклы for..of и for … in, которые дают нам очень ясный и короткий синтаксис для последовательного прохода по всем типам итерируемых и перечисляемых значений, таких как строки, массивы и объектные литералы. Поэтому, этот материал будет неким подо...

JavaScript ES6 циклы: for...in и for...of

Традиционный for цикл в JavaScript - теперь в прошлом! Встречайте новые циклы for..of и for…in, которые дают нам очень ясный и короткий синтаксис для последовательного прохода по всем типам итерируемых и перечисляемых значений, таких как строки, массивы и объектные литералы. Поэтому, этот материал будет неким подобием шпаргалки, к которой можно обращаться, чтобы освежить в памяти новые функции JavaScript!

for…of

Используйте данный цикл for…of для итерации по значениям в итерируемых типах, например массиве:


  let animals = ['кошка', 'собака', 'лев', 'тигр'];
  let names = ['Гертруда', 'Генри', 'Мэлвин', 'Билли'];

  for(let animal of animals)
  {
   // Случайное имя для кошки
   let nameIdx = Math.floor(Math.random() * names.length);
   console.log(`${names[nameIdx]}- ${animal}`);
  }

Возможнрый результат


  // Генри - собака
  // Мэлвин - лев
  // Генри - собака
  // Билли - тигр

Строки также являются итерируемыми типами, поэтому вы можете использовать JavaScript цикл for…of для строк:


  let str = 'abcde';

  for (let char of str)
  {
   console.log(char.toUpperCase().repeat(3));
  }

  // AAA
  // BBB
  // ...

Вы также можете перебирать карты (map), наборы (set), генераторы (generator), коллекции узлов DOM и объект arguments, доступный внутри каждой JavaScript функций.

for…in

Используйте этот цикл для то, чтобы перебирать свойства объекта (ключи объекта) в JavaScript:


  let oldCar = {

   make: 'Tesla',
   model: 'S',
   year: '2014'

  };

  for (let key in oldCar)
  {
   console.log(`${key} --> ${oldCar[key]}`);
  }

  // make --> Tesla
  // model --> S

Вы также можете использовать for…in для итерации по индексам перебираемого объекта, например массива или строки:


  let str = 'Turn the page';

  for (let index in str)
  {
   console.log(`Индекс ${str[index]}: ${index}`);
  }

Результат:

  // Индекс T: 0
  // Индекс u: 1