Hogyan lehet Iterálni egy objektum billentyűk és értékek JavaScript

néha szükség lehet iterálni egy objektumon keresztül JavaScript letölteni több kulcs-érték párokat. Ebben a cikkben négy különböző módszert fogunk megvizsgálni az objektum tulajdonságainak hurkolására a JavaScriptben.

előtt ES6, az egyetlen módja annak, hogy hurok egy objektum volt a for…in hurok. AObject.keys() módszert az ES6-ban vezették be, hogy megkönnyítse az objektumok iterációját. Később az ES8-ban két új módszert adtak hozzá: Object.entries()és Object.values(). A legújabb módszerek átalakítani az objektumot egy tömb, majd használja tömb looping módszerek iterálni az adott tömb.

kezdjük az első módszerrel!

for…in Loop

az objektum tulajdonságai közötti iteráció legegyszerűbb és legegyszerűbb módja a for...in utasítás használata. Ez a módszer működik minden modern és régi böngészők, beleértve az Internet Explorer 6 vagy újabb.

itt van egy példa, amely a for...in hurkot használja egy objektum felett:

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

a for...in hurok problémája az, hogy a prototípus lánc tulajdonságain keresztül is megismétlődik. Mivel a JavaScript-ben lévő objektumok a prototípusaiktól örökölhetik a tulajdonságokat, afo...in utasítás ezen tulajdonságok között is hurok lesz.

annak elkerülése érdekében, hogy egy objektum hurkolása közben a prototípus tulajdonságai ne ismétlődjenek meg, kifejezetten ellenőriznie kell, hogy a tulajdonság az objektumhoz tartozik-e a hasOwnProperty() módszer használatával:

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

szerencsére már nem kell a for...in és hasOwnProperty() módszerre támaszkodnunk egy objektumon keresztül történő hurkoláshoz. Vannak jobb módszerek.

objektum.keys () Method

theObject.keys() method was introduced in ES6. A kívánt objektumot argumentumként iterálja, majd egy tömböt ad vissza, amely tartalmazza az összes tulajdonságnevet (vagy kulcsot).

ezután bármelyik tömb hurkolási metódust, például forEach () – ot használhatja a tömbben való iterációhoz és az egyes tulajdonságok értékének lekéréséhez.

itt van egy példa:

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

a fenti függvénynyilatkozatban ES6 szintaxist használtam. Feltételezem, hogy már ismeri az ES6-ot, különösen a nyíl funkciókat. Ha még nem ismeri az ES6-ot, vessen egy pillantást a nyíl funkciók útmutatójára, hogy megismerje.

objektum.értékek () módszer

Az objektum.a values() metódust az ES8-ban vezették be, és a Object.key()ellenkezőjét teszi. Az objektum összes tulajdonságának értékét tömbként adja vissza. Ezután hurok keresztül az értékek tömb segítségével bármelyik tömb hurok módszerek.

nézzünk meg egy példát:

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

objektum.bejegyzések () módszer

Az objektum.az entries() egy másik módszer, amelyet az ES8-ban vezettek be, és egy objektum áthaladására használható. A Object.values() – tól eltérően, amely az objektum értékeinek tömbjét hozza létre, a Object.entries() tömböket hoz létre. Minden belső tömb két elemet tartalmaz. Az első elem a tulajdonság; a második elem az érték.

itt egy példa:

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

a Object.entries() által visszaadott tömb ismétléséhez használhatja a for…a loop vagy a forEach() módszer az alábbiak szerint:

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

következtetés

Ez mind a JavaScript objektum tulajdonságainak iterálására szolgál. Négy különböző módszert vizsgáltunk a feladat elvégzéséhez. for...in még mindig jó lehetőség, ha támogatni szeretné a régi böngészőket. Ellenkező esetben csak használja a legújabb módszereket: Object.keys()Object.values() vagy Object.entries().

️ ️ mint ez a cikk? Kövesse @attacomsian a Twitteren. A LinkedInen és a DEV-en is követhetsz. Feliratkozás RSS Feed.

👋 Ha szívesen olvasod a cikkeimet, és támogatni akarsz, hogy folytassam az ingyenes oktatóanyagok készítését, ☕ vegyél nekem egy kávét (5 dollárba kerül) .