JavaScript is een van de programmeertalen waarmee je kunt itereren op object eigenschappen zonder gebruik te maken van een complexe tool of API.
In dit artikel gaan we verkennen, hoe deze eenvoudige techniek is geëvolueerd door de jaren heen en Waarom we nu iets hebben, dat kan worden geclassificeerd als elegant!
Let eens op onderstaande code en dan kunnen we verder praten
var obj = { // Yes 'var'...bad old days!
a: 1,
b: 2,
c: 3,
};for (var key in obj) {
if (obj.hasOwnProperty(key)) { // <- Ahh...What's this??
var value = obj;
console.log(key, ' : ', value);
}
}
Uitvoer:
a : 1
b : 2
c : 3
Velen van ons missen de controle obj.hasOwnProperty
In JavaScript, wanneer u itereren, is het zeer kritisch om iteratie op Object’s ouder eigenschappen (en het is ouder eigenschappen en het is ouder … Je hebt het idee!) te voorkomen. Ontbrekende iteratie kan resulteren in een trage code.
Gelukkig werken de meesten van ons met een soort van linting tool die een waarschuwing geeft als je deze controle mist.
Moderne manier – Iteratie in ES6+
Nu over naar moderne JavaScript of ES6+!
Dit probleem erkennend, heeft het ECMA-team ondersteuning voor eenvoudige iteratie in ES6 toegevoegd.
En het begint met – Object.entries()
De
Object.entries()methode retourneert een array van de eigen telbare-eigenschapsparen van een gegeven object, in dezelfde volgorde als die waarin een for…in-lus voorziet (met dit verschil dat een for-in-lus ook eigenschappen in de prototype-keten telt).
Voorbeeld, onderstaande code
const obj = {
a: 1,
b: 2,
c: 3
};
console.log(Object.entries(obj));
zal output geven zoals hieronder, Een array van arrays van twee elementen, waarbij bij index: 0, zullen we sleutel en op index:1, zullen we waarde
Nu deze eenvoudige functie zal leiden tot een elegante iteratie van Object, bekijk onderstaande code.
Stap 1: Begin met `Object.entries`
const obj = {
a: 1,
b: 2,
c: 3
};for (const entry of Object.entries(obj)) {
console.log(`key: ${entry} : value: ${entry}`);
}
Output:
key: a : value: 1
key: b : value: 2
key: c : value: 3
Het is al goed, maar laten we het geweldig maken
Step 2: Destructing gebruiken
Laten we de “invoer” begrijpen als we de bovenstaande for-lus bijwerken zoals hieronder
...for (const entry of Object.entries(obj)) {
console.log(entry);
}
de uitvoer zal zijn zoals hieronder
Hmm….Wat hebben we hier?
Wel, elk item is een Array met precies twee elementen (noem het ’tuple’), dus met behulp van ES6 Array destructuring, kunnen we code schrijven als
const entry = ;
const = entry;
console.log(`key: ${key} : value: ${value}`);
Laten we hetzelfde concept toepassen op de for-lus
const obj = {
a: 1,
b: 2,
c: 3
};for (const of Object.entries(obj)) {
console.log(`${key} : ${value}`);
}
Woohoo… het is inderdaad Awesome!
Iteratie met forEach
Wilt u dezelfde techniek toepassen op Array ingebouwde functies, probeer dan onderstaande code
const obj = {
a: 1,
b: 2,
c: 3
};
Object.entries(obj).forEach(() => {
console.info(`${key} : ${value}`);
});
Uitvoer:
a : 1
b : 2
c : 3