A JavaScript az egyik olyan programozási nyelv, amely lehetővé teszi az objektum tulajdonságain való iterálást bármilyen komplex eszköz vagy API használata nélkül.

Ebben a cikkben azt fogjuk megvizsgálni, hogyan fejlődött ez az egyszerű technika az évek során, és miért van most valami, ami elegánsnak minősíthető!

Nézzük meg az alábbi kódot, és utána beszélhetünk tovább

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

Kimenet:

a : 1
b : 2
c : 3

Sokunkból kimarad az ellenőrzés obj.hasOwnProperty

A JavaScriptben, amikor iterálunk, nagyon fontos, hogy elkerüljük az Object’s parent properties( and it’s parent properties and it’s parent…You got the idea!) iterációt. Ennek kihagyása lassú kódot eredményezhet.

Szerencsére a legtöbbünk valamilyen linting eszközzel dolgozik, ami figyelmeztetést ad, ha kihagyod ezt az ellenőrzést.

Modern módon – Iteráció az ES6+-ban

Most térjünk át a modern JavaScriptre vagy az ES6+-ra!

Az ECMA-csapat felismerve ezt a problémát, hozzáadta az egyszerű iteráció támogatását az ES6-ban.

És ez úgy kezdődik, hogy – Object.entries()

A Object.entries() módszer egy adott objektum saját felsorolható tulajdonságainak párjaiból álló tömböt ad vissza, ugyanabban a sorrendben, mint amit egy for…in ciklus biztosít (a különbség az, hogy a for-in ciklus a prototípus-láncban lévő tulajdonságokat is felsorolja).

Az alábbi kód

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

például az alábbi kimenetet fogja adni: An array of array of two elements, where at index: 0, lesz kulcs és az index:1, lesz érték

Most ez az egyszerű függvény az Object elegáns iterációjához vezet, nézzük meg az alábbi kódot.

1. lépés: Kezdjük az `Object.entries`

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

Kimenet:

key: a : value: 1
key: b : value: 2
key: c : value: 3

Ez már eddig is jó volt, de tegyük félelmetesebbé

2. lépés: Használjuk a Destructingot

Megértjük a “belépést”, ha a fenti for loopot az alábbiak szerint frissítjük

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

a kimenet az alábbi lesz

Hmm…..mi van itt?

Nos, minden egyes bejegyzés egy Array pontosan két elemmel (nevezzük ‘tuple’-nek), így az ES6 Array destructuring használatával ilyen kódot írhatunk

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

Let’s apply the same concept on for loop

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

Woohoo… it is indeed Awesome!

Iteráció a forEach segítségével

Ha ugyanezt a technikát szeretnénk alkalmazni az Array beépített függvényekre, próbáljuk ki az alábbi kódot

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

Kimenet:

a : 1
b : 2
c : 3

Köszönjük!

Miért?