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

В этом посте мы рассмотрим как в JS перебрать объект с помощью цикла и методов. Методы перебора массива мы рассматривали в этой статье.

Мы рассмотрим следующие варианты:

• for in — цикл по объекту. Можно получить и ключ и значение.
• Object.entries() — метод, возвращающий массив пар [key, value]
• Object.keys() — метод, который возвращает массив ключей [key1, key2]
• Object.values() — метод, который возвращает массив значений [value1, value2]

For … in

Начнем с простого примера, допустим у нас есть объект user

const user = {
    name: 'John',
    age: 30,
    position: 'manager',
    salary: 5000
}

Если мы знаем все свойства этого объекта, то мы могли бы их просто вывести так:

console.log(user.name);
console.log(user.age);
// и т.д.

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

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

// В консоли мы увидим следующее:
// name - John
// age - 30
// position - manager
// salary - 5000

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

Обратите внимание, что мы не можем написать просто user.key, т.к. у нашего объекта нет такого свойства, key — это переменная, которую мы задали для прохода по объекту в цикле (кстати, мы также можем сделать ее const вместо let, это не имеет значения). Поэтому мы обращаемся именно через квадратные скобки []

В другом примере, рассмотрим вариант когда нам те же данные нужно вывести и добавить к определeнному div

<div id="user-profile"></div>

<script>

const user = {
    name: 'John',
    age: 30,
    position: 'manager',
    salary: 5000
}

let userData = document.createElement('ul');
for (const key in user) {
    userData.innerHTML += `<li>${key} - ${user[key]}</li>`;
}

const parentDiv = document.getElementById('user-profile');
parentDiv.appendChild(userData);

</script>

Еще пару моментов, которые касаются этого цикла. Первое, сортировка ключей происходит в порядке их добавления, если ключи это обычные строки. Если ключи это числа (не важно 9 или «9»), тогда они будут выводиться в порядке возрастания. Допустим, есть объект с постами, где ключ это id поста:

const posts = {
    2: 'Второй пост',
    3: 'Третий пост',
    1: 'Первый пост'
}

console.log(posts); // {1: 'Первый пост', 2: 'Второй пост', 3: 'Третий пост'}

Так часто приходится делать в случае, когда вам нужно будет вытащить пост по ID, это будет быстрее чем перебирать весь массив постов.

Второй нюанс, это то что данный цикл перебирает все свойства в цепочке Prototype:

const user = {
    name: 'John',
    age: 30
}

const user1 = {
    lastName: 'Doe',
    role: 'admin'
}

user1.__proto__ = user;

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

// Результат в консоли
// lasName, role, name, age

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

for (let key in user1) {
    if (user1.hasOwnProperty(key)) {
        console.log(key);
    }
}

// lastName, role

Object.entries() — пара ключ значение из объекта

Данный метод вернет массив, где каждый элемент массива будет парой [ключ, значение]

const user = {
    name: 'John',
    age: 30,
    role: 'Administrator'
}

const objEntries = Object.entries(user);

console.log(objEntries); 
// [ ['name', 'John'], ['age', 30], ['role', 'Administrator'] ]

Важно, обратите внимание на вызов данного метода. Нельзя просто написать user.entries()

Из нашего примера видно, что в переменной objEntries будет массив состоящий из 3 других массивов. Дальше в зависимости от того, что вам нужно в результате, вы можете воспользоваться методами массивов.

Object.keys() — получаем ключи из объекта

Данный метод возвращает массив ключей объекта. Если рассмотреть на том же примере с объектом user, то получим:

const objKeys = Object.keys(user);
console.log(objKeys); // [ 'name', 'age', 'role' ]

Данный метод можно использовать для определения количества элементов в объекте:

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

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

Object.values() — получаем массив значений из объекта

Как вы уже наверное догадались, данный метод возвращает массив со значениями:

const user = {
    name: 'John',
    age: 30,
    role: 'Administrator'
}

const objValues = Object.values(user);

console.log(objValues); // [ 'John', 30, 'Administrator' ]

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