Cómo iterar a través de un objeto claves y valores en JavaScript

A veces es posible que necesite iterar a través de un objeto en JavaScript para recuperar varios pares clave-valor. En este artículo, veremos cuatro formas diferentes de hacer bucles sobre las propiedades de los objetos en JavaScript.

Antes de ES6, la única forma de recorrer un objeto era el for…in bucle. El método Object.keys() se introdujo en ES6 para facilitar la iteración sobre objetos. Más tarde en ES8, se agregaron dos nuevos métodos, Object.entries() y Object.values(). Los métodos más recientes convierten el objeto en una matriz y luego usan métodos de bucle de matriz para iterar sobre esa matriz.

¡Comencemos con el primer método!

for…in Loop

La forma más sencilla y directa de iterar sobre las propiedades del objeto es mediante la instrucción for...in. Este método funciona en todos los navegadores modernos y antiguos, incluido Internet Explorer 6 y versiones posteriores.

Este es un ejemplo que utiliza el bucle for...in para iterar sobre un objeto:

const user = { name: 'John Doe', email: '[email protected]', age: 25, dob: '08/02/1989', active: true};// iterate over the user objectfor (const key in user) { console.log(`${key}: ${user}`);}// name: John Doe// email: [email protected]// age: 25// dob: 08/02/1989// active: true

El problema con el bucle for...in es que itera también a través de las propiedades de la cadena de prototipos. Dado que los objetos en JavaScript pueden heredar propiedades de sus prototipos, la instrucción fo...in también recorrerá esas propiedades.

Para evitar iterar sobre las propiedades del prototipo mientras se realiza un bucle en un objeto, debe verificar explícitamente si la propiedad pertenece al objeto mediante el método hasOwnProperty() :

for (const key in user) { if (user.hasOwnProperty(key)) { console.log(`${key}: ${user}`); }}

Afortunadamente, ya no necesitamos confiar en el método for...in y hasOwnProperty() para recorrer un objeto. Hay mejores maneras disponibles.Objeto

.Método keys ()

El método Object.keys() se introdujo en ES6. Toma el objeto que desea iterar como argumento y devuelve un array que contiene todos los nombres de propiedades (o claves).

Puede usar cualquiera de los métodos de bucle de matriz, como forEach (), para iterar a través de la matriz y recuperar el valor de cada propiedad.

Aquí hay un ejemplo:

const courses = { java: 10, javascript: 55, nodejs: 5, php: 15};// convert object to key's arrayconst keys = Object.keys(courses);// print all keysconsole.log(keys);// // iterate over objectkeys.forEach((key, index) => { console.log(`${key}: ${courses}`);});// java: 10// javascript: 55// nodejs: 5// php: 15

En la declaración de funciones anterior, utilicé la sintaxis ES6. Asumo que ya está familiarizado con ES6, especialmente con las funciones de flecha. Si es nuevo en ES6, eche un vistazo a la guía de funciones de flecha para obtener más información al respecto.Objeto

.Método values ()

El Objeto.el método values () se introdujo en ES8 y hace lo contrario de Object.key(). Devuelve los valores de todas las propiedades del objeto como una matriz. A continuación, puede recorrer en bucle la matriz de valores utilizando cualquiera de los métodos de bucle de matriz.

veamos un ejemplo:

const animals = { tiger: '🐅', cat: '🐱', monkey: '🐒', elephant: '🐘'};// iterate over object valuesObject.values(animals).forEach(val => console.log(val));// 🐅// 🐱// 🐒// 🐘

Objeto.Método entries ()

El Objeto.entries() es otro método que se introdujo en ES8 y se puede usar para atravesar un objeto. A diferencia de Object.values() que crea una matriz de los valores en el objeto, Object.entries() produce una matriz de matrices. Cada matriz interna tiene dos elementos. El primer elemento es la propiedad; el segundo elemento es el valor.

Aquí hay un ejemplo:

const animals = { tiger: '🐅', cat: '🐱', monkey: '🐒', elephant: '🐘'};const entries = Object.entries(animals);console.log(entries);// ,// ,// ,// ]

Para iterar sobre la matriz devuelta por Object.entries(), puede usar el for…de bucle o el método forEach () como se muestra a continuación:

// `for...of` loopfor (const of Object.entries(animals)) { console.log(`${key}: ${value}`);}// `forEach()` methodObject.entries(animals).forEach(() => { console.log(`${key}: ${value}`)});

Conclusión

Eso es todo para iterar sobre propiedades de objetos en JavaScript. Analizamos cuatro métodos diferentes para llevar a cabo esta tarea. for...in sigue siendo una buena opción si desea admitir navegadores antiguos. De lo contrario, utilice cualquiera de los métodos más recientes: Object.keys()Object.values() o Object.entries().

✌️ Gusta este artículo? Sigue a @ attacomsian en Twitter. También puedes seguirme en LinkedIn y DEV. Suscríbete a la fuente RSS.

i te gusta leer mis artículos y quieres apoyarme para seguir creando tutoriales gratuitos, Buy Cómprame un café (costo 5 5).