Articles

Itérer à travers des objets JavaScript – 5 Techniques et Tests de performance.

for…in boucle

Le for…in l’instruction loop peut être utilisée pour parcourir toutes les propriétés énumérables non symboliques d’un objet.

Objet.keys

La méthode Object.keys() renvoie un tableau de clés d’objet. Cela crée un tableau qui contient les propriétés de l’objet. Vous pouvez ensuite parcourir le tableau pour obtenir les clés et les valeurs dont vous avez besoin.

Objet.values

La méthode Object.values() renvoie un tableau de valeurs d’objets. Cela crée un tableau qui contient les propriétés de l’objet. Vous pouvez ensuite parcourir le tableau pour obtenir les valeurs dont vous avez besoin.

Objet.getOwnPropertyNames

La méthode Object.getOwnPropertyNames() renvoie un tableau de toutes les propriétés (y compris les propriétés non énumérables à l’exception de celles qui utilisent le symbole) trouvées directement dans un objet donné. Cela crée un tableau qui contient les propriétés de l’objet. Vous pouvez ensuite parcourir le tableau pour obtenir les clés et les valeurs dont vous avez besoin.

Objet.la méthode Object.entries() renvoie un tableau de la propre propriété énumérable d’un objet donné paires.

Comparaison des performances

Testons maintenant toutes ces techniques et comparons chacune en fonction de leur vitesse et de leurs performances pour déterminer laquelle est la plus rapide.

La plupart des navigateurs comme Chrome et Firefox implémentent une synchronisation haute résolution dans performance.now(). La méthode performance.now() renvoie un DOMHighResTimeStamp, mesuré en millisecondes.

Utilisation

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

Commençons les tests…

Résultats des tests

Selon nos tests, voici les résultats dans l’ordre croissant;

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

Donc, selon ces résultats, le moyen le plus rapide de parcourir les objets JavaScript est le for…in boucle. Maintenant, cela ne signifie pas que les autres méthodes sont nulles ou inutiles, tout dépend des cas d’utilisation.

Le problème avec une boucle for...in est qu’elle parcourt les propriétés de la chaîne de prototypes. Il itère sur les propriétés de l’objet. Les tableaux Javascript ne sont qu’un type d’objet spécifique avec des propriétés pratiques qui vous aident à les traiter comme des tableaux, mais ils ont toujours des propriétés d’objet internes et vous ne voulez pas les parcourir. for...in itère également sur toutes les propriétés énumérables et pas seulement les éléments du tableau. Cela peut également conduire à des résultats inattendus.

Lorsque vous parcourez un objet avec la boucle for...in, vous devez vérifier si la propriété appartient à l’objet. Vous pouvez le faire avec hasOwnProperty.

Un moyen meilleur et plus efficace de parcourir les objets dans ES6 consiste d’abord à convertir l’objet en un tableau en utilisant Object.keys()Object.values()Object.getOwnPropertyNames ou Object.entries(). Ensuite, vous parcourez le tableau pour obtenir les clés et les valeurs.