Sådan itereres gennem et objekts nøgler og værdier i JavaScript

Nogle gange kan det være nødvendigt at gentage et objekt i JavaScript for at hente flere nøgleværdi-par. I denne artikel vil vi se på fire forskellige måder at gå over objektegenskaber i JavaScript på.

Før ES6 var den eneste måde at gå gennem et objekt på for...in loop. Object.keys() metode blev introduceret i ES6 for at gøre det lettere at iterere 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 iterere over det array.

Lad os begynde med den første metode!

for...in Løkke

Den enkleste og ligetil måde at iterere over objektegenskaber er ved at bruge for...in udmelding. Denne metode virker i alle moderne og gamle browsere, inklusive Internet Explorer 6 og nyere.

Her er et eksempel, der bruger for...in sløjfe for at iterere over et objekt:

const user = {
    name: 'John Doe',
    email: '[email protected]',
    age: 25,
    dob: '08/02/1989',
    active: true
};

// iterate over the user object
for (const key in user) {
    console.log(`${key}: ${user[key]}`);
}

// name: John Doe
// email: [email protected]
// age: 25
// dob: 08/02/1989
// active: true

problemet med for...in loop er, at den også gentager egenskaberne i prototypekæden. Da objekterne i JavaScript kan arve egenskaber fra deres prototyper, er fo...in sætning vil også gennemgå disse egenskaber.

At undgå iteration over prototypeegenskaber, mens du sløjfer et objekt, skal du eksplicit tjek om egenskaben tilhører objektet ved at bruge hasOwnProperty() metode:

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

Heldigvis behøver vi ikke længere stole på for...in og hasOwnProperty() metode til at sløjfe gennem et objekt. Der er bedre tilgængelige måder.

Object.keys() Metode

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

Du kan derefter bruge en hvilken som helst af array-looping-metoderne, såsom forEach(), til at iterere 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 array
const keys = Object.keys(courses);

// print all keys
console.log(keys);
// [ 'java', 'javascript', 'nodejs', 'php' ]

// iterate over object
keys.forEach((key, index) => {
    console.log(`${key}: ${courses[key]}`);
});

// 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 pilefunktioner. Hvis du er ny til ES6, så tag et kig på pilefunktionsguiden for at lære om det.

Object.values() Metode

Object.values()-metoden blev introduceret i ES8, og den gør det modsatte af Object.key() . Det returnerer værdierne for alle egenskaber i objektet som en matrix. Du kan derefter sløjfe gennem værdi-arrayet ved at bruge en af ​​array-looping-metoderne.

Lad os se på et eksempel:

const animals = {
    tiger: '🐅',
    cat: '🐱',
    monkey: '🐒',
    elephant: '🐘'
};

// iterate over object values
Object.values(animals).forEach(val => console.log(val));

// 🐅
// 🐱
// 🐒
// 🐘

Object.entries() Metode

Object.entries() er en anden metode, der blev introduceret i ES8 og kan bruges til at krydse et objekt. I modsætning til Object.values() der opretter en matrix af værdierne i objektet, Object.entries() producerer et array af arrays. Hver 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);

// [ [ 'tiger', '🐅' ],
//   [ 'cat', '🐱' ],
//   [ 'monkey', '🐒' ],
//   [ 'elephant', '🐘' ] ]

At iterere over arrayet returneret af Object.entries() , kan du enten bruge for...of-løkken eller forEach()-metoden som vist nedenfor:

// `for...of` loop
for (const [key, value] of Object.entries(animals)) {
    console.log(`${key}: ${value}`);
}

// `forEach()` method
Object.entries(animals).forEach(([key, value]) => {
    console.log(`${key}: ${value}`)
});

Konklusion

Det er alt for iteration over objektegenskaber i JavaScript. Vi så på fire forskellige metoder til at udføre denne opgave. for...in er stadig en god mulighed, hvis du vil understøtte gamle browsere. Ellers skal du blot bruge en af ​​de nyeste metoder:Object.keys() , Object.values() eller Object.entries() .