En Javascript
En muchos casos, se presenta la situación en la que necesitamos recorrer un objeto, a través de las propiedades de su estructura, como si fueran los elementos de un array. Sin embargo, al ser un objeto parece que no es posible.
Sin embargo, existen unos métodos denominados Object.keys()
, Object.values()
y Object.entries()
que nos van a permitir realizar esta tarea. En primer lugar, observa que son métodos de una Clase estática, por lo que tienes que escribir siempre el Object.
y no ejecutar el método sobre el objeto en sí, como solemos hacerlo.
Veamos de que métodos se trata:
Método | Descripción |
---|---|
Object.keys(obj) |
Itera el obj y devuelve sus propiedades o keys. |
Object.values(obj) |
Itera el obj y devuelve los valores de sus propiedades. |
Object.entries(obj) |
Itera el obj y devuelve un [key, valor] . |
Object.fromEntries(array) |
Construye un objeto con un array de pares [key, valor] . |
En cualquiera de los 3 casos, devuelven siempre un
Todo esto puede parecer complejo, pero en realidad es muy sencillo. Veamos un ejemplo para entender como funcionan:
const user = {
name: "Manz",
life: 99,
power: 10,
talk: function() {
return "Hola!";
}
};
Object.keys(user); // ["name", "life", "power", "talk"]
Object.values(user); // ["Manz", 99, 10, ƒ]
Object.entries(user); // [["name", "Manz"], ["life", 99], ["power", 10], ["talk", ƒ]]
Expliquemos este código:
Object.keys()
obtenemos un Object.values()
obtenemos un Object.entries()
obtenemos un Ten en cuenta que como un
const animals = ["Gato", "Perro", "Burro", "Gallo", "Ratón"];
Object.keys(animals); // [0, 1, 2, 3, 4]
Object.values(animals); // ["Gato", "Perro", "Burro", "Gallo", "Ratón"]
Object.entries(animals); // [[0, "Gato"], [1, "Perro"], [2, "Burro"], [3, "Gallo"], [4, "Ratón"]]
Cualquier otra estructura se podría utilizar con Object.keys()
, Object.values()
o Object.entries()
pero devolverá un array vacío si no se puede iterar. Por ejemplo:
Object.keys(new Date()); // [] (Iterar una fecha)
Object.values(/.+/); // [] (Iterar una expresión regular)
Object.entries(true); // [] (Iterar un booleano)
Así pues, los casos más interesantes suelen ser estructuras de
De la misma forma, también se puede hacer la operación inversa. Para ello, usaremos el método Object.fromEntries()
. En esta ocasión, vamos a partir de dos keys
y values
, donde el primero tiene la lista de propiedades en
El objetivo es, a partir de esos dos arrays (que deben ser del mismo tamaño), generar el objeto inicial user
que teníamos antes:
const keys = ["name", "life", "power", "talk"];
const values = ["Manz", 99, 10, function() { return "Hola" }];
const entries = [];
for (let i of Object.keys(keys)) {
const key = keys[i];
const value = values[i];
entries.push([key, value]);
}
const user = Object.fromEntries(entries); // {name: 'Manz', life: 99, power: 10, talk: ƒ}
Observa que partimos de un entries
. Con Object.keys(keys)
obtenemos una lista de números de 0
al tamaño del array keys
. Esto nos servirá de posición para ir recorriendo los arrays keys
y values
en el interior del bucle for..of
.
De esta forma, en cada iteración del bucle generamos un par key
, value
, que meteremos en un array e insertaremos en entries
. De esta forma, regeneramos la estructura de entradas de Object.entries()
que es la que necesitamos para que, mediante Object.fromEntries()
podamos regenerar el objeto user
con las keys de keys
y los valores de values
.
Otra forma, más compacta, pero que quizás requiere más experiencia, sería la siguiente:
const keys = ["name", "life", "power", "talk"];
const values = ["Manz", 99, 10, function() { return "Hola" }];
const entries = values.map((value, index) => [keys[index], value]);
const user = Object.fromEntries(entries);
En este caso hacemos exactamente lo mismo, pero utilizamos el método .map()
del tema de las array functions para simplificar el bucle.
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev