JavaScript er et af de programmeringssprog, som lader dig iterere på objektegenskaber uden at bruge et komplekst værktøj eller API.

I denne artikel vil vi undersøge, hvordan denne enkle teknik har udviklet sig gennem årene, og hvorfor vi nu har noget, som kan betegnes som elegant!

Lad os tage et kig på nedenstående kode, og så kan vi tale videre

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

Mange af os overser kontrollen obj.hasOwnProperty

I JavaScript, når du itererer, er det meget kritisk at undgå iteration på Object’s parent properties( og det er parent properties og det er parent properties og det er parent…You got the idea!). Manglende kan resultere i en langsom kode.

Gluksomt nok arbejder de fleste af os med en form for linting-værktøj, som vil give en advarsel, hvis du misser denne kontrol.

Moderne måde – Iteration i ES6+

Nu skal vi gå over til moderne JavaScript eller ES6+!

I erkendelse af dette problem har ECMA-holdet tilføjet understøttelse af simpel iteration i ES6.

Og det starter med – Object.entries()

Metoden Object.entries() returnerer et array af et givet objekts egne optællelige egenskabs -par, i samme rækkefølge som den, der leveres af en for…in-løkke (forskellen er, at en for-in-løkke også optæller egenskaber i prototypekæden).

For eksempel vil nedenstående kode

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

give output som nedenfor, Et array af arrays med to elementer, hvor der ved index: 0, vil vi have nøgle og ved indeks:1, vil vi have værdi

Nu vil denne simple funktion føre til en elegant iteration af Object, tjek nedenstående kode.

Stræk 1: Start 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 allerede været godt, men lad os gøre det fantastisk

Stræk 2: Brug Destructing

Lad os forstå “indgang”, hvis vi opdaterer ovenstående for loop som nedenfor

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

udgangen vil være som nedenfor

Hmm….Hvad har vi her?

Jamen, hver post er en Array med præcis to elementer (kald det “tuple”), så ved hjælp af ES6 Array destrukturering kan vi skrive kode som

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

Lad os anvende det samme koncept på for loop

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

Woohoo… det er virkelig Awesome!

Iteration med forEach

Vil du anvende den samme teknik på Array indbyggede funktioner, så prøv nedenstående kode

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

Output:

a : 1
b : 2
c : 3

Tak!