Tutorial para principiantes para iterar sobre un objeto JS

Algo esencial para los fundamentos de Javascript es… ¡iterar sobre un objeto! ¡¿Estoy en lo cierto ?! Siempre que hacemos llamadas desde una base de datos a nuestra aplicación web para representar datos, generalmente recibimos un objeto JSON que debe analizarse. Así que pongámonos manos a la obra, concretemos algunos conocimientos y aprendamos juntos un poco.

Métodos de objetos

En primer lugar, hablemos de métodos para objetos JavaScript. Como probablemente sepa, en JavaScript, las matrices y los objetos tienen métodos incorporados que se pueden usar de la mano para encontrar información. Para los objetos, nos centraremos en estos métodos:

• Object.keys (): produce una matriz de claves de un objeto
• Object.values ​​(): produce una matriz de valores del objeto (menos casos de uso)
• Object.entries ()

Primero, comencemos creando un objeto. Tenemos nuestro objeto usuario con tres claves (nombre, edad, ocupación) que apuntan a tres valores ("Adam, 36," Adiestrador de perros "). Pase ese objeto al método Object.keys () como se ve a continuación en la línea 7 y consola.

Object.keys (usuario) producirá una matriz de las tres claves: nombre, edad y ocupación.

For Loop con Object.keys ()

Hagamos un bucle sobre un objeto usando Object.keys (), pasando nuestro usuario.

Este ciclo producirá cada clave de nuestro objeto apuntando a su valor correspondiente:

Método Object.values ​​()

Pase el objeto de usuario, en el método Object.values ​​().

Esto producirá una matriz de valores y, por lo general, tiene menos casos de uso porque no hay tanta información con la que trabajar (ya que solo estamos recuperando valores). Vea a continuación en la captura de pantalla que hemos producido una matriz de los tres valores ("Adam", 36, "Adiestrador de perros").

Método Object.entries ()

El último método en el que me centraré es el método Object.entries (). Normalmente, este método será el más favorable de los tres con los que hemos trabajado para iterar sobre un objeto JS.

Una vez más, pasemos el objeto de usuario al método Object.entries () y veamos qué se imprimirá en la consola.

En la consola, obtenemos una matriz de tres matrices impresas. Dentro de cada una de esas matrices hay una lista de la clave y su valor. El uso de este método nos permite interactuar y manipular nuestros datos con un poco más de entusiasmo:

For Loop con Object.entries ()

Construyamos ahora un bucle for, pasemos el objeto de usuario a este método.

Esto imprime en la consola cada tecla y su valor correspondiente:

Refactorizando nuestro Object.entries () For loop.

Ahora hay una forma un poco más sencilla de escribir un bucle for con nuestro método Object.entries (). Introduzcamos la destrucción en el bucle. En lugar de la palabra clave "entrada", pasaremos un par "[clave, valor]" y luego usaremos esos nombres de variables en nuestro console.log ().

Vea que la destrucción producirá el mismo resultado que el primer bucle for para Object.entries () que escribimos, ¡pero hará que nuestro código de bucle for sea un poco más limpio de leer!

Conclusión

Espero que esto le haya brindado alguna ayuda dondequiera que se encuentre en su viaje de aprendizaje de codificación. Planeo profundizar en algunas técnicas de bucle de objetos más en JavaScript en un blog futuro. ¡Estén atentos y sigan hackeando!