Sådan gentages gennem et objekt nøgler og værdier i JavaScript

Nogle gange skal du muligvis gentage gennem et objekt i JavaScript for at hente flere nøgleværdipar. I denne artikel vil vi se på fire forskellige måder at looping over objektegenskaber i JavaScript.

før ES6 var den eneste måde at løbe gennem et objekt på for…in loop. MetodenObject.keys() blev introduceret i ES6 for at gøre det lettere at gentage over objekter. Senere i ES8 blev der tilføjet to nye metoder, Object.entries() og Object.values(). De nyeste metoder konverterer objektet til et array og bruger derefter array looping metoder til at gentage over det array.

lad os begynde med den første metode!

for…in Loop

den enkleste og ligetil måde at gentage over objektegenskaber er ved at bruge for...in erklæring. Denne metode virker i alle moderne og gamle bro. sere, herunder Internet opdagelsesrejsende 6 og højere.

Her er et eksempel, der brugerfor...in loop til at gentage 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 medfor...in loop er, at det også gentager egenskaberne i prototypekæden. Da objekterne i JavaScript kan arve egenskaber fra deres prototyper, vil fo...in sætningen også løbe gennem disse egenskaber.

for at undgå iterering af prototypeegenskaber, mens du løber et objekt, skal du eksplicit kontrollere, om ejendommen tilhører objektet ved hjælp af hasOwnProperty() metode:

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

heldigvis behøver vi ikke længere at stole påfor...inoghasOwnProperty() metode til at løbe gennem et objekt. Der er bedre måder til rådighed.

objekt.nøgler () metode

Object.keys() metode blev introduceret i ES6. Det tager det objekt, du vil gentage som et argument, og returnerer et array, der indeholder alle egenskaber navne (eller nøgler).

Du kan derefter bruge en hvilken som helst af array looping-metoderne, såsom forEach(), til at gentage gennem arrayet og hente værdien af hver egenskab.

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 ovenstående funktionserklæring brugte jeg ES6-syntaks. Jeg antager, at du allerede er bekendt med ES6 især pil funktioner. Hvis du er ny til ES6, tage et kig på pil funktioner guide til at lære om det.

objekt.værdier () metode

objektet.værdier () metode blev introduceret i ES8, og det gør det modsatte af Object.key(). Det returnerer værdierne for alle egenskaber i objektet som et array. Du kan derefter sløjfe gennem værdier array ved hjælp af en af array looping metoder.

lad os se på et eksempel:

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

objekt.poster () metode

objektet.poster () er en anden metode, der blev introduceret i ES8 og kan bruges til at krydse et objekt. I modsætning til Object.values() der skaber et array af værdierne i objektet, Object.entries() producerer en række arrays. Hvert indre array har to elementer. Det første element er egenskaben; det andet element er værdien.

Her er et eksempel:

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

for at gentage over arrayet returneret af Object.entries(), kan du enten bruge for…af loop eller forEach () – metoden som vist nedenfor:

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

konklusion

det er alt for at gentage over objektegenskaber i JavaScript. Vi kiggede på fire forskellige metoder til at udføre denne opgave. for...in er stadig en god mulighed, hvis du vil støtte gamle bro.sere. Ellers skal du bare bruge en af de nyeste metoder: Object.keys()Object.values() eller Object.entries().

like denne artikel? Følg @ attacomsian på kvidre. Du kan også følge mig på LinkedIn og DEV. Abonner på RSS-Feed. hvis du kan lide at læse mine artikler og vil støtte mig til at fortsætte med at oprette gratis tutorials, køber du mig en kop kaffe (koster $5) .