Hur man itererar genom en objektnycklar och värden i JavaScript

Ibland kan du behöva iterera genom ett objekt i JavaScript för att hämta flera nyckelvärdespar. I den här artikeln kommer vi att titta på fyra olika sätt att looping över objektegenskaper i JavaScript.

före ES6 var det enda sättet att slinga genom ett objekt for…in loop. MetodenObject.keys() introducerades i ES6 för att göra det lättare att iterera över objekt. Senare i ES8 lades två nya metoder till, Object.entries()och Object.values(). De nyaste metoderna konverterar objektet till en array och använder sedan array looping-metoder för att iterera över den arrayen.

låt oss börja med den första metoden!

for…in Loop

det enklaste och enkla sättet att iterera över objektegenskaper är att använda for...in uttalande. Denna metod fungerar i alla moderna och gamla webbläsare inklusive Internet Explorer 6 och högre.

här är ett exempel som använderfor...in loop för att iterera över ett 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 är att det itererar genom egenskaperna i prototypkedjan också. Eftersom objekten i JavaScript kan ärva egenskaper från sina prototyper, kommerfo...in – uttalandet också att gå igenom dessa egenskaper.

för att undvika att iterera över prototypegenskaper när du loopar ett objekt måste du uttryckligen kontrollera om egenskapen tillhör objektet med hjälp av hasOwnProperty() – metoden:

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

lyckligtvis behöver vi inte längre förlita oss påfor...in ochhasOwnProperty() metod för att slinga genom ett objekt. Det finns bättre sätt tillgängliga.

objekt.nycklar () metod

Object.keys() metod introducerades i ES6. Det tar objektet som du vill upprepa som ett argument och returnerar en matris som innehåller alla egenskapsnamn (eller nycklar).

Du kan sedan använda någon av array looping-metoderna, till exempel forEach(), för att iterera genom arrayen och hämta värdet på varje egenskap.

Här är ett exempel:

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 ovanstående funktionsdeklaration använde jag ES6-syntax. Jag antar att du redan är bekant med ES6 speciellt pilfunktioner. Om du är ny på ES6, ta en titt på arrow functions guide för att lära dig mer om det.

objekt.värden () metod

objektet.värden () metod infördes i ES8 och det gör motsatsen till Object.key(). Den returnerar värdena för alla egenskaper i objektet som en matris. Du kan sedan loop genom värdena array genom att använda någon av array looping metoder.

låt oss titta på ett exempel:

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

objekt.poster () metod

objektet.poster () är en annan metod som introducerades i ES8 och kan användas för att korsa ett objekt. Till skillnad från Object.values() som skapar en matris av värdena i objektet, Object.entries() producerar en rad arrayer. Varje inre matris har två element. Det första elementet är egenskapen; det andra elementet är värdet.

Här är ett exempel:

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

för att iterera över matrisen som returneras av Object.entries() kan du antingen använda for…av loop eller forEach () – metoden som visas nedan:

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

slutsats

det är allt för att iterera över objektegenskaper i JavaScript. Vi tittade på fyra olika metoder för att utföra denna uppgift. for...in är fortfarande ett bra alternativ om du vill stödja gamla webbläsare. Annars använder du bara någon av de senaste metoderna: Object.keys()Object.values() eller Object.entries().

gillar du den här artikeln? Följ @attacomsian på Twitter. Du kan också följa mig på LinkedIn och DEV. Prenumerera på RSS-flöde.

om du gillar att läsa mina artiklar och vill stödja mig att fortsätta Skapa gratis tutorials, köpa mig en kaffe (kostnad $5) .