for…in loop

den for…in loop uttalande kan användas för att iterera över alla icke-Symbol, uppräknings egenskaper hos ett objekt.

objekt.nycklar

Object.keys() – metoden returnerar en rad Objektnycklar. Detta skapar en array som innehåller objektets egenskaper. Du kan sedan slinga genom matrisen för att få de nycklar och värden du behöver.

objekt.värden

Object.values() – metoden returnerar en rad Objektvärden. Detta skapar en array som innehåller objektets egenskaper. Du kan sedan slinga genom matrisen för att få de värden du behöver.

objekt.getownpropertynames

Object.getOwnPropertyNames() – metoden returnerar en matris med alla egenskaper (inklusive icke-uppräkbara egenskaper förutom de som använder Symbol) som finns direkt i ett visst objekt. Detta skapar en array som innehåller objektets egenskaper. Du kan sedan slinga genom matrisen för att få de nycklar och värden du behöver.

objekt.poster

Object.entries() – metoden returnerar en matris med ett givet objekts egen uppräkbara egenskap par.

Prestandajämförelse

låt oss nu testa alla dessa tekniker och jämföra var och en baserat på deras hastighet och prestanda för att bestämma vilken som är snabbare.

de flesta webbläsare som Chrome och Firefox implementerar högupplöst timing iperformance.now(). Metodenperformance.now() returnerar ettDOMHighResTimeStamp, mätt i millisekunder.

användning

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

låt oss börja testa…

Testresultat

enligt våra tester är här resultaten i stigande ordning;

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

så enligt dessa resultat är det snabbaste sättet att iterera genom JavaScript-objekt for…in loop. Nu betyder det inte att de andra metoderna är ogiltiga eller värdelösa, allt beror på användningsfall.

problemet med enfor...in loop är att den itererar genom Egenskaper i Prototypkedjan. Det upprepas över objektegenskaper. Javascript-arrayer är bara en specifik typ av objekt med några praktiska egenskaper som hjälper dig att behandla dem som arrayer, men de har fortfarande interna objektegenskaper och du menar inte att iterera över dessa. for...in itererar också över alla uppräkbara egenskaper och inte bara arrayens element. Detta kan också leda till oväntade resultat.

När du slingrar genom ett objekt med for...in loop måste du kontrollera om egenskapen tillhör objektet. Du kan göra detta med hasOwnProperty.

ett bättre och effektivare sätt att slinga genom objekt i ES6 är att först konvertera objektet till en array med Object.keys()Object.values()Object.getOwnPropertyNames eller Object.entries() . Sedan slingrar du genom matrisen för att få nycklarna och värdena.