Распространенная проблема, с которой сталкиваются программисты - это как перебрать набор данных. Эти данные могут поступать в виде массивов, списков, таблиц или других объектов. В этой статье мы рассмотрим эту проблему и узнаем 4 способа перебора объектов с помощью Javascript для получения необходимых пар ключ-значение.

Перебор объекта обычными способами

Если у вас есть массив данных, который является объектом в Javascript, вы не сможете перебрать его с помощью таких методов, как map(), forEach() или цикла for..of. Вы просто получите ошибку.

Для такого объекта:

const items = {
  'first': new Date(),
  'second': 2,
  'third': 'test'
}

map() выдаст вам TypeError: items.map is not a function:

items.map(item => {})

forEach() выдаст вам TypeError: items.forEach is not a function:

items.forEach(item => {})

for..of выдаст вам TypeError: items are not iterable:

for (const item of items) {}

Методы для перебора объектов в Javascript

Цикл for...in

Самый простой способ перебрать свойства объекта - использовать оператор for...in. Этот метод работает во всех современных и старых браузерах, включая Internet Explorer 6 и выше.

Вот пример, в котором цикл for...in используется для перебора объекта:

const user = {
  name: 'Иван Пeтров',
  email: 'petrov@mail.com',
  age: 25,
  date: '08/02/1989',
  active: true
};

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

//  name: Иван Пeтров
//  email: petrov@mail.com
//  age: 25
//  date: 08/02/1989
//  active: true

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

Чтобы избежать этой проблемы, необходимо явно проверить, принадлежит ли свойство объекту, используя метод hasOwnProperty():

for (const key in user) {
  if (user.hasOwnProperty(key)) {
    console.log(key + ':', user[key]);
  }
}

Чтобы преодолеть эту проблему, позже в ES8 были добавлены два других метода: Object.entries() и Object.values(). Эти методы преобразовывают объект в массив, чтобы потом использовать методы перебора массива.

Метод Object.keys() 

До спецификации ES6 единственным способом перебрать объект был цикл for...in. Метод Object.keys() был введен в ES6, чтобы упростить перебор объектов.

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

Пример:

const courses = {
  java: 10,
  javascript: 55,
  nodejs: 5,
  php: 15
};

const keys = Object.keys(courses);
console.log(keys);

//  [ 'java', 'javascript', 'nodejs', 'php' ]

keys.forEach((key, index) => {
    console.log(key + ':', courses[key]);
});

//  java: 10
//  javascript: 55
//  nodejs: 5
//  php: 15

Метод Object.values() 

Метод Object.values() был введен в ES8 и работает противоположно методу Object.key(). Он возвращает значения всех свойств объекта в виде массива. Затем вы можете перебрать полученный массив, используя любой из методов цикла.

Давайте посмотрим на примере:

const animals = {
  tiger: 1,
  cat: 2,
  monkey: 3,
  elephant: 4
};

Object.values(animals).forEach(val => console.log(val));

//  1
//  2
//  3
//  4

Метод Object.entries() 

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

Вот пример:

const animals = {
  tiger: 1,
  cat: 2,
  monkey: 3,
  elephant: 4
};

const entries = Object.entries(animals);
console.log(entries);

//  [ [ 'tiger', 1 ], [ 'cat', 2 ], [ 'monkey', 3 ], [ 'elephant', 4 ] ]

А уже чтобы перебрать массив, возвращаемый Object.entries(), вы можете использовать цикл for...of или метод forEach():

//  `for...of` цикл
for (const [key, value] of Object.entries(animals)) {
  console.log(key, value);
}

//  `forEach()` метод
Object.entries(animals).forEach(([key, value]) => {
  console.log(key, value)
});

Заключение

Мы вкратце рассмотрели 4 различных способа перебора объектов в Javascript. Если вы используете старые браузеры, for...in по-прежнему является хорошим вариантом; в противном случае вы можете использовать любой из новых методов, описанных выше.