soms moet u itereren door een object in JavaScript om meerdere sleutel-waarde paren op te halen. In dit artikel, zullen we kijken naar vier verschillende manieren om looping over object eigenschappen in JavaScript.
voor ES6 was de enige manier om door een object te lus for…in loop. DeObject.keys() methode werd geà ntroduceerd in ES6 om het gemakkelijker te maken om over objecten te itereren. Later in ES8 werden twee nieuwe methoden toegevoegd, Object.entries() en Object.values(). De nieuwste methoden zetten het object om in een array en gebruiken vervolgens array looping methoden om over die array te itereren.
laten we beginnen met de eerste methode!
for…in Loop
De eenvoudigste en rechttoe rechtaan manier om over objecteigenschappen te herhalen is met behulp van het for...in statement. Deze methode werkt in alle moderne en oude browsers, waaronder Internet Explorer 6 en hoger.
Hier is een voorbeeld dat defor...in lus gebruikt om over een object te herhalen:
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: truehet probleem met for...in lus is dat het itereert door de eigenschappen in de prototype keten ook. Omdat de objecten in JavaScript eigenschappen van hun prototypes kunnen erven, zal het fo...in statement ook door deze eigenschappen lopen.
om itereren over prototypeeigenschappen te voorkomen tijdens het in een lus plaatsen van een object, moet u expliciet controleren of de eigenschap bij het object hoort met behulp van dehasOwnProperty() methode:
for (const key in user) { if (user.hasOwnProperty(key)) { console.log(`${key}: ${user}`); }}gelukkig hoeven we niet langer te vertrouwen op for...in en hasOwnProperty() methode om door een object te lussen. Er zijn betere manieren beschikbaar.
Object.keys () methode
de Object.keys() methode werd geïntroduceerd in ES6. Het neemt het object dat u wilt herhalen als argument en geeft een array terug die alle eigenschappen namen (of sleutels) bevat.
u kunt dan een van de array looping methoden gebruiken, zoals forEach (), om door de array te itereren en de waarde van elke eigenschap op te halen.
Hier is een voorbeeld:
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: 15In de bovenstaande functiedeclaratie gebruikte ik ES6 syntaxis. Ik neem aan dat u al bekend bent met ES6 met name arrow functies. Als je nieuw bent in ES6, neem dan een kijkje bij arrow functions guide om er meer over te weten te komen.
Object.values () Method
Het Object.de methode values () werd geïntroduceerd in ES8 en doet het tegenovergestelde van Object.key(). Het Retourneert de waarden van alle eigenschappen in het object als een array. U kunt vervolgens door de array waardes lus met behulp van een van de array looping methoden.
laten we een voorbeeld bekijken:
const animals = { tiger: '🐅', cat: '🐱', monkey: '🐒', elephant: '🐘'};// iterate over object valuesObject.values(animals).forEach(val => console.log(val));// 🐅// 🐱// 🐒// 🐘Object.entries () Method
Het Object.entries () is een andere methode die werd geïntroduceerd in ES8 en kan worden gebruikt voor het doorkruisen van een object. In tegenstelling tot Object.values() die een array van de waarden in het object maakt, produceert Object.entries() een array van arrays. Elke binnenste array heeft twee elementen. Het eerste element is de eigenschap; het tweede element is de waarde.
Hier is een voorbeeld:
const animals = { tiger: '🐅', cat: '🐱', monkey: '🐒', elephant: '🐘'};const entries = Object.entries(animals);console.log(entries);// ,// ,// ,// ]om te herhalen over de array die wordt geretourneerd door Object.entries(), kunt u de for gebruiken…van loop of de forEach () methode zoals hieronder getoond:
// `for...of` loopfor (const of Object.entries(animals)) { console.log(`${key}: ${value}`);}// `forEach()` methodObject.entries(animals).forEach(() => { console.log(`${key}: ${value}`)});conclusie
dat is alles voor itereren over objecteigenschappen in JavaScript. We hebben gekeken naar vier verschillende methoden om deze taak te volbrengen. for...in is nog steeds een goede optie als u oude browsers wilt ondersteunen. Gebruik anders gewoon een van de nieuwste methoden: Object.keys()Object.values() of Object.entries().
like vind je dit artikel leuk? Volg @attacomsian op Twitter. Je kunt me ook volgen op LinkedIn en DEV. Abonneer je op RSS Feed.
👋 als je het leuk vindt om mijn artikelen te lezen en me wilt ondersteunen om door te gaan met het maken van gratis tutorials, ☕ koop me een koffie (kost $5) .