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

En ocasiones, es posible que deba iterar a través de un objeto en JavaScript para recuperar varios pares clave-valor. En este artículo, veremos cuatro formas diferentes de recorrer las propiedades de los objetos en JavaScript.

Antes de ES6, la única forma de recorrer un objeto era el bucle for...in. El Object.keys() El método se introdujo en ES6 para facilitar la iteración de objetos. Posteriormente en ES8, se agregaron dos nuevos métodos, Object.entries() y Object.values() . Los métodos más nuevos 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 Bucle

La forma más simple y directa de iterar sobre las propiedades de un objeto es usando el for...in declaración. Este método funciona en todos los navegadores modernos y antiguos, incluido Internet Explorer 6 y superior.

Aquí hay un ejemplo que usa el for...in bucle 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 object
for (const key in user) {
    console.log(`${key}: ${user[key]}`);
}

// name: John Doe
// email: [email protected]
// age: 25
// dob: 08/02/1989
// active: true

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

Para evitar al iterar sobre las propiedades del prototipo mientras se repite un objeto, debe explícitamente compruebe si la propiedad pertenece al objeto utilizando el hasOwnProperty() método:

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

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

Object.keys() Método

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

A continuación, puede utilizar 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 array
const keys = Object.keys(courses);

// print all keys
console.log(keys);
// [ 'java', 'javascript', 'nodejs', 'php' ]

// iterate over object
keys.forEach((key, index) => {
    console.log(`${key}: ${courses[key]}`);
});

// java: 10
// javascript: 55
// nodejs: 5
// php: 15

En la declaración de la función anterior, utilicé la sintaxis de ES6. Supongo 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.

Object.values() Método

El método Object.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 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 values
Object.values(animals).forEach(val => console.log(val));

// 🐅
// 🐱
// 🐒
// 🐘

Object.entries() Método

Object.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);

// [ [ 'tiger', '🐅' ],
//   [ 'cat', '🐱' ],
//   [ 'monkey', '🐒' ],
//   [ 'elephant', '🐘' ] ]

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

// `for...of` loop
for (const [key, value] of Object.entries(animals)) {
    console.log(`${key}: ${value}`);
}

// `forEach()` method
Object.entries(animals).forEach(([key, value]) => {
    console.log(`${key}: ${value}`)
});

Conclusión

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