С развитием стандарта 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
полезен, когда вам нужно перебрать все перечисляемые свойства объекта.