Iterar a través de las propiedades del objeto

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

for(var propt in obj){
    console.log(propt + ': ' + obj[propt]);
}

¿Cómo proptrepresenta la variable las propiedades del objeto? No es un método o propiedad incorporado. ¿Por qué aparece con todas las propiedades en el objeto?

Iterar sobre propiedades requiere esta hasOwnPropertyverificación adicional :

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

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

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

También es posible llamar a hasOwnPropertytravés del objeto en sí:

if (obj.hasOwnProperty(prop)) {
    // do stuff
}

Pero esto fallará si el objeto tiene un campo no relacionado con el mismo nombre:

var obj = { foo: 42, hasOwnProperty: 'lol' };
obj.hasOwnProperty('foo');  // TypeError: hasOwnProperty is not a function

Es por eso que es más seguro llamarlo Object.prototype:

var obj = { foo: 42, hasOwnProperty: 'lol' };
Object.prototype.hasOwnProperty.call(obj, 'foo');  // true

A partir de JavaScript 1.8.5, puede usar Object.keys(obj)para obtener una matriz de propiedades definidas en el objeto en sí (las que devuelven verdadero 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 la referencia de Object.keys () de Mozilla Developer Network para obtener más información.

Chicas y chicos estamos en 2019 y no tenemos tanto tiempo para escribir ... Así que hagamos este nuevo e interesante ECMAScript 2016:

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

Es la for...in statement( MDN , especificación ECMAScript ).

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

En implementaciones actualizadas 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 => ...)

Es solo un for...inbucle. Consulte la documentación en Mozilla .

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 Object.entries () de Mozillas :

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

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

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

jquery te permite hacer esto ahora:

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

La respuesta de Dominik es perfecta, solo prefiero hacerlo de esa manera, ya que es más claro de leer:

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

    // Do stuff...
}

Las respuestas anteriores son un poco molestas porque no explican lo que haces dentro del ciclo for después de asegurarte de que es un objeto: ¡NO LO ACCEDES DIRECTAMENTE! En realidad, solo se le entrega la CLAVE 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;
  }
}

Todo esto es seguro para ECMA5. Incluso funciona en las versiones JS cojo como Rhino;)

Para agregar el uso de ES2015 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, matrices, matrices escritas, 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 : al escribir esta respuesta (junio de 2018), todos los demás navegadores, excepto IE, admiten generadores e for...ofiteración a través deSymbol.iterator

if(Object.keys(obj).length) {
    Object.keys(obj).forEach(key => {
        console.log("\n" + key + ": " + obj[key]);
    });
}

// *** Explanation line by line ***

// Explaining the bellow line
// It checks if obj has at least one property. Here is how:
// Object.keys(obj) will return an array with all keys in obj
// If there is no keys in obj, it will return empty array = []
// Then it will get it's length, if it has at least one element,
// it's bigger than 0 which evaluates to true and the bellow 
// code will be executed.
// Else means it's length = 0 which evaluates to false
// NOTE: you can use Object.hasOwnProperty() instead of Object.keys(obj).length
if(Object.keys(obj).length) {

    // Explaining the bellow line
    // Just like in the previous line, this returns an array with
    // all keys in obj (because if code execution got here, it means 
    // obj has keys.) 
    // Then just invoke built-in javascript forEach() to loop
    // over each key in returned array and calls a call back function 
    // on each array element (key), using ES6 arrow function (=>)
    // Or you can just use a normal function ((key) { blah blah }).
    Object.keys(obj).forEach(key => {

        // The bellow line prints out all keys with their 
        // respective value in obj.
        // key comes from the returned array in Object.keys(obj)
        // obj[key] returns the value of key in obj
        console.log("\n" + key + ": " + obj[key]);
    });
}

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

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

Un bucle for ... in itera a través de las propiedades enumerables de un objeto. Cualquier variable que defina, o ponga en el bucle for ... in, cambia cada vez que pasa a la siguiente propiedad que itera. La variable en el bucle for ... in itera a través de 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"
    }

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

Espero que esto ayude.

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

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

// a
// 3
// 2

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

Puedes usar Lodash. La documentación

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

Su forciclo está iterando sobre todas las propiedades del objeto obj. proptse define en la primera línea de su bucle for. Es una cadena que es el nombre de una propiedad del objobjeto. En la primera iteración del bucle, proptsería "nombre".

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

Debe pensar objcomo una colección de valores clave.

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 for ofbucle y acceder a sus valores directamente o incluso puede usar un operador de propagación en el objeto también. Frio. 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);

Si ejecuta Node , recomendaría:

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

Si bien la respuesta mejor calificada es correcta, aquí hay un caso de uso alternativo, es decir, si está iterando sobre un objeto y desea crear una matriz al final. Usar en .maplugar deforEach

const newObj = Object.keys(obj).map(el => {
    //ell will hold keys 
   // Getting the value of the keys should be as simple as obj[el]
})

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"} }); 

Lo que hace..in loop 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 usa el bloque {}, puede 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

Aquí estoy iterando cada nodo y creando nombres de nodo significativos. Si nota, instanceOf Array e instanceOf Object prácticamente hace lo mismo (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 - Me inspira la respuesta de Ondrej Svejdar. Pero esta solución tiene un mejor rendimiento y es menos ambigua.

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);

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.

Suponga que tiene 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]);
    }
}

Puede que se sorprenda de ver la conexión de la consola 0, 1etc. cuando se repite a través de las propiedades de prop1y prop2y 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]);

            }

     }
}

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

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

Consulte este enlace, lo ayudará https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_state_forin

var person = {fname:"John", lname:"Doe", age:25}; 

  var text = "";
  var x;
  for (x in person) {
    text += person[x] + " "; // where x will be fname,lname,age
   }
Console.log(text);