В этой статье мы узнаем, как перебрать объект.

В JavaScript очень часто приходится перебирать объект.

Есть несколько способов сделать это, и в этом уроке мы обсудим все способы.

Методы, которые можно использовать для перебора объектов в JavaScript:

  • Для цикла
  • for … in
  • Object.keys метод
  • Object.values метод
  • Object.entries метод

Проблема

Мы должны сначала понять проблему, прежде чем решать ее. Мы хотим повторить объект правильно?

Теперь представьте, что есть такой объект:

const myObject = {
    name: "John",
    age: 30,
}

И мы хотим перебрать элементы, чтобы получить такой результат:

name John
age 30

Как вы решаете эту проблему?

Как мы уже говорили, существует более одного решения

Как перебрать объект с помощью цикла for…in

Мы можем использовать цикл for .. in для перебора ключей объекта.

Пример

// Object
const myObject = {
    name: "John",
    age: 30,
}

// Print keys
for(const key in myObject) {
    console.log(key);
}

Вывод

name
age

Что ж, теперь у нас есть половина решения, которое состоит в том, чтобы напечатать ключи, но как насчет значений?

// Object
const myObject = {
    name: "John",
    age: 30,
}

// Print keys & values
for(const key in myObject) {
    console.log(key, myObject[key]);
}

Вывод

name John
age 30

Ура 🚀🚀!

Как перебрать объект с помощью метода Object.keys()

Мы также можем использовать метод Object.keys для перебора ключей объекта.

Он принимает объект, который вы хотите зациклить, в качестве аргумента и возвращает массив ключей.

Пример

// Object
const myObject = {
    name: "John",
    age: 30,
}

// Keys
const keys = Object.keys(myObject);
// Print Keys
console.log(keys);

Вывод

[ 'name', 'age' ]

Как видите, он вернул массив со всеми ключами, а это значит, что мы можем перебирать массив как угодно.

// Object
const myObject = {
    name: "John",
    age: 30,
}

// Array of keys
const keys = Object.keys(myObject);
// Iterate over keys with `forEach`
keys.forEach(key => {
    console.log(key);
});

Вывод

name
age

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

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

Пример

// Object
const myObject = {
    name: "John",
    age: 30,
}

// Array of keys
const keys = Object.keys(myObject);
// Get keys and values of object
keys.forEach(key => {
    console.log(key, myObject[key])
});

Вывод

name John
age 30

Ура 🚀🚀!

Как перебрать объект с помощью метода Object.values()

Мы можем использовать метод Object.values() для перебора значений объектов.

Метод Object.values() возвращает массив собственных перечисляемых значений свойств данного объекта со строковыми ключами. (Источник: MDN)

Пример

// Object
const myObject = {
    name: "John",
    age: 30,
}
// Array of values
const values = Object.values(myObject);
// Iterate over values
values.forEach((value) => {
    console.log(value)
});

Вывод

John
30

Как перебрать объект с помощью метода Object.entries()

Мы можем использовать Object.entries для перебора ключей и значений объекта.

Метод Object.entries() возвращает массив собственных перечислимых пар ключ-значение свойства данного объекта со строковыми ключами. (Источник: MDN)

Пример

// Object
const myObject = {
    name: "John",
    age: 30,
}

// Array of keys and values
const entries = Object.entries(myObject);
// Iterate
for (let i = 0; i < entries.length; i++) {
    for (let n = 0; n < entries[i].length; n++) {
        console.log(entries[i][n]);
    }
}

Вывод

name
John
age
30

Спасибо за чтение

Спасибо за чтение моего блога. 🚀 Больше информации вы можете найти в моем блоге и связаться в Твиттере