JavaScript jest jednym z języków programowania, który pozwala na iterację po właściwościach obiektów bez użycia żadnego skomplikowanego narzędzia lub API.

W tym artykule, zamierzamy zbadać, jak ta prosta technika ewoluowała przez lata i dlaczego mamy teraz coś, co może być sklasyfikowane jako eleganckie!

Przyjrzyjmy się poniższemu kodowi i wtedy możemy mówić dalej

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

Wyjście:

a : 1
b : 2
c : 3

Wielu z nas pomija sprawdzanie obj.hasOwnProperty

W JavaScript, kiedy wykonujesz iterację, bardzo ważne jest, aby unikać iteracji na właściwościach rodzica obiektu (i jego właściwościach rodzica i jego rodzica… Masz pomysł!). Brak może skutkować powolnym kodem.

Na szczęście większość z nas pracuje z jakimś rodzajem narzędzia lintingowego, które da ostrzeżenie, jeśli przegapisz to sprawdzenie.

Nowoczesny sposób – Iteracja w ES6+

Teraz przejdźmy do nowoczesnego JavaScriptu lub ES6+!

Poznając ten problem, zespół ECMA dodał wsparcie dla prostej iteracji w ES6.

I zaczyna się od – Object.entries()

Metoda Object.entries()zwraca tablicę własnych enumerowalnych właściwości danego obiektu parami, w takiej samej kolejności jak ta dostarczana przez pętlę for…in (z tą różnicą, że pętla for-in wylicza również właściwości w łańcuchu prototypów).

Na przykład, poniższy kod

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

daje wyjście jak poniżej, Tablica tablic dwóch elementów, gdzie przy indeksie: 0, będziemy mieli klucz, a przy indeksie:1, będziemy mieli wartość

Teraz ta prosta funkcja doprowadzi do eleganckiej iteracji Object, sprawdź poniższy kod.

Krok 1: Zacznij od `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

To już było dobre, ale zróbmy to niesamowite

Krok 2: Use Destructing

Zrozummy „wejście” jeśli zaktualizujemy powyższą pętlę for jak poniżej

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

wyjście będzie jak poniżej

Hmm….co my tu mamy?

Cóż, każdy wpis jest tablicą z dokładnie dwoma elementami (nazwijmy to 'tuple’), więc używając ES6 Array destructuring, możemy napisać kod jak

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

Zastosujmy tę samą koncepcję na pętli for

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

Woohoo… to jest naprawdę niesamowite!

Iteracja z forEach

Chcesz zastosować tę samą technikę do wbudowanych funkcji tablicy, spróbuj poniższego kodu

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

Wyjście:

a : 1
b : 2
c : 3

Dziękuję!