Чем отличается цикл 'for...of' в ES6 от 'for...in'?

Разница между циклами 'for...of' и 'for...in' в ES6

С развитием стандарта ES6 в JavaScript появилось много принципиально новых функциональных возможностей, в том числе и новое поведение циклов for...of и for...in. Этот вопрос актуален для разработчиков, так как понимание разницы может быть более эффективным в ситуациях, когда необходимо работать с итерируемыми объектами, такими как массивы.

Ответ на вопрос заключается в том, что цикл for...of итерирует по итерируемым объектам, например массивам. В отличие от него, цикл for...in итерирует по всем перечисляемым свойствам объекта.

Примеры использования

Оба этих цикла в JavaScript по-своему полезны, и следует понять, когда лучше использовать 'for...of', и когда лучше 'for...in'.

let array = ['apple', 'banana', 'cherry'];

// for...of
for (let value of array) {
  console.log(value);
}

// вывод: 
// 'apple'
// 'banana'
// 'cherry'

Как видите, for...of вывел значение каждого элемента в массиве.

let obj = {name: 'John', age: 28, city: 'New York'};

// for...in
for (let prop in obj) {
  console.log(prop);
}

// вывод: 
// 'name'
// 'age'
// 'city'

В этом случае for...in вывел имена всех свойств объекта.

Итог

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

Related Questions

Считаете ли это полезным?