В этой статье мы узнаем, как перебрать объект.
В 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
Спасибо за чтение
Спасибо за чтение моего блога. 🚀 Больше информации вы можете найти в моем блоге и связаться в Твиттере