for…in bucle

El for…in la instrucción de bucle se puede usar para iterar sobre todas las propiedades enumerables y no simbólicas de un objeto.

Objeto.claves

El métodoObject.keys() devuelve una matriz de claves de objeto. Esto crea una matriz que contiene las propiedades del objeto. A continuación, puede recorrer la matriz para obtener las claves y los valores que necesita.

Objeto.valores

El métodoObject.values() devuelve una matriz de valores de objetos. Esto crea una matriz que contiene las propiedades del objeto. A continuación, puede recorrer la matriz para obtener los valores que necesita.

Objeto.getOwnPropertyNames

El métodoObject.getOwnPropertyNames() devuelve una matriz de todas las propiedades (incluidas las propiedades no enumerables, excepto las que usan Símbolo) que se encuentran directamente en un objeto dado. Esto crea una matriz que contiene las propiedades del objeto. A continuación, puede recorrer la matriz para obtener las claves y los valores que necesita.

Objeto.entradas

El métodoObject.entries() devuelve una matriz de la propiedad enumerable propia de un objeto dado pares.

Comparación de Rendimiento

Ahora vamos a probar todas estas técnicas y comparar cada uno basado en su velocidad y rendimiento para determinar cual es más rápido.

La mayoría de navegadores como Chrome y Firefox implementan temporización de alta resolución en performance.now(). El método performance.now() devuelve un DOMHighResTimeStamp, medido en milisegundos.

Uso

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

Comencemos a probar

Resultados de la prueba

De acuerdo con nuestras pruebas, aquí están los resultados en orden ascendente;

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

Así que, de acuerdo con estos resultados, la forma más rápida de iterar a través de objetos JavaScript es el for…in bucle. Ahora, esto no significa que los otros métodos sean vacíos o inútiles, todo depende de los casos de uso.

El problema con un bucle for...in es que itera a través de propiedades en la cadena de prototipos. Itera sobre las propiedades de los objetos. Los arrays de Javascript son solo un tipo específico de objeto con algunas propiedades útiles que le ayudan a tratarlos como arrays, pero aún tienen propiedades de objeto internas y no tiene la intención de repetirlas. for...in también itera sobre todas las propiedades enumerables y no solo sobre los elementos de la matriz. Esto también puede conducir a resultados inesperados.

Cuando realiza un bucle a través de un objeto con el bucle for...in, debe verificar si la propiedad pertenece al objeto. Puede hacer esto con hasOwnProperty.

Una forma mejor y más eficiente de recorrer objetos en ES6 es convertir primero el objeto en una matriz usando Object.keys()Object.values()Object.getOwnPropertyNames o Object.entries() . Luego, recorre el array para obtener las claves y los valores.