Перебор элементов объекта в JavaScript

Время от времени может понадобиться пройтись циклом по свойствам объектам в JavaScript. Единственным способом сделать это, перед выходом ES6, было с помощью цикла for...in.

Проблема с циклом for...in заключается в том, что итерация происходит так же учитывая свойства в цепочке Prototype. При цикле по объекту с помощью for...in, необходимо проверять, принадлежит ли свойство этому объекту. Это можно сделать с помощью метода hasOwnProperty.

Так же, очень часто нам приходится работать с ассоциативными массивами в JavaScript. И из этой статьи вы узнаете, как пройтись циклом по ассоциативному массиву в JavaScript.

for (var property in object) {
  if (object.hasOwnProperty(property)) {
    // да, принадлежит, делаем что-то
  }
}

Однако, это время прошло, и нам больше не нужно использовать for...in и hasOwnProperty. Есть способ получше.

Лучший способ прохождения циклом по объекту

Лучший способ пройтись циклом по объектам - это сначала преобразовать объект в массив. А затем, пройтись по преобразованному массиву привычными методами.

Преобразовать объект в массив можно тремя способами:

1. Object.keys
2. Object.values
3. Object.entries

Object.keys

Object.keys создаёт массив, который содержит только свойства объекта (все его ключи). Вот пример.

const fruits = {
  apple: 28,
  orange: 17,
  pear: 54,
}

const keys = Object.keys(fruits)
console.log(keys) // [apple, orange, pear]

Object.values

Object.values создаёт массив, который содержит значения каждого из свойств в объекте. Приведём пример:

const fruits = {
  apple: 28,
  orange: 17,
  pear: 54,
}

const values = Object.values(fruits)
console.log(values) // [28, 17, 54]

Object.entries

Object.entries создает массив массивов. Каждый внутренний массив содержит два элемента. Первый элемент - это свойство объекта (ключ), второй - его значение.

Приведем пример:

const fruits = {
  apple: 28,
  orange: 17,
  pear: 54,
}

const entries = Object.entries(fruits)
console.log(entries)
// [
//    [apple, 28],
//    [orange, 17],
//    [pear, 54]
// ]

Мой любимый подход из этих всех - Object.entries, потому что с ним вы одновременно получаете и ключ, и значение текущего элемента.

Проходим циклом по преобразованному массиву

После преобразования объекта в массив с ключами Object.keys, значениями Object.values или Object.entries, вы можете работать с ними дальше в цикле как с обычным массивом.

// Проходим по массиву, созданный Object.keys
const keys = Object.keys(fruits)
for (const key of keys) {
  console.log(`key = ${key}, value = ${fruits[key]}`)
}

//key = apple, value = 28
//key = orange, value = 17
//key = pear, value = 54

Если вы используете Object.entries, то, удобнее всего будет воспользоваться деструктуризацией, присвоив переменной текущий ключ и значение.

const entries = Object.entries(fruits)
for (const [fruit, count] of entries) {
  console.log(`Всего: ${count} ${fruit}s`)
}
// Всего: 28 apples
// Всего: 17 oranges
// Всего: 54 pears

Резюме

Лучший способ в JavaScript выполнить цикл по объекту - это сначала преобразовать его в массив одним из вышеприведенных методов:

1. Object.keys
2. Object.values
3. Object.entries

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