javascript - recorrer - Iterar a través de las propiedades del objeto.

recorrer array de objetos javascript

Question

 var obj = {
  name: "Simon",
  age: "20",
  clothing: {
   style: "simple",
   hipster: false
  }
 }

 for(var propt in obj){
  alert(propt + '': '' + obj[propt]);
 }

¿Cómo representa la variable propt las propiedades del objeto? No es un método incorporado, o propiedad. Entonces, ¿por qué aparece cada propiedad en el objeto?

Answer 1

A partir de JavaScript 1.8.5, puede utilizar Object.keys(obj) para obtener una matriz de propiedades definidas en el objeto en sí (las que devuelven true para obj.hasOwnProperty(key) ).

Object.keys(obj).forEach(function(key,index) {
    // key: the name of the object key
    // index: the ordinal position of the key within the object 
});

Esto es mejor (y más legible) que usar un bucle for-in.

Es compatible con estos navegadores:

• Firefox (Gecko): 4 (2.0)
• Cromo: 5
• Internet Explorer: 9

Consulte developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… de developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… para obtener más información.

Answer 2

Añadiendo también la forma recursiva:

function iterate(obj) {
    // watch for objects we''ve already iterated so we won''t end in endless cycle
    // for cases like var foo = {}; foo.bar = foo; iterate(foo);
    var walked = [];
    var stack = [{obj: obj, stack: ''''}];
    while(stack.length > 0)
    {
        var item = stack.pop();
        var obj = item.obj;
        for (var property in obj) {
            if (obj.hasOwnProperty(property)) {
                if (typeof obj[property] == "object") {
                  // check if we haven''t iterated through the reference yet
                  var alreadyFound = false;
                  for(var i = 0; i < walked.length; i++)
                  {
                    if (walked[i] === obj[property])
                    {
                      alreadyFound = true;
                      break;
                    }
                  }
                  // new object reference
                  if (!alreadyFound)
                  {
                    walked.push(obj[property]);
                    stack.push({obj: obj[property], stack: item.stack + ''.'' + property});
                  }
                }
                else
                {
                    console.log(item.stack + ''.'' + property + "=" + obj[property]);
                }
            }
        }
    }
}

Uso:

iterate({ foo: "foo", bar: { foo: "foo"} }); 

Answer 3

Aquí estoy iterando cada nodo y creando nombres de nodo significativos. Si te das cuenta, instanceOf Array y instanceOf Object hacen prácticamente lo mismo (aunque en mi aplicación, estoy dando una lógica diferente)

function iterate(obj,parent_node) {
    parent_node = parent_node || '''';
    for (var property in obj) {
        if (obj.hasOwnProperty(property)) {
            var node = parent_node + "/" + property;
            if(obj[property] instanceof Array) {
                //console.log(''array: '' + node + ":" + obj[property]);
                iterate(obj[property],node)
            } else if(obj[property] instanceof Object){
                //console.log(''Object: '' + node + ":" + obj[property]);
                iterate(obj[property],node)
            }
            else {
                console.log(node + ":" + obj[property]);
            }
        }
    }
}

nota - Estoy inspirado en la respuesta de Ondrej Svejdar. Pero esta solución tiene mejor rendimiento y menos ambigua.

Answer 4

Básicamente desea recorrer cada propiedad en el objeto.

JSFiddle

var Dictionary = {
  If: {
    you: {
      can: '''',
      make: ''''
    },
    sense: ''''
  },
  of: {
    the: {
      sentence: {
        it: '''',
        worked: ''''
      }
    }
  }
};

function Iterate(obj) {
  for (prop in obj) {
    if (obj.hasOwnProperty(prop) && isNaN(prop)) {
      console.log(prop + '': '' + obj[prop]);
      Iterate(obj[prop]);
    }
  }
}
Iterate(Dictionary);

Answer 5

El bucle for ... in representa cada propiedad en un objeto porque es como un bucle for. Definiste propt en el bucle for ... in haciendo:

    for(var propt in obj){
alert(propt + '': '' + obj[propt]);
}

Un bucle for ... in recorre las enumerables propiedades de un objeto. Cualquiera que sea la variable que defina, o coloque en el bucle for ... in, cambia cada vez que pasa a la siguiente propiedad que itera. La variable en el bucle for ... in recorre las claves, pero su valor es el valor de la clave. Por ejemplo:

    for(var propt in obj) {
      console.log(propt);//logs name
      console.log(obj[propt]);//logs "Simon"
    }

Puedes ver cómo la variable difiere del valor de la variable. En contraste, un for ... of loop hace lo contrario.

Espero que esto ayude.

Answer 6

En las próximas versiones de ES, puede usar Object.entries :

for (const [key, value] of Object.entries(obj)) { }

o

Object.entries(obj).forEach(([key, value]) => ...)

Si solo desea iterar sobre los valores, use Object.values:

for (const value of Object.values(obj)) { }

o

Object.values(obj).forEach(value => ...)

Answer 7

Es la for...in statement ( MDN , ECMAScript spec ).

Puede leerlo como " PARA cada propiedad EN el objeto obj , asigne cada propiedad a la variable PROPT a su vez".

Answer 8

Es solo un for...in loop. Echa un vistazo a la documentación en Mozilla .

Answer 9

Hoy en día, puede convertir un objeto JS estándar en un objeto iterable simplemente agregando un método Symbol.iterator. Luego puede usar un bucle for y acceder directamente a sus valores o incluso puede usar un operador de propagación en el objeto también. Guay. Veamos cómo podemos hacerlo:

var o = {a:1,b:2,c:3},
    a = [];
o[Symbol.iterator] = function*(){
                       var ok = Object.keys(this);
                            i = 0;
                       while (i < ok.length) yield this[ok[i++]];
                     };
for (var value of o) console.log(value);
// or you can even do like
a = [...o];
console.log(a);

Answer 10

La iteración sobre las propiedades requiere esta verificación hasOwnProperty adicional:

for (var property in object) {
    if (object.hasOwnProperty(property)) {
        // do stuff
    }
}

Es necesario porque el prototipo de un objeto contiene propiedades adicionales para el objeto que técnicamente forman parte del objeto. Estas propiedades adicionales se heredan de la clase de objeto base, pero siguen siendo propiedades del object .

hasOwnProperty simplemente verifica si esta es una propiedad específica de esta clase y no una heredada de la clase base.

Answer 11

Las respuestas anteriores son un poco molestas porque no explican lo que hace dentro del bucle for después de asegurarse de que sea un objeto: ¡NO LO ACCEDE DIRECTAMENTE! En realidad, solo se le entrega la LLAVE que debe aplicar al OBJ:

var obj = {
  a: "foo",
  b: "bar",
  c: "foobar"
};

// We need to iterate the string keys (not the objects)
for(var someKey in obj)
{
  // We check if this key exists in the obj
  if (obj.hasOwnProperty(someKey))
  {
    // someKey is only the KEY (string)! Use it to get the obj:
    var myActualPropFromObj = obj[someKey]; // Since dynamic, use [] since the key isn''t literally named "someKey"

    // NOW you can treat it like an obj
    var shouldBeBar = myActualPropFromObj.b;
  }
}

Esto es todo ECMA5 seguro. Incluso funciona en las versiones cojo JS como Rhino;)

Answer 12

Lo que for..in loop hace es que crea una nueva variable (var someVariable) y luego almacena cada propiedad del objeto dado en esta nueva variable (someVariable) una por una. Por lo tanto, si usas el bloque {}, puedes iterar. Considere el siguiente ejemplo.

var obj = {
     name:''raman'',
     hobby:''coding'',
     planet:''earth''
     };

for(var someVariable in obj) {
  //do nothing..
}

console.log(someVariable); // outputs planet

Answer 13

Los objetos en JavaScript son colecciones de propiedades y, por lo tanto, se pueden enlazar para cada declaración.

Debe pensar en obj como una colección de valores clave.

Answer 14

Para agregar el uso de Reflect.ownKeys(obj) de Reflect.ownKeys(obj) y también iterar sobre las propiedades a través de un iterador.

Por ejemplo:

let obj = { a: ''Carrot'', b: ''Potato'', Car: { doors: 4 } };

puede ser iterado por

// logs each key
Reflect.ownKeys(obj).forEach(key => console.log(key));

Si desea iterar directamente sobre los valores de las claves de un objeto, puede definir un iterator , al igual que los iteradores predeterminados de JavaScipts para cadenas, arrays, matrices tipeadas, Map y Set.

JS intentará iterar a través de la propiedad de iterador predeterminada, que debe definirse como Symbol.iterator .

Si desea poder iterar sobre todos los objetos, puede agregarlo como un prototipo de Objeto:

Object.prototype[Symbol.iterator] = function*() { 
    for(p of Reflect.ownKeys(this)){ yield this[p]; }
}

Esto le permitiría iterar sobre los valores de un objeto con un bucle for ... of, por ejemplo:

for(val of obj) { console.log(''Value is:'' + val ) }

Precaución : A partir de la redacción de esta respuesta (junio de 2018), todos los demás navegadores, pero IE, admiten generadores y for...of iteración a través de Symbol.iterator

Answer 15

Para refinar aún más la respuesta aceptada, vale la pena señalar que si var object = Object.create(null) una instancia del objeto con var object = Object.create(null) , object.hasOwnProperty(property) activará un TypeError. Así que para estar seguro, necesitarías llamarlo desde el prototipo de esta manera:

for (var property in object) {
    if (Object.prototype.hasOwnProperty.call(object, property)) {
        // do stuff
    }
}

Answer 16

Puedes usar Lodash. La documentación

var obj = {a: 1, b: 2, c: 3};
_.keys(obj).forEach(function (key) {
    ...
});

Answer 17

Quiero agregar a las respuestas anteriores, porque es posible que tenga diferentes intenciones de Javascript. Un objeto JSON y un objeto Javascript son cosas diferentes, y es posible que desee recorrer las propiedades de un objeto JSON utilizando las soluciones propuestas anteriormente, y luego sorprenderse.

Supongamos que tienes un objeto JSON como:

var example = {
    "prop1": "value1",
    "prop2": [ "value2_0", value2_1"],
    "prop3": {
         "prop3_1": "value3_1"
    }
}

La forma incorrecta de iterar a través de sus ''propiedades'':

function recursivelyIterateProperties(jsonObject) {
    for (var prop in Object.keys(example)) {
        console.log(prop);
        recursivelyIterateProperties(jsonObject[prop]);
    }
}

Es posible que se sorprenda al ver que la consola registra 0 , 1 , etc. cuando recorre las propiedades de prop1 y prop2 y de prop3_1 . Esos objetos son secuencias, y los índices de una secuencia son propiedades de ese objeto en Javascript.

Una mejor manera de iterar recursivamente a través de las propiedades de un objeto JSON sería verificar primero si ese objeto es una secuencia o no:

function recursivelyIterateProperties(jsonObject) {
    for (var prop in Object.keys(example)) {
        console.log(prop);
        if (!(typeof(jsonObject[prop]) === ''string'')
            && !(jsonObject[prop] instanceof Array)) {
                recursivelyIterateProperties(jsonObject[prop]);

            }

     }
}

Answer 18

Si ejecutas Nodo te recomiendo:

Object.keys(obj).forEach((key, index) => {
    console.log(key);
});

Answer 19

Si su entorno es compatible con ES2017 , recomendaría Object.entries :

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

Como se muestra en la documentación de Mozillas Object.entries () :

El método Object.entries () devuelve una matriz de los pares de la propiedad enumerable [clave, valor] de un objeto dado, en el mismo orden que el proporcionado por un bucle for ... in (la diferencia es que un bucle for-in se enumera propiedades en la cadena de prototipos también).

Básicamente, con Object.entries podemos renunciar al siguiente paso adicional que se requiere con el bucle anterior para ... in :

// This step is not necessary with Object.entries
if (object.hasOwnProperty(property)) {
  // do stuff
}

Answer 20

Somos chicas y chicos en 2017 y no tenemos mucho tiempo para escribir ... Así que hagamos esta nueva y elegante edición de ECMAScript 2016:

Object.keys(obj).forEach(e => console.log(`key=${e}  value=${obj[e]}`));

Answer 21

Su bucle for está repitiendo sobre todas las propiedades del objeto obj . propt se define en la primera línea de su bucle for. Es una cadena que es el nombre de una propiedad del objeto obj . En la primera iteración del bucle, propt sería "name".

Answer 22

jquery te permite hacer esto ahora:

$.each( obj, function( key, value ) {
  alert( key + ": " + value );
});

Answer 23

Dominik''s respuesta Dominik''s es perfecta, prefiero hacerlo de esa manera, ya que es más limpio de leer:

for (var property in object) {
    if (!object.hasOwnProperty(property)) continue;

    // Do stuff...
}

Answer 24

Object.keys(obj).forEach(key =>
  console.log(`key=${key} value=${obj[key]}`)
);

Answer 25

let obj = {"a": 3, "b": 2, "6": "a"}

Object.keys(obj).map((item) => {console.log("item", obj[item])})

// a
// 3
// 2