ES6: Цикл for...of (VII).

Цикл for...of

Сегодня мы рассмотрим цикл for...of, благодаря которому мы можем итерировать массивы и другие структуры.

Все материалы по ES6

Первое, что мы сделаем это запустим скрипт Babel, который будет следить за файлами и при их изменении создавать свежие версии.

Откроем папку проекта в командной строке (КС). Вводим команду:

npm run watch

И нажать Enter

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

В папке src создадим файл for.js и сразу укажу его в файле index.html

<script src="src/for.js"></script>

Последние версии браузеров поддерживают цикл for...of без транспиляции.

Цикл for...of очень похож на цикл for...in.

Разница в том, что for...of перебирает значения, в то время как for...in - ключи.

Если вы забыли как работает цикл for...in, то можно посмотреть это на примере:

Создадим массив с некоторыми значениями и попробуем вывести значения в консоль, используя цикл for...in и выведем сам массив.

let animals = ['cat', 'dog', 'hamster', 'fish', 'goat'];
for( animal in animals ) {
 console.log(animal);
};
console.log(animals);

В консоли мы увидим:

Вывели циклом for...in ключи массива, а нам нужно значения.

Конечно, имея ключ мы можем сделать так:

let animals = ['cat', 'dog', 'hamster', 'fish', 'goat'];
for( let animal in animals ) {
 console.log(animal);
};

for( let index in animals ) {
 console.log( animals[index]);
};

console.log(animals);

Мы так же можем воcпользоваться методом for...of

let animals = ['cat', 'dog', 'hamster', 'fish', 'goat'];
for( let animal in animals ) {
 console.log(animal);
};

for( let index in animals ) {
 console.log( animals[index]);
}

for( let animal of animals ) {
 console.log( animal );
}

console.log(animals);

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

Давайте посмотрим на то, что сгенерировал Babel

'use strict';

var animals = ['cat', 'dog', 'hamster', 'fish', 'goat'];
for (var animal in animals) {
 console.log(animal);
};

for (var index in animals) {
 console.log(animals[index]);
}

var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
 for (var _iterator = animals[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
  var _animal = _step.value;

  console.log(_animal);
 }
} catch (err) {
 _didIteratorError = true;
 _iteratorError = err;
} finally {
 try {
  if (!_iteratorNormalCompletion && _iterator.return) {
   _iterator.return();
  }
 } finally {
  if (_didIteratorError) {
   throw _iteratorError;
  }
 }
}

console.log(animals);

Если честно, то совсем нет желания разбираться с тем, что там происходит. :-)

Меня вполне устраивает цикл for...of!

Помимо массивов цикл for...of позволет итеррировать и новые структуры, которые будут добавлены в ES6 - это объекты set и map.

О них чуть позже.