Come iterare attraverso un oggetto chiavi e valori in JavaScript

A volte potrebbe essere necessario iterare attraverso un oggetto in JavaScript per recuperare più coppie chiave-valore. In questo articolo, esamineremo quattro diversi modi per eseguire il loop sulle proprietà dell’oggetto in JavaScript.

Prima di ES6, l’unico modo per scorrere un oggetto era il for…in loop. Il metodoObject.keys() è stato introdotto in ES6 per semplificare l’iterazione degli oggetti. Successivamente in ES8, sono stati aggiunti due nuovi metodi, Object.entries()e Object.values(). I metodi più recenti convertono l’oggetto in un array e quindi utilizzano metodi di loop array per iterare su tale array.

Iniziamo con il primo metodo!

for…in Loop

Il modo più semplice e diretto per iterare sulle proprietà dell’oggetto è utilizzando l’istruzione for...in. Questo metodo funziona in tutti i browser moderni e vecchi, tra cui Internet Explorer 6 e versioni successive.

Ecco un esempio che utilizza il ciclofor...in per iterare su un oggetto:

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

Il problema confor...in loop è che itera anche le proprietà nella catena del prototipo. Poiché gli oggetti in JavaScript possono ereditare proprietà dai loro prototipi, l’istruzionefo...in eseguirà il ciclo anche di tali proprietà.

Per evitare di iterare sulle proprietà del prototipo durante il ciclo di un oggetto, è necessario verificare esplicitamente se la proprietà appartiene all’oggetto utilizzando il metodohasOwnProperty() :

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

Fortunatamente, non abbiamo più bisogno di affidarci al metodo for...ine hasOwnProperty() per scorrere un oggetto. Ci sono modi migliori disponibili.

Oggetto.keys() Metodo

IlObject.keys() metodo è stato introdotto in ES6. Prende l’oggetto che si desidera iterare come argomento e restituisce un array contenente tutti i nomi delle proprietà (o chiavi).

È quindi possibile utilizzare uno qualsiasi dei metodi di loop dell’array, come forEach(), per scorrere l’array e recuperare il valore di ciascuna proprietà.

Ecco un esempio:

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

Nella dichiarazione di funzione sopra, ho usato la sintassi ES6. Presumo che tu abbia già familiarità con ES6 in particolare con le funzioni arrow. Se sei nuovo di ES6, dai un’occhiata alla guida alle funzioni freccia per saperne di più.

Oggetto.values () Metodo

L’oggetto.il metodo values() è stato introdotto in ES8 e fa l’opposto di Object.key(). Restituisce i valori di tutte le proprietà nell’oggetto come una matrice. È quindi possibile scorrere l’array values utilizzando uno qualsiasi dei metodi di loop dell’array.

Diamo un’occhiata ad un esempio:

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

Oggetto.voci () Metodo

L’oggetto.entries () è un altro metodo che è stato introdotto in ES8 e può essere utilizzato per attraversare un oggetto. A differenza di Object.values()che crea un array dei valori nell’oggetto,Object.entries() produce un array di array. Ogni array interno ha due elementi. Il primo elemento è la proprietà; il secondo elemento è il valore.

Ecco un esempio:

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

Per scorrere l’array restituito daObject.entries(), è possibile utilizzare for…of loop o il metodo forEach () come mostrato di seguito:

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

Conclusione

Questo è tutto per iterare sulle proprietà dell’oggetto in JavaScript. Abbiamo esaminato quattro diversi metodi per realizzare questo compito. for...in è ancora una buona opzione se si desidera supportare i vecchi browser. Altrimenti, basta usare uno dei metodi più recenti:Object.keys()Object.values() oObject.entries().

✌️ Ti piace questo articolo? Segui @ attacomsian su Twitter. Puoi anche seguirmi su LinkedIn e DEV. Iscriviti al feed RSS.

👋 Se ti piace leggere i miei articoli e vuoi supportarmi per continuare a creare tutorial gratuiti, Buy Comprami un caffè (costo 5 5) .