for…in ciclo

Il for…in l’istruzione loop può essere utilizzata per iterare su tutte le proprietà enumerabili di un oggetto non-Symbol.

Oggetto.keys

Il metodoObject.keys() restituisce un array di chiavi Oggetto. Questo crea un array che contiene le proprietà dell’oggetto. È quindi possibile scorrere l’array per ottenere le chiavi e i valori necessari.

Oggetto.valori

Il metodoObject.values() restituisce un array di valori di Oggetti. Questo crea un array che contiene le proprietà dell’oggetto. È quindi possibile scorrere l’array per ottenere i valori necessari.

Oggetto.getOwnPropertyNames

Il metodoObject.getOwnPropertyNames() restituisce un array di tutte le proprietà (incluse le proprietà non enumerabili ad eccezione di quelle che utilizzano Symbol) trovate direttamente in un determinato oggetto. Questo crea un array che contiene le proprietà dell’oggetto. È quindi possibile scorrere l’array per ottenere le chiavi e i valori necessari.

Oggetto.voci

Il metodoObject.entries()restituisce una matrice di una proprietà enumerabile di un determinato oggetto coppie.

Confronto delle prestazioni

Ora testiamo tutte queste tecniche e confrontiamo ognuna in base alla loro velocità e prestazioni per determinare quale è più veloce.

La maggior parte dei browser come Chrome e Firefox implementa tempi ad alta risoluzione in performance.now(). Il metodoperformance.now() restituisce un DOMHighResTimeStamp, misurato in millisecondi.

Utilizzo

let start = performance.now();// code to be timed...let duration = performance.now() - start;

iniziamo le prove…

i Risultati del Test

Secondo i nostri test, ecco i risultati in ordine crescente;

╔═══════════╦════════════════════════════╦═════════════════════════╗
║ Rank ║ Technique ║ Time(ms) ║
╠═══════════╬════════════════════════════╬═════════════════════════╣
║ 1 ║ for...in loop ║ 0.8450000023003668 ms ║
║ 2 ║ Object.keys ║ 1.32499999017 ms ║
║ 3 ║ Object.entries ║ 1.63499999326 ms ║
║ 4 ║ Object.values ║ 2.05499998992 ms ║
║ 5 ║ Object.getOwnPropertyNames ║ 2.12500002817 ms ║
╚═══════════╩════════════════════════════╩═════════════════════════╝

Quindi, in base a questi risultati, il modo più veloce per scorrere gli Oggetti JavaScript è per…in loop. Ora, questo non significa che gli altri metodi siano vuoti o inutili, tutto dipende dai casi d’uso.

Il problema con un ciclo for...in è che itera attraverso le proprietà nella catena del prototipo. Itera sulle proprietà dell’oggetto. Gli array Javascript sono solo un tipo specifico di oggetto con alcune proprietà utili che ti aiutano a trattarli come array, ma hanno ancora proprietà dell’oggetto interno e non intendi iterare su questi. for...initera anche su tutte le proprietà enumerabili e non solo sugli elementi dell’array. Questo può anche portare a risultati inaspettati.

Quando si esegue il ciclo di un oggetto con il ciclo for...in, è necessario verificare se la proprietà appartiene all’oggetto. Puoi farlo con hasOwnProperty.

Un modo migliore e più efficiente per scorrere gli oggetti in ES6 è convertire prima l’oggetto in un array usandoObject.keys()Object.values()Object.getOwnPropertyNamesoObject.entries(). Quindi si passa attraverso l’array per ottenere le chiavi e i valori.