LearnJS

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

Перебрать объект - значит пройтись по его свойствам. Обычно это нужно, когда мы заранее не знаем все имена свойств или хотим обработать их одинаковым образом.

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

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

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

Если имя свойства известно заранее, можно обратиться к нему напрямую.

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

console.log(user.name); // Анна
console.log(user.age); // 28

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

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

В таких случаях используют цикл for…in или методы Object.keys(), Object.values() и Object.entries().

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

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

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

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

Результат:

name
age
city

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

Для простых объектов, которые вы создаете сами, этого обычно достаточно. Если нужно работать только с собственными свойствами объекта, чаще удобнее использовать Object.keys() или Object.entries().

Получение значения по ключу

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

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

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

Результат:

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

Здесь нужна именно запись user[key]. Она берет значение переменной key и подставляет его как имя свойства.

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

let key = 'name';

console.log(user[key]); // Анна
console.log(user.key); // undefined

user.key ищет свойство с буквальным именем key. А такого свойства в объекте нет.

Object.keys()

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

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

let keys = Object.keys(user);

console.log(keys); // ['name', 'age', 'city']

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

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

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

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

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

console.log(Object.keys(user).length); // 3

Object.values()

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

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

console.log(Object.values(user)); // ['Анна', 28, 'Москва']

Этот метод подходит, когда ключи не нужны.

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: 28,
  city: 'Москва',
};

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

Результат:

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

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

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

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

Что выбрать

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

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

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

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

Итого

  • Перебор объекта - это проход по его свойствам.
  • for…in перебирает ключи объекта.
  • Значение по переменному ключу получают через object[key].
  • Object.keys() возвращает ключи, Object.values() - значения, Object.entries() - пары [key, value].
  • Для большинства задач с ключом и значением удобно использовать Object.entries().