Articles

itereren door JavaScript-objecten – 5 technieken en prestatietesten.

for…in loop

De for…in lus statement kan worden gebruikt om te herhalen over alle niet-symbool, enumerable eigenschappen van een object.

Object.keys

de Object.keys() methode geeft een array van Objectsleutels terug. Hiermee wordt een array gemaakt die de eigenschappen van het object bevat. U kunt dan lus door de array om de sleutels en waarden die u nodig hebt te krijgen.

Object.waarden

de Object.values() methode geeft een array van Objectwaarden terug. Hiermee wordt een array gemaakt die de eigenschappen van het object bevat. U kunt dan lus door de array om de waarden die u nodig hebt te krijgen.

Object.getOwnPropertyNames

de Object.getOwnPropertyNames() methode geeft een array terug van alle eigenschappen (inclusief niet-enumerable eigenschappen behalve die welke symbool gebruiken) die direct in een bepaald object gevonden worden. Hiermee wordt een array gemaakt die de eigenschappen van het object bevat. U kunt dan lus door de array om de sleutels en waarden die u nodig hebt te krijgen.

Object.entries

DeObject.entries() methode geeft een array van een gegeven object ‘ s eigen enumerable property paren.

prestatievergelijking

laten we nu al deze technieken testen en vergelijken op basis van hun snelheid en prestaties om te bepalen welke sneller is.

De meeste browsers zoals Chrome en Firefox implementeren hoge-resolutie timing in performance.now(). De methode performance.now() geeft een DOMHighResTimeStamp, gemeten in milliseconden.

Gebruik

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

laten we beginnen met testen…

testresultaten

volgens onze tests zijn de resultaten in oplopende volgorde;

╔═══════════╦════════════════════════════╦═════════════════════════╗
║ 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 ║
╚═══════════╩════════════════════════════╩═════════════════════════╝

volgens deze resultaten is de snelste manier om door JavaScript-objecten te itereren de for…in loop. Nu, dit betekent niet dat de andere methoden zijn nietig of nutteloos, het hangt allemaal af van use cases.

het probleem met een for...in lus is dat het itereert door eigenschappen in de Prototype keten. Het herhaalt zich over objecteigenschappen. Javascript arrays zijn slechts een specifiek soort object met een aantal handige eigenschappen die u helpen behandelen als arrays, maar ze hebben nog steeds interne object Eigenschappen en je niet van plan om te herhalen over deze. for...inherhaalt ook alle enumerable eigenschappen en niet alleen de elementen van de array. Dit kan ook leiden tot onverwachte resultaten.

wanneer u door een object lus met defor...in lus, moet u controleren of de eigenschap bij het object hoort. U kunt dit doen met hasOwnProperty.

een betere en efficiëntere manier om door objecten te lusenin ES6 is om het object eerst om te zetten in een array met Object.keys()Object.values()Object.getOwnPropertyNames of Object.entries() . Dan loop je door de array om de sleutels en waarden te krijgen.