LearnJS

Перебор объектов в JavaScript

Перебрать объект - значит пройтись по его свойствам. У каждого свойства есть имя, его часто называют ключом, и значение.

let user = {
  name: 'Анна',
  age: 25,
  city: 'Москва'
};

В этом объекте name, age и city - ключи. А ‘Анна’, 25 и ‘Москва’ - значения.

Что значит перебрать объект

В массиве элементы идут по индексам: 0, 1, 2. В объекте данные хранятся по именам свойств.

let user = {
  name: 'Анна',
  age: 25
};

console.log(user.name);
console.log(user.age);

Если заранее известно имя свойства, можно обратиться к нему через точку. Но если нужно пройтись по всем свойствам объекта, понадобится цикл или специальные методы.

Перебор через for…in

for…in - специальный цикл для перебора ключей объекта.

let user = {
  name: 'Анна',
  age: 25,
  city: 'Москва'
};

for (let key in user) {
  console.log(key);
}

Результат:

name
age
city

На каждой итерации в переменную key попадает очередное имя свойства.

Чтобы получить значение свойства, используем квадратные скобки.

let user = {
  name: 'Анна',
  age: 25,
  city: 'Москва'
};

for (let key in user) {
  console.log(key + ': ' + user[key]);
}

Результат:

name: Анна
age: 25
city: Москва

Здесь важно писать именно user[key], а не user.key. В первом случае JavaScript берет значение переменной key. Во втором он будет искать свойство с буквальным именем key.

Object.keys()

Object.keys() возвращает массив ключей объекта.

let user = {
  name: 'Анна',
  age: 25,
  city: 'Москва'
};

let keys = Object.keys(user);

console.log(keys);

Результат:

['name', 'age', 'city']

Так как результатом является массив, его можно перебрать через for…of.

let user = {
  name: 'Анна',
  age: 25,
  city: 'Москва'
};

for (let key of Object.keys(user)) {
  console.log(key + ': ' + user[key]);
}

Object.keys() удобно использовать, когда нужны именно имена свойств или количество свойств.

let propertiesCount = Object.keys(user).length;

console.log(propertiesCount);

Object.values()

Object.values() возвращает массив значений объекта.

let user = {
  name: 'Анна',
  age: 25,
  city: 'Москва'
};

let values = Object.values(user);

console.log(values);

Результат:

['Анна', 25, 'Москва']

Этот метод подходит, когда ключи не нужны, а нужно работать только со значениями.

let prices = {
  book: 500,
  course: 1500,
  lesson: 1000
};

let sum = 0;

for (let price of Object.values(prices)) {
  sum += price;
}

console.log(sum);

Результат:

3000

Object.entries()

Object.entries() возвращает массив пар [key, value].

let user = {
  name: 'Анна',
  age: 25,
  city: 'Москва'
};

console.log(Object.entries(user));

Результат:

[
  ['name', 'Анна'],
  ['age', 25],
  ['city', 'Москва']
]

Такой формат удобен, когда нужны и ключ, и значение.

let user = {
  name: 'Анна',
  age: 25,
  city: 'Москва'
};

for (let [key, value] of Object.entries(user)) {
  console.log(key + ': ' + value);
}

Результат:

name: Анна
age: 25
city: Москва

Запись [key, value] сразу раскладывает пару на две переменные.

for…of и обычные объекты

Обычный объект нельзя перебрать через for…of напрямую.

let user = {
  name: 'Анна',
  age: 25
};

for (let item of user) {
  console.log(item);
}

Такой код приведет к ошибке, потому что обычный объект не является итерируемым.

Но можно сначала получить массив ключей, значений или пар, а уже его перебрать через for…of.

for (let value of Object.values(user)) {
  console.log(value);
}

Что выбрать

Если нужен простой перебор ключей объекта, подойдет for…in.

Если нужны ключи в виде массива, используйте Object.keys().

Если нужны только значения, используйте Object.values().

Если нужны и ключи, и значения, чаще всего удобнее Object.entries().

Итого

1. Объект перебирают по свойствам: ключам и значениям.

2. for…in перебирает ключи объекта.

3. Для получения значения по переменному ключу используется запись object[key].

4. Object.keys() возвращает массив ключей, Object.values() - массив значений, Object.entries() - массив пар [key, value].

5. Обычный объект нельзя перебрать через for…of напрямую, но можно перебрать массив, полученный через методы Object.