Javascript 100 дней

Сегодня седьмой из 100 дней моего изучения javascript, и сегодня я узнал о циклах javascriptfor...in и for...of.

Оба оператора for...in и for...of используются для итерации.

for...in перебирает все перечислимые строковые свойства объекта (игнорируя свойства, отмеченные символами), включая унаследованные перечисляемые свойства.

for...of выполняет цикл, который работает с итерируемым. Итерируемые объекты включают объекты Array, String, TypedArray, Map, Set, arguments, генераторы, созданные функциями генератора, и пользовательские итерации.

Проще говоря, for…in выполняет итерации по объектам и for…of по итерации.

Для получения дополнительной информации об итерируемых объектах см. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol.

Давайте посмотрим несколько примеров

var person = { name: 'evie',
               age: 25,
               city: 'Oslo',
               country: 'Norway'
          }
for(key in person) {
  console.log(`${key} : ${person[key]}`);
}

//output:
"name : evie"
"age : 25"
"city : Oslo"
"country : Norway"

var array = ['june', 'july', 'august'];
for(key in array) {
  console.log(array[key]);
} 

//output:
"june"
"july"
"august"

var array = ['june', 'july', 'august'];
for(value of array) {
  console.log(value);
}

//output:
"june"
"july"
"august"

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

var person = { name: 'evie',
               age: 25,
               city: 'Oslo',
               country: 'Norway'
          }

for(value of person) {
  console.log(`${value}`);
}

//TypeError: person is not iterable


//You need to convert it to array first

for (value of Array.from(person)) { 
    console.log(value);
}

Знаете ли вы, что for…of был введен в ES6.

Вы, должно быть, думаете, что если уже есть for…in, зачем тогда нам for…of?

for…in перебирает всю цепочку прототипов, что редко бывает нужным, поэтому многие руководства по стилю JavaScript и линтеры не рекомендуют его использовать. for...in чаще всего используется для целей отладки, поскольку это простой способ проверить свойства объекта (путем вывода на консоль или иным образом).

Давайте разберемся с этим на примере ниже

const myArray = [1,2,3];
Array.prototype.customArray = 'adding property to Array';
Object.prototype.customObj = 'adding property to object';

console.log("-----for...in iteration -----------");

for (const key in myArray) {
  console.log(myArray[key]);
}

console.log("-----for...of iteration-----------");

for (const value of myArray) {
    console.log(value);
}


output:
"-----for...in iteration -----------"
1
2
3
"adding property to Array"
"adding property to object"
"-----for...of iteration-----------"
1
2
3

Здесь мы добавили одно свойство к прототипу массива (customArray) и одно к прототипу объекта (customObj).

Когда мы перебираем myArray с помощью for…in, он сначала перебирает myArray, а затем его прототип Array,и затем Object, хотя for…of перебирать только myArray.

Это все на сегодня. Догонят завтра.

Спасибо за прочтение. Пожалуйста, хлопайте, если вы найдете историю полезной.

Продолжай учиться!

#100daysofjavascript

Javascript 100 дней — день 7

Вопросы по теме