JavaScript on yksi niistä ohjelmointikielistä, joiden avulla voit iteroida objektin ominaisuuksia ilman monimutkaisia työkaluja tai API:ta.

Tässä artikkelissa selvitämme, miten tämä yksinkertainen tekniikka on kehittynyt vuosien varrella ja miksi meillä on nyt jotakin, joka voidaan luokitella elegantiksi!

Katsotaanpa alla olevaa koodia ja sitten voimme puhua lisää

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

Tulos:

a : 1
b : 2
c : 3

Monet meistä unohtavat tarkistuksen obj.hasOwnProperty

Javaskriptissä, kun iteroit, on hyvin kriittistä välttää iterointia objektin vanhempien ominaisuuksilla( ja sen vanhempien ominaisuuksilla ja sen vanhemmalla… Ymmärrät kyllä!). Puuttuminen voi johtaa hitaaseen koodiin.

Onneksi useimmat meistä työskentelevät jonkinlaisella linting-työkalulla, joka antaa varoituksen, jos tämä tarkistus jää tekemättä.

Moderni tapa – Iteraatio ES6+:ssa

Siirrymme nyt moderniin JavaScriptiin eli ES6+:aan!

Tämän ongelman huomioiden ECMA:n tiimi on lisännyt tuen yksinkertaiselle iteraatiolle ES6:ssa.

Ja se alkaa – Object.entries()

Metodi Object.entries()palauttaa tietyn objektin omien lueteltavien ominaisuuksien parien joukon Object.entries() samassa järjestyksessä kuin for…in-silmukan tarjoama järjestys (erona on se, että for-in-silmukka luettelee ominaisuuksia myös prototyyppiketjussa).

Alhaalla oleva

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

koodi

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

antaisi tulosteen alla olevan kaltaisena: An array of array of arrays of two elements of, where at index: 0, meillä on avain ja indeksissä:1, meillä on arvo

Nyt tämä yksinkertainen funktio johtaa tyylikkääseen Objectin iterointiin, katso alla oleva koodi.

Vaihe 1: Aloita `Object.entries`

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

Tulos:

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

Se oli jo hyvä, mutta tehdään siitä mahtava

Vaihe 2: Käytä Destructingia

Ymmärretäänpä ”tulo”, jos päivitämme yllä olevan for-silmukan alla olevaan tapaan

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

Tulos on alla oleva

Hmm…..mitä meillä on tässä?

Noh, jokainen merkintä on Array, jossa on tasan kaksi elementtiä (kutsutaan sitä ’tuplaksi’), joten käyttämällä ES6 Array destrukturointia, voimme kirjoittaa koodia kuten

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

Sovelletaan samaa konseptia for-silmukkaan

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

Woohoo… se on todellakin Awesome!

Iteraatio forEach:lla

Tahdotko soveltaa samaa tekniikkaa Array:n sisäänrakennettuihin funktioihin, kokeile alla olevaa koodia

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

Tulos:

a : 1
b : 2
c : 3

Kiitos!