JavaScript è uno dei linguaggi di programmazione che ti permette di iterare sulle proprietà degli oggetti senza usare alcuno strumento complesso o API.
In questo articolo, esploreremo come questa semplice tecnica si è evoluta negli anni e perché abbiamo qualcosa ora, che può essere classificato come elegante!
Diamo un’occhiata al codice sottostante e poi possiamo parlare ulteriormente
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
Molti di noi si perdono il controllo obj.hasOwnProperty
In JavaScript, quando si itera, è molto critico evitare l’iterazione sulle proprietà dei genitori dell’oggetto (e le sue proprietà dei genitori e i suoi genitori…Avete capito bene!). La mancanza di questo controllo può risultare in un codice lento.
Per fortuna, la maggior parte di noi lavora con qualche tipo di strumento di linting che darà un avvertimento se si manca questo controllo.
Moderno modo – Iterazione in ES6+
Ora passiamo al JavaScript moderno o ES6+!
Riconoscendo questo problema, il team ECMA ha aggiunto il supporto per la semplice iterazione in ES6.
E inizia con – Object.entries()
Il metodo
Object.entries()restituisce un array di coppie di proprietà enumerabili di un dato oggetto, nello stesso ordine di quello fornito da un ciclo for…in (la differenza è che un ciclo for-in enumera anche le proprietà nella catena dei prototipi).
Per esempio, il codice seguente
const obj = {
a: 1,
b: 2,
c: 3
};
console.log(Object.entries(obj));
darà un output come sotto, Un array di array di due elementi, dove a indice: 0, avremo la chiave e all’indice:1, avremo il valore
Ora questa semplice funzione porterà ad un’elegante iterazione di Object, controlla il codice sottostante.
Step 1: Inizia con `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
È già stato buono, ma rendiamolo fantastico
Step 2: Usare la distruzione
Comprendiamo la “voce” se aggiorniamo il precedente ciclo for come sotto
...for (const entry of Object.entries(obj)) {
console.log(entry);
}
l’output sarà come sotto
Hmm….cosa abbiamo qui?
Bene, ogni voce è un Array con esattamente due elementi (chiamatela ‘tupla’), quindi usando la destrutturazione dell’Array ES6, possiamo scrivere codice come
const entry = ;
const = entry;
console.log(`key: ${key} : value: ${value}`);
Applichiamo lo stesso concetto al ciclo for
const obj = {
a: 1,
b: 2,
c: 3
};for (const of Object.entries(obj)) {
console.log(`${key} : ${value}`);
}
Woohoo… è davvero fantastico!
Iterazione con forEach
Vuoi applicare la stessa tecnica alle funzioni integrate Array, prova il codice seguente
const obj = {
a: 1,
b: 2,
c: 3
};
Object.entries(obj).forEach(() => {
console.info(`${key} : ${value}`);
});
Output:
a : 1
b : 2
c : 3