Цикл for...in в JS

В этой статье вы познакомитесь с новым циклом в JavaScript — for..in.

В предыдущих статьях мы уже знакомились с циклами do...while и for. Цикл for...in — еще одна разновидность циклов в JavaScript.

Цикл for...in позволяет перебирать ключи объекта — это называется «итерированием».

 Синтаксис

for (ключ in объект) {
    // тело цикла
}

На каждой итерации цикла переменной key присваивается следующий ключ из объекта. Цикл выполняется для всех свойств объекта.

Примечание. Имея ключ, легко получить соответсвующее ему значение. Поэтому в объекте перебирают именно ключи.

for...in с объектами

Пример 1. Перебираем свойства объекта

const student = {
    name: 'Маша',
    class: 7,
    age: 12
}

// используем for...in
for ( let key in student ) {

    // выводим свойство на экран
    console.log(`${key} => ${student[key]}`);
}

Вывод

name => Маша
class => 7
age => 12

В этом примере мы использовали цикл for...in для перебора всех свойств (ключей) объекта student.

На каждой итерации ключ объекта присваивается переменной key. Чтобы получить значение, соответствующее этому ключу, мы использовали  student[key].

Пример 2. Обновляем значения свойств

const salaries= {
    "Андрей" : 24000,
    "Даня" : 34000,
    "Маша" : 55000
}

// используем цикл for...in
for ( let i in salaries) {

    // добавляем символ валюты
    let salary = salaries[i] + "₽";

    // выводим значения
    console.log(`${i}: ${salary}`);
}

Вывод

Андрей: 24000₽
Даня: 34000₽
Маша: 55000₽

for...in со строками

Строка — тоже объект, поэтому for...in можно использовать и с типом string. Цикл будет проходиться по индексам символов строки.

const string = 'кодчик';

// используем for...in
for (let i in string) {
    console.log(string[i]);
}

 Вывод

к
о
д
ч
и
к

for...in с массивами

Цикл for...in можно использовать и с массивами — почти так же, как со строками. Перебор будет осуществляться по индексам массива.

// объявляем массив
const arr = [ 'привет', 1, 'JavaScript' ];

// используем for...in
for (let x in arr) {
    console.log(arr[x]);
}

Вывод

привет
1
JavaScript

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