Cum să iterați printr-un obiect chei și valori în JavaScript

uneori poate fi necesar să iterați printr-un obiect în JavaScript pentru a prelua mai multe perechi cheie-valoare. În acest articol, ne vom uita la patru moduri diferite de looping peste proprietățile obiectului în JavaScript.

înainte de ES6, singura modalitate de a trece printr-un obiect era for…in buclă. Metoda Object.keys() a fost introdusă în ES6 pentru a facilita iterarea obiectelor. Mai târziu în ES8, au fost adăugate două metode noi, Object.entries() și Object.values(). Cele mai noi metode convertesc obiectul într-o matrice și apoi utilizați metode de buclă de matrice pentru a itera peste acea matrice.

să începem cu prima metodă!

for…in buclă

cel mai simplu și simplu mod de a itera peste proprietățile obiectului este prin utilizareafor...in declarație. Această metodă funcționează în toate browserele moderne și vechi, inclusiv Internet Explorer 6 și versiuni ulterioare.

Iată un exemplu care folosește buclafor...in pentru a itera peste un obiect:

const user = { name: 'John Doe', email: '[email protected]', age: 25, dob: '08/02/1989', active: true};// iterate over the user objectfor (const key in user) { console.log(`${key}: ${user}`);}// name: John Doe// email: [email protected]// age: 25// dob: 08/02/1989// active: true

problema cufor...in bucla este că iterează prin proprietățile din lanțul prototip, de asemenea. Deoarece obiectele din JavaScript pot moșteni proprietăți din prototipurile lor ,instrucțiuneafo...in va trece și prin aceste proprietăți.

pentru a evita iterarea proprietăților prototipului în timpul buclării unui obiect, trebuie să verificați în mod explicit dacă proprietatea aparține obiectului utilizând metoda hasOwnProperty() :

for (const key in user) { if (user.hasOwnProperty(key)) { console.log(`${key}: ${user}`); }}

Din fericire, nu mai trebuie să ne bazăm pefor...in șihasOwnProperty() metoda de buclă printr-un obiect. Există modalități mai bune disponibile.

obiect.metoda keys ()

metodaObject.keys() a fost introdusă în ES6. Este nevoie de obiectul pe care doriți să-l iterați ca argument și returnează o matrice care conține toate numele proprietăților (sau cheile).

puteți utiliza oricare dintre metodele de looping matrice, cum ar fi forEach(), pentru a itera prin matrice și de a prelua valoarea fiecărei proprietăți.

Iată un exemplu:

const courses = { java: 10, javascript: 55, nodejs: 5, php: 15};// convert object to key's arrayconst keys = Object.keys(courses);// print all keysconsole.log(keys);// // iterate over objectkeys.forEach((key, index) => { console.log(`${key}: ${courses}`);});// java: 10// javascript: 55// nodejs: 5// php: 15

în declarația funcției de mai sus, am folosit sintaxa ES6. Presupun că sunteți deja familiarizați cu ES6 în special funcțiile săgeată. Dacă sunteți nou la ES6, să ia o privire la arrow funcții ghid pentru a afla mai multe despre el.

obiect.valori () metoda

obiectul.metoda values () a fost introdusă în ES8 și face opusul Object.key(). Returnează valorile tuturor proprietăților din obiect ca matrice. Apoi puteți bucla prin matricea de valori utilizând oricare dintre metodele de buclă a matricei.

să ne uităm la un exemplu:

const animals = { tiger: '🐅', cat: '🐱', monkey: '🐒', elephant: '🐘'};// iterate over object valuesObject.values(animals).forEach(val => console.log(val));// 🐅// 🐱// 🐒// 🐘

obiect.intrări () metoda

obiectul.intrări() este o altă metodă care a fost introdusă în ES8 și poate fi utilizată pentru traversarea unui obiect. Spre deosebire deObject.values() care creează o matrice a valorilor din obiect,Object.entries() produce o matrice de matrice. Fiecare matrice interioară are două elemente. Primul element este proprietatea; al doilea element este valoarea.

Iată un exemplu:

const animals = { tiger: '🐅', cat: '🐱', monkey: '🐒', elephant: '🐘'};const entries = Object.entries(animals);console.log(entries);// ,// ,// ,// ]

pentru a itera peste matrice returnate de Object.entries(), puteți utiliza fie pentru…de buclă sau forEach() metoda așa cum se arată mai jos:

// `for...of` loopfor (const of Object.entries(animals)) { console.log(`${key}: ${value}`);}// `forEach()` methodObject.entries(animals).forEach(() => { console.log(`${key}: ${value}`)});

concluzie

asta e tot pentru iterarea peste proprietățile obiectului în JavaScript. Am analizat patru metode diferite pentru a îndeplini această sarcină. for...in este încă o opțiune bună dacă doriți să suportați browserele vechi. În caz contrar, utilizați oricare dintre cele mai recente metode: Object.keys()Object.values() sau Object.entries().

ca acest articol? Urmați @ attacomsian pe Twitter. De asemenea, mă puteți urmări pe LinkedIn și DEV. Aboneaza-te la RSS Feed.

dacă vă place să citiți articolele mele și doriți să mă sprijiniți pentru a continua să creați tutoriale gratuite, îmi cumpărați o cafea (costă 5 USD) .