Jak iterować przez obiekt klucze i wartości w JavaScript

czasami może być konieczne iterowanie przez obiekt w JavaScript, aby pobrać wiele par klucz-wartość. W tym artykule przyjrzymy się czterem różnym sposobom zapętlania właściwości obiektu w JavaScript.

przed ES6 jedynym sposobem na pętlę przez obiekt był for…in pętla. MetodaObject.keys() została wprowadzona w ES6, aby ułatwić iterację nad obiektami. Później w ES8 dodano dwie nowe metody, Object.entries() I Object.values(). Najnowsze metody konwertują obiekt na tablicę, a następnie wykorzystują metody zapętlania tablicy do iteracji nad tą tablicą.

Zacznijmy od pierwszej metody!

for…in pętla

najprostszym i prostym sposobem iteracji nad właściwościami obiektu jest użycie poleceniafor...in. Ta metoda działa we wszystkich nowoczesnych i starych przeglądarkach, w tym Internet Explorer 6 i wyższych.

oto przykład, który używa pętlifor...in do iteracji nad obiektem:

const user = { name: 'John Doe', email: '[email protected]', age: 25, dob: '08/02/1989', active: true};// iterate over the user objectfor (const key in user) { console.log(`${key}: ${user}`);}// name: John Doe// email: [email protected]// age: 25// dob: 08/02/1989// active: true

problem zfor...in pętla polega na tym, że iteracja przebiega również przez właściwości w łańcuchu prototypów. Ponieważ obiekty w JavaScript mogą dziedziczyć właściwości ze swoich prototypów, Instrukcjafo...in będzie również przechodzić przez te właściwości.

aby uniknąć iteracji nad właściwościami prototypu podczas zapętlania obiektu, należy jawnie sprawdzić, czy właściwość należy do obiektu przy użyciu metody hasOwnProperty() :

for (const key in user) { if (user.hasOwnProperty(key)) { console.log(`${key}: ${user}`); }}

na szczęście nie musimy już polegać nafor...in IhasOwnProperty() metodzie do pętli przez obiekt. Są lepsze sposoby.

obiekt.metoda keys ()

metoda Object.keys() została wprowadzona w ES6. Przyjmuje obiekt, nad którym chcesz iterację jako argument i zwraca tablicę zawierającą wszystkie nazwy właściwości (lub klucze).

Możesz następnie użyć dowolnej metody pętli tablicy, takiej jak forEach(), do iteracji przez tablicę i pobrania wartości każdej właściwości.

oto przykład:

const courses = { java: 10, javascript: 55, nodejs: 5, php: 15};// convert object to key's arrayconst keys = Object.keys(courses);// print all keysconsole.log(keys);// // iterate over objectkeys.forEach((key, index) => { console.log(`${key}: ${courses}`);});// java: 10// javascript: 55// nodejs: 5// php: 15

w powyższej deklaracji funkcji użyłem składni ES6. Zakładam, że jesteś już zaznajomiony z ES6 zwłaszcza funkcji strzałek. Jeśli jesteś nowy w ES6, zapoznaj się z przewodnikiem funkcji strzałek, aby dowiedzieć się o tym.

obiekt.values () metoda

obiekt.metoda values() została wprowadzona w ES8 i działa odwrotnie niż Object.key(). Zwraca wartości wszystkich właściwości w obiekcie w postaci tablicy. Następnie można zapętlić tablicę wartości przy użyciu dowolnej z metod zapętlania tablicy.

spójrzmy na przykład:

const animals = { tiger: '🐅', cat: '🐱', monkey: '🐒', elephant: '🐘'};// iterate over object valuesObject.values(animals).forEach(val => console.log(val));// 🐅// 🐱// 🐒// 🐘

obiekt.metoda entries ()

obiekt.entries() jest kolejną metodą, która została wprowadzona w ES8 i może być używana do poruszania się po obiekcie. W przeciwieństwie do Object.values(), który tworzy tablicę wartości w obiekcie, Object.entries() wytwarza tablicę tablic. Każda wewnętrzna tablica ma dwa elementy. Pierwszym elementem jest właściwość; drugim elementem jest wartość.

oto przykład:

const animals = { tiger: '🐅', cat: '🐱', monkey: '🐒', elephant: '🐘'};const entries = Object.entries(animals);console.log(entries);// ,// ,// ,// ]

aby iterować nad tablicą zwróconą przezObject.entries(), możesz użyć for…pętli lub metody forEach (), jak pokazano poniżej:

// `for...of` loopfor (const of Object.entries(animals)) { console.log(`${key}: ${value}`);}// `forEach()` methodObject.entries(animals).forEach(() => { console.log(`${key}: ${value}`)});

wniosek

to wszystko do iteracji nad właściwościami obiektu w JavaScript. Przyjrzeliśmy się czterem różnym metodom realizacji tego zadania. for...in jest nadal dobrym rozwiązaniem, jeśli chcesz obsługiwać stare przeglądarki. W przeciwnym razie wystarczy użyć jednej z najnowszych metod: Object.keys()Object.values() lub Object.entries().

podoba Ci się ten artykuł? @Attacomsian na Twitterze. Możesz również śledzić mnie na LinkedIn i DEV. Subskrybuj kanał RSS.

👋 Jeśli lubisz czytać moje artykuły i chcesz mnie wspierać, aby kontynuować tworzenie darmowych samouczków, Buy Kup mi kawę (koszt $5) .