JavaScript je jedním z programovacích jazyků, který umožňuje iterovat po vlastnostech objektů bez použití složitých nástrojů nebo API.

V tomto článku se budeme zabývat tím, jak se tato jednoduchá technika v průběhu let vyvíjela a proč máme nyní něco, co lze označit za elegantní!

Podívejme se na níže uvedený kód a pak si můžeme povídat dál

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

Výstup:

a : 1
b : 2
c : 3

Mnoho z nás vynechá kontrolu obj.hasOwnProperty

V JavaScriptu je při iteraci velmi důležité vyhnout se iteraci nadřazených vlastností Objektu( a jeho nadřazených vlastností a jeho nadřazených vlastností…Chápete!). Vynechání může mít za následek zpomalení kódu.

Naštěstí většina z nás pracuje s nějakým lintovacím nástrojem, který vás při vynechání této kontroly upozorní.

Moderní způsob – Iterace v ES6+

Nyní se přesuňme k modernímu JavaScriptu neboli ES6+!

Vzhledem k tomuto problému přidal tým ECMA podporu pro jednoduchou iteraci v ES6.

A začíná to – Object.entries()

Metoda Object.entries() vrací pole vlastních vyjmenovatelných dvojic vlastností daného objektu , a to ve stejném pořadí, jaké poskytuje cyklus for…in (s tím rozdílem, že cyklus for-in vyjmenovává vlastnosti i v řetězci prototypů).

Například níže uvedený kód

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

dá výstup jako níže, Pole pole dvou prvků, kde na indexu: 0, budeme mít klíč a na indexu:1, budeme mít hodnotu

Nyní tato jednoduchá funkce povede k elegantní iteraci Object, podívejte se na následující kód.

Krok 1: Začněte s `Object.entries`

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

Výstup:

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

Už to bylo dobré, ale udělejme to úžasné

Krok 2: Použijte destrukci

Pochopme „vstup“, pokud výše uvedenou smyčku for aktualizujeme takto

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

výstup bude vypadat takto

Hmm…..co tu máme?“

No, každá položka je pole s přesně dvěma prvky (říkejme tomu „tuple“), takže pomocí ES6 Array destructuring můžeme napsat kód jako

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

Použijeme stejný koncept na smyčku for

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

Woohoo… to je opravdu Úžasné!

Iterace pomocí forEach

Chcete-li stejnou techniku použít na vestavěné funkce Array, zkuste níže uvedený kód

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

Výstup:

a : 1
b : 2
c : 3

Děkuji!