Bucle a través del diccionario en JavaScript

Un «diccionario» de JavaScript suele ser un objeto que almacena datos en pares clave-valor. Puedes recorrer sus claves, leer los valores mediante ellas o iterar directamente sobre los pares. El patrón adecuado depende de si deben incluirse las propiedades heredadas y de si necesitas las claves, los valores o ambos.

Recorrer un objeto con for...in

Un bucle for...in visita las propiedades enumerables de un objeto cuyas claves son cadenas. También incluye las propiedades enumerables heredadas a través de la cadena de prototipos. Si solo quieres los datos almacenados directamente en el objeto, comprueba que cada propiedad sea propia.

Ejecuta este ejemplo:

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

const dictionary = { name: "Ada", role: "engineer", city: "London" };

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

name: Ada
role: engineer
city: London

El caso de ejecución proporcionado para este ejemplo terminó correctamente; el resultado aparece arriba. Si el objeto puede tener propiedades enumerables heredadas, protege el bucle así: if (Object.prototype.hasOwnProperty.call(dictionary, key)). Esta comprobación limita el cuerpo del bucle a las propiedades propias del objeto y conserva la misma estructura.

Recorrer las claves propias de un objeto con Object.keys()

Object.keys() devuelve una matriz con los nombres de las propiedades propias enumerables de un objeto cuyas claves son cadenas. Recorre esa matriz cuando necesites cada clave y quieras obtener su valor del objeto. No incluye las propiedades heredadas.

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

const dictionary = { name: "Ada", role: "engineer", city: "London" };

for (const key of Object.keys(dictionary)) {
  console.log(`${key}: ${dictionary[key]}`);
}

name: Ada
role: engineer
city: London

El caso de ejecución proporcionado para este ejemplo terminó correctamente. Cada clave es una cadena, y la notación de corchetes, como dictionary[key], permite leer el valor correspondiente. Object.keys() no incluye las propiedades cuyas claves son símbolos; si forman parte de tu modelo de datos, usa una API diseñada para trabajar con símbolos.

Recorrer pares clave-valor con Object.entries()

Usa Object.entries() cuando necesites las dos partes de cada par. Devuelve una matriz de pares [key, value] correspondientes a las propiedades propias enumerables del objeto cuyas claves son cadenas. La desestructuración asigna un nombre a cada valor directamente en el bucle.

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

const dictionary = { name: "Ada", role: "engineer", city: "London" };

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

name: Ada
role: engineer
city: London

El caso de ejecución proporcionado para este ejemplo terminó correctamente. Al igual que Object.keys(), Object.entries() omite las propiedades heredadas, no enumerables y cuyas claves son símbolos. Por ejemplo, una propiedad añadida con Object.defineProperty(dictionary, "internalId", { value: 7 }) no es enumerable de forma predeterminada, por lo que no aparecerá entre los pares devueltos a menos que su opción enumerable se establezca en true.

Usar for...of con Object.entries()

Un bucle for...of puede recorrer la matriz devuelta por Object.entries(). Esta forma resulta útil cuando el cuerpo del bucle contiene varias instrucciones o necesita control de flujo, como continue o break.

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

const dictionary = { name: "Ada", role: "engineer", city: "London" };

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

name: Ada
role: engineer
city: London

El caso de ejecución proporcionado para este ejemplo terminó correctamente. Recorre los mismos pares de propiedades propias y enumerables cuyas claves son cadenas que el ejemplo anterior con Object.entries(); la desestructuración asigna el primer elemento de cada par a key y el segundo a value.

Elegir un método de iteración

Elige for...in cuando quieras visitar específicamente propiedades enumerables cuyas claves sean cadenas y estés dispuesto a incluir o filtrar las propiedades heredadas. Añade una comprobación de propiedad propia si las propiedades heredadas no forman parte de la tarea. Elige Object.keys() cuando necesites las claves propias del objeto y vayas a buscar sus valores por separado. Usa Object.entries() con forEach() o for...of cuando necesites tanto la clave como su valor en cada iteración.

Estos métodos recorren las propiedades de un objeto; no recorren recursivamente los valores anidados. Si un valor es a su vez un objeto, como profile: { city: "London" }, el bucle exterior te proporciona ese objeto anidado como valor de profile. Cuando la tarea lo requiera, accede a sus propiedades o recórrelas por separado. Para el caso habitual de procesar tanto las claves como los valores de un objeto simple, for...of junto con Object.entries() deja clara la relación entre ambos.