Как перебрать циклом объект в JS (JavaScript)

Объекты в JavaScript предназначены для хранения различных типов данных в одной переменной. Но иногда требуется проделать с ними какие-то манипуляции. Например, может понадобиться перебрать все ключи и значения объекта. Как перебрать циклом объект в JS? к сожалению, простого способа сделать это не существует. В отличие от массивов, у них нет встроенного метода для выполнения цикла. Чтобы создать цикл по объекту в JS необходимо использовать несколько приёмов.

В этой статье мы рассмотрим:

1. Три различных способа перебора циклом объектов.
2. Преимущества и недостатки каждого метода.
3. Цикл по массиву объектов.
4. Цикл по JSON объекту JavaScript.

Мы изучим, как легко выполнять итерации над любым объектом в JavaScript. Используем основы и лучшие практики выполнения циклов. А также ознакомимся с несколькими примерами и советами, которые сделают код более читаемым и эффективным.

Как перебрать циклом объект в JS по ключам

Ключи или свойства объекта — это имена или идентификаторы значений, хранящихся в объекте. Объект в JavaScript является одним из непримитивных типов данных. Ключи могут представлять собой строки, символы или числа и они используются для доступа к значениям объекта или их изменения. Например, person.name это свойство, которое возвращает значение name объекта person.

const person = {
  name: 'John',
  age: 30,
  favoriteColors: ['Red', 'Green']
};

Как перебрать циклом объект в JS с помощью Object.keys()

Стоит отметить, что этот метод возвращает массив всех ключей (или имён свойств) объекта. Затем, используя цикл for или метод forEach() массив можно перебрать и получить доступа к ключам. Для цикла по ключам объекта person можно применить статический метод Object.keys(). Например:

const keys = Object.keys(person); 
// Результат: ['name', 'age', 'favoriteColors']

// 1. Using a for() loop
for (let i = 0; i < keys.length; i++) {
  console.log(keys[i]);
}
// Результат: 'name', 'age', 'favoriteColors'

// 2. Using a forEach() method
keys.forEach(key => {
  console.log(key); 
});
// Результат: 'name', 'age', 'favoriteColors'

Плюсы метода:

• простота и удобство в использовании;
• работа с любым объектом (независимо от его структуры или сложности);
• совместимость со старыми браузерами (входит в стандарт ECMAScript 5).

Минусы метода:

• этот метод предоставляет собственные ключи объекта, игнорируя полученные из цепочки прототипов. Иногда это именно то, что требуется. Однако в некоторых случаях может возникнуть необходимость использовать и те ключи;
• объекты не имеют фиксированного порядка расположения своих ключей. Это означает, что они не всегда будут отображаться в одной и той же последовательности. Будьте осторожны, если ваша логика зависит от порядка следования ключей, потому что это может сработать не так, как вы ожидаете;
• этот код создаёт ещё один массив. Такой вариант способен замедлить код и потребует больше памяти. Ситуация будет особенно сложной, если объект большой или состоит из множества частей.

Цикл по значениям объекта с помощью Object.values()

Исходя из того, что этот метод выдаёт массив со всеми значениями объекта, можно легко справиться с этой задачей. Например, если взять в качестве примера объект person, то можно использовать Object.values() следующим образом:

const values = Object.values(person); 
// Результат: ['John', 40, ['Red', 'Green']]

// 1. Using a for() loop
for (let index = 0; index < values.length; index++) {
  console.log(values[index]);
}
// Результат: ['John', 40, ['Red', 'Green']

// 2. Using a forEach() method
values.forEach(key => {
  console.log(key); 
});
// Результат: ['John', 40, ['Red', 'Green']

Плюсы метода:

• простота и удобство в использовании;
• работает с любым объектом (независимо от его структуры или сложности);
• полная поддержка современными браузерами (входит в стандарт ECMAScript 2017).

Минусы метода:

• возвращает только собственные значения объекта. Это означает, что он не включает значения, унаследованные из цепочки прототипов объекта. Это может не подойти для решения конкретной задачи;
• не заботится о порядке значений, потому что объекты не упорядочены. Это может быть проблемой, если код зависит от упорядоченности;
• некоторые старые браузеры этот метод не поддерживают, что потребует использования некоторых хитростей;
• метод создаёт новый массив со значениями, что может повлиять на скорость и объем памяти, используемой кодом. Это может стать проблемой, если объект является большим или сложным.

Цикл над записями объекта с помощью Object.entries()

Как перебрать циклом объект в JS и получить пары ключ-значение объекта? Для этого можно использовать Object.entries(). Он предоставляет массив массивов, где каждый подмассив имеет ключ и значение. Затем становится доступно выполнения цикла по массиву с помощью for или forEach и использовать результат как требуется.

Например, используя тот же объект person, что и раньше, можно использовать метод Object.entries() следующим образом:

const entries = Object.entries(person); 

// 1. Using a for() loop
for (let index = 0; index < entries.length; index++) {
  console.log(entries[index]); 
}
// Результат: ['name', 'John'], ['age', 30], ['favoriteColors', ['Red', 'Green']]

// 2. Using a forEach() method
entries.forEach(entry => {
  console.log(entry); 
});
// Результат: ['name', 'John'], ['age', 30], ['favoriteColors', ['Red', 'Green']]

Плюсы метода:

• простота и удобство в использовании;
• работает с любым объектом (независимо от его структуры или сложности);
• широко поддерживается браузерами (входит в стандарт ECMAScript 2017);
• возвращает как ключи, так и значения объекта.

Минусы метода:

• возвращает только собственные записи объекта и не включает записи, унаследованные из цепочки прототипов объекта;
• не гарантирует порядок записей, поскольку объекты неупорядочены по своей природе (может вызвать некоторые проблемы, если логика приложения требует порядок записей);
• создаёт дополнительный массив, который может повлиять на производительность и использование памяти кодом, особенно если объект большой или вложенный;
• несовместим со старыми браузерами, поскольку это относительно новая функция (может потребоваться полифилл или транспилятор).

Цикл for…in по свойствам объекта

Этот цикл позволяет просмотреть все свойства объекта. Он выдаёт переменную, содержащую имя свойства. Затем можно использовать переменную с точкой или скобками для получения значения свойства.

Например, используя тот же объект person, что и раньше, мы можем использовать оператор for…in, чтобы продемонстрировать это:

const person = {
  name: 'John',
  age: 30,
  favoriteColors: ['Red', 'Green']
};

 // Используем цикл for...in
for (let key in person) {
  console.log(key);         // Результат: 'name', 'age', 'favoriteColors'
  console.log(person[key]); // Результат: 'John', 30, ['Red', 'Green']
}

Плюсы метода:

• простота и удобство в использовании;
• не создаёт дополнительный массив, что может повысить производительность и использование памяти кодом (особенно если объект большой или вложенный);
• возвращает как ключи, так и значения объекта, что может быть полезно при необходимости получения доступа к обоим.

Минусы метода:

• возвращает все перечислимые свойства объекта (включает свойства, унаследованные из цепочки прототипов объекта);
• необходимость итерации только собственных свойств объекта потребуется метод hasOwnProperty();
• не гарантирует порядок свойств, поскольку объекты неупорядочены по своей природе (может вызвать некоторые проблемы, если требуется получить порядок свойств согласно определённой логике);
• несовместим с некоторыми новыми аспектами JavaScript, такими как Symbol или Object.defineProperty() (эти функции могут создавать неисчисляемые свойства, которые не видны при итерации циклом for…in).

Сравнение работы циклов по свойствам объекта

Краткая сравнительная таблица четырёх методов:

Цикл по массиву объектов

Массив объектов — это структура данных, которая хранит несколько объектов в одной переменной. Каждый объект может иметь разные свойства и значения, и к нему можно получить доступ с помощью индекса или ключа. Например, мы можем создать массив объектов, представляющих перечень книг:

var books = [
  { name: 'JavaScript Ultimate', price: 10.2 },
  { name: 'JS for Kids', price: 2.2 },
  { name: 'JS Reference Guide', price: 15.2 }
];

Получить доступ к первому объекту в массиве можно, используя books[0]. А доступ к свойству name первого объекта — books[0].name или books[0][‘name’].

В JavaScript существует несколько способов перебора циклом массива объектов, таких как:

• цикл for;
• цикл for …of;
• метод forEach():
• метод map();
• метод filter();
• метод reduce().

Цикл for — это базовый и простой способ перебора массива объектов. Как правило, он использует переменную counter, условие и выражение increment для управления циклом. Например, можно использовать цикл for для просмотра книг:

for (var index = 0; index < books.length; index++) {
  console.log(`${books[index].name} costs ${books[index].price}$.`);
}
/*
JavaScript Ultimate costs 10.2$.
JS for Kids costs 2.2$.
JS Reference Guide costs 15.2$.
*/

Читайте также: Топ-5 альтернатив startsWith в JavaScript.

Цикл по объекту JSON

Объект JSON — это формат данных, который обычно используется для обмена информацией между сервером и клиентом. JSON расшифровывается как JavaScript Object Notation и основан на синтаксисе объектов. Однако между объектами JSON и стандартными объектами в JavaScript имеются некоторые различия, такие как:

• ключи JSON должны заключаться в двойные кавычки, в то время как ключи JavaScript могут быть без кавычек или заключены в одинарные или двойные кавычки;
• значениями JSON могут быть только строки, числа, логические значения, массивы, объекты или null (значения обычных объектов в JavaScript также могут выступать функции, даты, символы или undefined;
• JSON не поддерживает комментарии;
• объект JSON может храниться в строковой переменной или файле, и его можно преобразовать в объект JavaScript с помощью метода JSON.parse().

Давайте создадим объект JSON, представляющий список книг:

let books = `[{"title": "The Lord of the Rings", "author": "J.R.R. Tolkien", "genre": "Fantasy"}, 
  {"title": "The Hitchhiker\'s Guide to the Galaxy", "author": "Douglas Adams", "genre": "Science Fiction"}, 
  {"title": "Harry Potter and the Philosopher\'s Stone", "author": "J.K. Rowling", "genre": "Fantasy"}]`;

Можно перевести объект JSON в объект JavaScript. В результате, после этого будут доступы свойства title, author и genre объекта book. Например:

let jsonBooks = JSON.parse(books);
for (var index = 0; index < jsonBooks.length; index++) {
  console.log(jsonBooks[index].title);
}
/* Результат: 
The Lord of the Rings
The Hitchhiker's Guide to the Galaxy
Harry Potter and the Philosopher's Stone 
*/

Заключение

В итоге следует отметить, что каждый из этих методов (Object.keys(), Object.values(), Object.entries() и for…in) имеет свои преимущества и недостатки, в зависимости от задачи и предпочтений. Однако общее эмпирическое правило заключается в том, чтобы использовать методы объекта, если необходимо получить доступ к ключам, значениям или записям объекта. Конструкцию for…in следует применять при необходимости получить доступ к свойствам объекта и цепочке его прототипов.

В общей сложности, все эти методы полностью поддерживаются современными браузерами, кроме Object.values(), Object.entries(), которые не работают в Internet Explorer.