• 03-12-2021 07:49
  • 960
  • 1

Что использовать for ... of или for ... in

Разница между циклами for ... of и for ... in в JavaScript. И ответ на вопрос, что и когда лучше использовать.

Цикл for...of

The MDN Definition:

Оператор for...of выполняет цикл обхода итерируемых объектов (включая Array, Map, Set, объект аргументов и подобных), вызывая на каждом шаге итерации операторы для каждого значения из различных свойств объекта

for ... of цикл работает только с повторяемыми объектами. В JavaScript итерируемые объекты - это объекты, которые можно перебирать.

String, Array, TypedArray, Map и Set - все это встроенные итерируемые объекты, поскольку каждый из их объектов-прототипов реализует метод @@iterator. Итак, цикл for ... of работает с указанными типами объектов.

Например:

cosnt str = "Hello World";

for(element of str) {
  console.log(element);
}
// H e l l o " " W o r l d

for...in Loop

The MDN Definition:

Цикл for...in проходит через перечисляемые свойства объекта. Он пройдёт по каждому отдельному элементу.

for ... in работает с теми свойствами, у которых enumerable flag установлен в true:

  • Перечислимый флаг для свойств, созданных с помощью простого присваивания или инициализатора свойств, по умолчанию равен true.
  • Перечислимый флаг для свойств, созданных с помощью Object.defineProperty, по умолчанию равен false.
  • Также работает со строками и массивами, поскольку перечислимый флаг для свойств строки и массива также по умолчанию имеет значение true.

Например:

const student = {
    name: "Ivan",
    age: 35,
}

for(key in student) {
  console.log(key, student[key]);
}

// result:
// name: "ivan", age: 33

Что использовать for...of или for...in

В заключение, что же использовать:

  • for...of - Используется для перебора строк и массивов.
  • for...in - Используйте для перебора объектов.

От себя добавлю, что for...of поставляется с ES2015 и в настоящее время является лучшей практикой (по моему опыту) потому что:

  • Более читаемый,
  • Без обратных вызовов,
  • Быстрее (если верить тестам),
  • Вы также можете использовать .entries() и деструктурирование.

Если есть, что добавить - пишите в комментариях!

Пост опубликовал:
user img
Евгений
Автор канала jackcoder на ютубе!

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