JavaScript este unul dintre limbajele de programare care vă permite să iterați pe proprietățile obiectelor fără a utiliza un instrument complex sau API.
În acest articol, vom explora modul în care această tehnică simplă a evoluat de-a lungul anilor și de ce avem ceva acum, care poate fi clasificat ca fiind elegant!
Să aruncăm o privire asupra codului de mai jos și apoi putem vorbi mai departe
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
Multora dintre noi le scapă verificarea obj.hasOwnProperty
În JavaScript, atunci când iterați, este foarte important să evitați iterația pe proprietățile părintești ale Obiectului( și proprietățile părintești ale acestuia și ale părintelui său…Ați prins ideea!). Lipsa poate avea ca rezultat un cod lent.
Din fericire, majoritatea dintre noi lucrează cu un fel de instrument de linting care va da un avertisment dacă nu faceți această verificare.
Modern way – Iteration in ES6+
Acum să trecem la JavaScript modern sau ES6+!
Recunoscând această problemă, echipa ECMA a adăugat suport pentru iterația simplă în ES6.
Și începe cu – Object.entries()
Metoda
Object.entries()returnează un array de perechi de proprietăți enumerabileale unui obiect dat, în aceeași ordine ca cea furnizată de o buclă for…in (diferența fiind că o buclă for-in enumeră proprietățile și în lanțul prototipului).
De exemplu, codul de mai jos
const obj = {
a: 1,
b: 2,
c: 3
};
console.log(Object.entries(obj));
va da o ieșire ca mai jos, An array of arrays of arrays of two elements, where at index: 0, vom avea cheia și la indexul:1, vom avea valoarea
Acum, această funcție simplă va duce la o iterație elegantă a obiectului, verificați codul de mai jos.
Pasul 1: Începeți cu `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
A fost deja bun, dar haideți să-l facem minunat
Pasul 2: Folosiți distrugerea
Să înțelegem „intrarea” dacă actualizăm bucla for de mai sus ca mai jos
...for (const entry of Object.entries(obj)) {
console.log(entry);
}
la ieșire va fi ca mai jos
Hmm….ce avem aici?
Bine, fiecare intrare este un Array cu exact două elemente (numiți-o ‘tuple’), deci folosind destructurarea Array din ES6, putem scrie un cod ca
const entry = ;
const = entry;
console.log(`key: ${key} : value: ${value}`);
Să aplicăm același concept la bucla for
const obj = {
a: 1,
b: 2,
c: 3
};for (const of Object.entries(obj)) {
console.log(`${key} : ${value}`);
}
Woohoo… este într-adevăr Awesome!
Iterarea cu forEach
Vreți să aplicați aceeași tehnică pe funcțiile încorporate în Array, încercați codul de mai jos
const obj = {
a: 1,
b: 2,
c: 3
};
Object.entries(obj).forEach(() => {
console.info(`${key} : ${value}`);
});
Scoaterea:
a : 1
b : 2
c : 3