JavaScript är ett av de programmeringsspråk där du kan iterera på objektegenskaper utan att använda något komplicerat verktyg eller API.

I den här artikeln kommer vi att utforska hur den här enkla tekniken har utvecklats under åren och varför vi nu har något som kan klassificeras som elegant!

Låt oss ta en titt på nedanstående kod och sedan kan vi prata vidare

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);
}
}

Output:

a : 1
b : 2
c : 3

Många av oss missar kontrollen obj.hasOwnProperty

I JavaScript, när du itererar, är det mycket kritiskt att undvika iteration på Objekts föräldraegenskaper (och dess föräldraegenskaper och dess förälder… Du har fattat tanken!). Missing kan resultera i en långsam kod.

Troligtvis arbetar de flesta av oss med någon form av linting-verktyg som ger en varning om du missar denna kontroll.

Modernt sätt – Iteration i ES6+

Nu går vi över till modernt JavaScript eller ES6+!

Ecma-teamet har erkänt detta problem och lagt till stöd för enkel iteration i ES6.

Och det börjar med – Object.entries()

Metoden Object.entries() returnerar en array av ett givet objekts egna uppräkningsbara egenskapspar , i samma ordning som den som tillhandahålls av en for…in-slinga (skillnaden är att en for-in-slinga även räknar upp egenskaper i prototypkedjan).

Till exempel kommer nedanstående kod

const obj = {
a: 1,
b: 2,
c: 3
};
console.log(Object.entries(obj));

att ge en utdata som nedan, En array av arrayer med två element, där vid index: 0, kommer vi att ha nyckel och vid index:1, kommer vi att ha värde

Nu kommer denna enkla funktion att leda till en elegant iteration av Object, kolla in nedanstående kod.

Steg 1: Börja med `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

Det har redan varit bra, men låt oss göra det fantastiskt

Steg 2: Om vi uppdaterar ovanstående for-slinga enligt nedan

...for (const entry of Object.entries(obj)) {
console.log(entry);
}

blir resultatet som nedan

Hmm….Vad har vi här?

Varje post är en Array med exakt två element (kalla det ”tupel”), så med hjälp av ES6 Array destructuring kan vi skriva kod som

const entry = ;
const = entry;
console.log(`key: ${key} : value: ${value}`);

Låt oss tillämpa samma koncept på for-slingan

const obj = {
a: 1,
b: 2,
c: 3
};for (const of Object.entries(obj)) {
console.log(`${key} : ${value}`);
}

Woohoo… det är verkligen häftigt!

Iteration med forEach

Vill du tillämpa samma teknik på Array inbyggda funktioner, prova nedanstående kod

const obj = {
a: 1,
b: 2,
c: 3
};
Object.entries(obj).forEach(() => {
console.info(`${key} : ${value}`);
});

Output:

a : 1
b : 2
c : 3

Tack!