Articles

iteracja za pomocą obiektów JavaScript – 5 technik i testów wydajności.

for…in loop

The for…in Instrukcja loop może być użyta do iteracji nad wszystkimi Nie-symbolami, wymienialnymi właściwościami obiektu.

obiekt.klucze

metoda Object.keys() zwraca tablicę kluczy obiektu. Spowoduje to wytworzenie tablicy zawierającej właściwości obiektu. Następnie możesz zapętlić tablicę, aby uzyskać potrzebne klucze i wartości.

obiekt.wartości

metodaObject.values() zwraca tablicę wartości obiektów. Spowoduje to wytworzenie tablicy zawierającej właściwości obiektu. Następnie możesz zapętlić tablicę, aby uzyskać potrzebne wartości.

obiekt.getOwnPropertyNames

metoda Object.getOwnPropertyNames() zwraca tablicę wszystkich właściwości (w tym właściwości niewyliczalne z wyjątkiem tych, które używają symbolu) znajdujących się bezpośrednio w danym obiekcie. Spowoduje to wytworzenie tablicy zawierającej właściwości obiektu. Następnie możesz zapętlić tablicę, aby uzyskać potrzebne klucze i wartości.

obiekt.wpisy

metodaObject.entries()zwraca tablicę własnej wyliczalnej właściwości danego obiektu par.

porównanie wydajności

teraz przetestujmy wszystkie te techniki i porównajmy je na podstawie ich szybkości i wydajności, aby określić, która jest szybsza.

większość przeglądarek takich jak Chrome i Firefox implementuje synchronizację w wysokiej rozdzielczości w performance.now(). Metodaperformance.now() zwracaDOMHighResTimeStamp, mierzony w milisekundach.

zastosowanie

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

zacznijmy testować…

wyniki testów

zgodnie z naszymi testami, oto wyniki w kolejności rosnącej;

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

tak więc, zgodnie z tymi wynikami, najszybszym sposobem iteracji przez obiekty JavaScript jest for…in pętla. Nie oznacza to, że inne metody są nieważne lub bezużyteczne, wszystko zależy od przypadków użycia.

problem z pętlą for...in polega na tym, że iteracja odbywa się poprzez właściwości w łańcuchu prototypów. Iteracje nad właściwościami obiektu. Tablice Javascript są po prostu specyficznym rodzajem obiektu z kilkoma przydatnymi właściwościami, które pomagają traktować je jako tablice, ale nadal mają wewnętrzne właściwości obiektu i nie chcesz nad nimi iteracji. for...inrównież iteracje nad wszystkimi możliwymi do wyliczenia właściwościami, a nie tylko nad elementami tablicy. Może to również prowadzić do nieoczekiwanych rezultatów.

podczas przechodzenia przez obiekt z pętlą for...in należy sprawdzić, czy właściwość należy do obiektu. Możesz to zrobić za pomocą hasOwnProperty.

lepszym i skuteczniejszym sposobem pętli obiektów w ES6 jest konwersja obiektu na tablicę za pomocą Object.keys()Object.values()Object.getOwnPropertyNames lub Object.entries() . Następnie Pętla przez tablicę, aby uzyskać klucze i wartości.