¿Cómo iterar sobre un objeto JavaScript?

5 minutos de lectura

¿Como iterar sobre un objeto JavaScript
nkuhta

Tengo un objeto en JavaScript:

{
    abc: '...',
    bca: '...',
    zzz: '...',
    xxx: '...',
    ccc: '...',
    // ...
}

quiero usar un for bucle para obtener sus propiedades. Y quiero iterarlo en partes (no todas las propiedades del objeto a la vez).

Con una matriz simple puedo hacerlo con un estándar for lazo:

for (i = 0; i < 100; i++) { ... } // first part
for (i = 100; i < 300; i++) { ... } // second
for (i = 300; i < arr.length; i++) { ... } // last

Pero, ¿cómo hacerlo con objetos?

  • Tenga en cuenta que las propiedades de los objetos no se almacenan en orden. Cuando itera sobre un objeto, no hay garantía del orden en que aparecerán.

    –James Allardice

    17 de enero de 2013 a las 12:40

  • ¿Responde esto a tu pregunta? ¿Cómo recorrer un objeto JavaScript simple con los objetos como miembros?

    – shmuels

    29 de abril de 2020 a las 16:01

1646968208 593 ¿Como iterar sobre un objeto JavaScript
Denys Séguret

Para la mayoría de los objetos, utilice for .. in :

for (let key in yourobject) {
  console.log(key, yourobject[key]);
}

Con ES6, si necesita claves y valores simultáneamente, haga

for (let [key, value] of Object.entries(yourobject)) {
    console.log(key, value);
}

Para evitar registrar propiedades heredadas, consulte con tiene propiedad propia :

for (let key in yourobject) {
   if (yourobject.hasOwnProperty(key)) {
      console.log(key, yourobject[key]);
   }
}

No necesitas comprobar hasOwnProperty al iterar en las claves si está utilizando un objeto simple (por ejemplo, uno que hizo usted mismo con {}).

Esta documentación de MDN explica de manera más general cómo tratar con objetos y sus propiedades.

Si quieres hacerlo “en trozos”, lo mejor es extraer las claves en una matriz. Como el orden no está garantizado, esta es la forma correcta. En los navegadores modernos, puede usar

let keys = Object.keys(yourobject);

Para ser más compatible, será mejor que hagas esto:

 let keys = [];
 for (let key in yourobject) {      
     if (yourobject.hasOwnProperty(key)) keys.push(key);
 }

Luego puede iterar en sus propiedades por índice: yourobject[keys[i]] :

for (let i=300; i < keys.length && i < 600; i++) { 
   console.log(keys[i], yourobject[keys[i]]);
}

  • OP quiere realizar esto en fragmentos, no todas las teclas en un solo bucle.

    – pata

    17 de enero de 2013 a las 12:39


  • @Cerbrus El OP ya sabe cómo iterar una matriz en partes. Utilizando keys del código dado debería ser suficiente.

    – Yoshi

    17 de enero de 2013 a las 12:47

  • @Cerbrus ¡Lee antes de comentar! Lo que no está claro en “Para ser más compatibles, será mejor que hagas esto” ?

    – Denys Séguret

    17 de enero de 2013 a las 12:49

  • @ am05mhz Como dije, es inútil con la mayoría de los objetos. Pero no para todos. Prueba esto: jsbin.com/hirivubuta/1/editar?js,consola,salida

    – Denys Séguret

    10 de septiembre de 2015 a las 6:21

  • 9 años desarrollando en JS, y siempre dudo de mi mismo con for..of y for..iny terminé viniendo aquí.

    – choz

    23 de septiembre de 2020 a las 17:59

¿Como iterar sobre un objeto JavaScript
Visión

Aquí hay otra solución de iteración para navegadores modernos:

Object.keys(obj)
  .filter((k, i) => i >= 100 && i < 300)
  .forEach(k => console.log(obj[k]));

O sin la función de filtro:

Object.keys(obj).forEach((k, i) => {
    if (i >= 100 && i < 300) {
        console.log(obj[k]);
    }
});

Sin embargo, debe tener en cuenta que las propiedades en el objeto de JavaScript no están ordenadas, es decir, no tienen ningún orden.

  • Si rompo el ciclo, comenzará desde el principio del objeto la próxima vez, esa no es la forma correcta.

    – nkuhta

    17 de enero de 2013 a las 12:43

Utilizando Object.entries haces algo como esto.

 // array like object with random key ordering
 const anObj = { 100: 'a', 2: 'b', 7: 'c' };
 console.log(Object.entries(anObj)); // [ ['2', 'b'],['7', 'c'],['100', 'a'] ]

El método Object.entries() devuelve una matriz de la propiedad enumerable propia de un objeto dado [key, value]

Entonces puedes iterar sobre el Objeto y tener key y value para cada uno de los objetos y obtener algo como esto.

const anObj = { 100: 'a', 2: 'b', 7: 'c' };
Object.entries(anObj).map(obj => {
   const key   = obj[0];
   const value = obj[1];

   // do whatever you want with those values.
});

o así

// Or, using array extras
Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
});

Para obtener una referencia, eche un vistazo a los documentos de MDN para Entradas de objetos

Con las nuevas características de ES6/ES2015, ya no tiene que usar un objeto para iterar sobre un hash. Puedes usar un Mapa. Javascript Maps mantiene las claves en orden de inserción, lo que significa que puede iterar sobre ellas sin tener que verificar hasOwnProperty, que siempre fue realmente un truco.

Iterar sobre un mapa:

var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
for (var [key, value] of myMap) {
  console.log(key + " = " + value);
}
// Will show 2 logs; first with "0 = zero" and second with "1 = one"

for (var key of myMap.keys()) {
  console.log(key);
}
// Will show 2 logs; first with "0" and second with "1"

for (var value of myMap.values()) {
  console.log(value);
}
// Will show 2 logs; first with "zero" and second with "one"

for (var [key, value] of myMap.entries()) {
  console.log(key + " = " + value);
}
// Will show 2 logs; first with "0 = zero" and second with "1 = one"

o use para cada uno:

myMap.forEach(function(value, key) {
  console.log(key + " = " + value);
}, myMap)
// Will show 2 logs; first with "0 = zero" and second with "1 = one"

1646968210 161 ¿Como iterar sobre un objeto JavaScript
Derek Soike

si quieres el clave y valor al iterar, puede usar un para… de bucle con Objeto.entradas.

const myObj = {a: 1, b: 2}

for (let [key, value] of Object.entries(myObj)) {
    console.log(`key=${key} value=${value}`)
}

// output: 
// key=a value=1
// key=b value=2

La única forma confiable de hacer esto sería guardar los datos de su objeto en 2 matrices, una de claves y otra para los datos:

var keys = [];
var data = [];
for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
        keys.push(key);
        data.push(obj[key]); // Not necessary, but cleaner, in my opinion. See the example below.
    }
}

Luego puede iterar sobre las matrices como lo haría normalmente:

for(var i = 0; i < 100; i++){
    console.log(keys[i], data[i]);
    //or
    console.log(keys[i], obj[keys[i]]); // harder to read, I think.
}
for(var i = 100; i < 300; i++){
    console.log(keys[i], data[i]);
}

no estoy usando Object.keys(obj)porque eso es IE 9+.

¿Como iterar sobre un objeto JavaScript
ashishdudhat

->si iteramos sobre un objeto de JavaScript usando y encontramos la clave de la matriz de objetos

Object.keys(Array).forEach(key => {

 console.log('key',key)

})

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad