Slik Itererer du gjennom en objektnøkler og verdier i JavaScript

Noen ganger må du kanskje iterere gjennom et objekt i JavaScript for å hente flere nøkkelverdipar. I denne artikkelen vil vi se på fire forskjellige måter å looping over objektegenskaper I JavaScript.

FØR ES6 var den eneste måten å gå gjennom et objekt på for…in loop. Object.keys() – metoden ble introdusert I ES6 for å gjøre det lettere å iterere over objekter. Senere I ES8 ble to nye metoder lagt til, Object.entries() og Object.values(). De nyeste metodene konverterer objektet til en matrise og bruker deretter array looping metoder for å iterere over den matrisen.

La oss begynne med den første metoden!

for…in Loop

den enkleste og enkle måten å iterere over objektegenskaper er ved å brukefor...in – setningen. Denne metoden fungerer i alle moderne og gamle nettlesere, Inkludert Internet Explorer 6 og høyere.

her er et eksempel som brukerfor...in loop for å iterere over et objekt:

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

problemet med for...in loop er at den iterates gjennom egenskapene i prototypekjeden også. Siden objektene I JavaScript kan arve egenskaper fra prototypene, vilfo...in – setningen også gå gjennom disse egenskapene.

for å unngå å iterere over prototypegenskaper mens du løper et objekt, må du eksplisitt sjekke om egenskapen tilhører objektet ved å bruke hasOwnProperty() – metoden:

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

Heldigvis trenger Vi Ikke lenger å stole påfor...in oghasOwnProperty() metode for å gå gjennom et objekt. Det finnes bedre måter tilgjengelig.

Objekt.keys () Metode

Object.keys() metoden ble introdusert I ES6. Det tar objektet du vil iterere over som et argument, og returnerer en matrise som inneholder alle egenskapsnavn (eller nøkler).

Du kan deretter bruke en hvilken som helst av array looping-metodene, for eksempel forEach(), for å iterere gjennom arrayet og hente verdien av hver egenskap.

Her er et eksempel:

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

I funksjonsdeklarasjonen ovenfor brukte JEG ES6 syntaks. Jeg antar at DU allerede er kjent MED ES6 spesielt pilfunksjoner. HVIS DU er ny PÅ ES6, ta en titt på arrow functions guide for å lære om DET.

Objekt.verdier () Metode

Objektet.verdier () metoden ble introdusert I ES8 og det gjør det motsatte av Object.key(). Den returnerer verdiene for alle egenskapene i objektet som en matrise. Du kan deretter gå gjennom verdier-matrisen ved hjelp av en av array looping metoder.

La oss se på et eksempel:

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

Objekt.oppforinger () Metode

Objektet.oppforinger () er en annen metode som ble introdusert I ES8 og kan brukes til a krysse et objekt. I motsetning tilObject.values() som oppretter en matrise av verdiene i objektet, produsererObject.entries() en matrise av matriser. Hver indre array har to elementer. Det første elementet er egenskapen; det andre elementet er verdien.

her er et eksempel:

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

for å iterere over matrisen returnert av Object.entries(), kan du enten bruke for…som vist nedenfor:

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

Konklusjon

Det er alt for iterating over objektegenskaper i JavaScript. Vi så på fire forskjellige metoder for å utføre denne oppgaven. for...in er fortsatt et godt alternativ hvis du vil støtte gamle nettlesere. Ellers bruker du bare noen av de nyeste metodene:Object.keys()Object.values() eller Object.entries().

✌ ️ liker Du denne artikkelen? Følg @ attacomsian På Twitter. Du kan også følge Meg På LinkedIn og DEV. Abonner PÅ RSS-Feed.

👋 hvis du liker å lese artiklene mine og ønsker å støtte meg for å fortsette å lage gratis opplæringsprogrammer, kan du kjøpe meg en kaffe (koster $5) .