Object.values ​​​​y Object.entries en JavaScript

Introducción

El lenguaje de programación JavaScript continúa evolucionando y agregando nuevas funciones con cada iteración. En JavaScript 2017 (ES8), el constructor de objetos incluye dos métodos nuevos: Object.values()y Object.entries(). Este tutorial es una introducción a estos dos métodos.

Prerrequisitos

Para seguir este tutorial, debes estar familiarizado con los objetos de JavaScript. Puedes obtener más información sobre los objetos de JavaScript en nuestro tutorial Comprender los objetos en JavaScript.

También deberías sentirte cómodo usando la consola de JavaScript en tu navegador preferido. Los ejemplos de este tutorial utilizan la consola de JavaScript en el navegador web Chrome.

Utilizando el Object.values()método

Object.values()Toma un objeto y devuelve una matriz con los valores. Para demostrarlo, abra la consola de JavaScript en su navegador web preferido y cree un objeto con las siguientes líneas:

const person = {  firstName: 'James',  lastName: 'Bond',  occupation: 'Classified'};

Una vez creado un objeto, puede recuperar valores de él mediante el Object.values()método. Puede registrar los valores en la consola pasando el objeto como argumento al método:

console.log(Object.values(person));

Output(3) ['James', 'Bond', 'Classified']

También puedes almacenarlo en una variable para acceder cómodamente a los valores:

const personValues = Object.values(person);personValues;

Output(3) ['James', 'Bond', 'Classified']

Nota: Object.values() no sigue la cadena de prototipos y solo itera sobre los valores que están directamente en el objeto proporcionado. No devuelve valores no enumerables como las funciones.

Utilizando el Object.entries()método

De manera similar al Objects.values()método, el Object.entries()método devuelve una matriz anidada con pares clave-valor. Con el personobjeto que creó anteriormente, puede generar tanto la clave como el valor al pasar su objeto como argumento a este método:

const person = {  firstName: 'James',  lastName: 'Bond',  occupation: 'Classified'};console.log(Object.entries(person));

Output(3) [Array(2), Array(2), Array(2)]

Tenga en cuenta que en la consola, los valores de los pares clave-valor no se muestran de inmediato. Puede mostrar los valores de los pares haciendo clic en el resultado en la consola:

Output(3) [Array(2), Array(2), Array(2)]    0: (2) ['firstName', 'James']    1: (2) ['lastName', 'Bond']    2: (2) ['occupation', 'Classified']    length: 3

También puedes usar un .forEach()bucle junto con la desestructuración de la matriz para iterar a través de los pares clave-valor y enviar los valores a la consola:

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

Output  firstName: James  lastName: Bond  occupation: Classified

Con este método, ahora sabes cómo acceder y generar pares clave-valor en la consola.

Conclusión

En este tutorial, se le presentan dos nuevos métodos de construcción de objetos de JavaScript. Puede profundizar en el lenguaje de programación JavaScript siguiendo nuestra serie de tutoriales Cómo codificar en JavaScript.

Si deseas obtener más información sobre otros métodos de objetos, lee nuestro tutorial sobre Cómo usar métodos de objetos en JavaScript.