¿Cómo recorro o enumero un objeto JavaScript?

Tengo un objeto JavaScript como el siguiente:

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

Ahora quiero recorrer todo p los elementos ( p1, p2, p3...) y obtener sus claves y valores. ¿Cómo puedo hacer eso?

Puedo modificar el objeto JavaScript si es necesario. Mi objetivo final es recorrer algunos pares de valores clave y, si es posible, quiero evitar usareval .

Puede usar el for-inbucle como lo muestran otros. Sin embargo, también debe asegurarse de que la clave que obtiene es una propiedad real de un objeto y no proviene del prototipo.

Aquí está el fragmento:

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

for (var key in p) {
    if (p.hasOwnProperty(key)) {
        console.log(key + " -> " + p[key]);
    }
}

Alternativa For-of con Object.keys ():

var p = {
    0: "value1",
    "b": "value2",
    key: "value3"
};

for (var key of Object.keys(p)) {
    console.log(key + " -> " + p[key])
}

Observe el uso de en for-oflugar de for-in, si no se usa, devolverá indefinido en propiedades con nombre, yObject.keys() garantiza el uso de solo las propiedades propias del objeto sin las propiedades completas de la cadena del prototipo.

Usando el nuevo Object.entries()método:

Nota: Internet Explorer no admite este método de forma nativa. Puede considerar usar un Polyfill para navegadores antiguos.

const p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

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

En ECMAScript 5, puede combinar Object.keys()y Array.prototype.forEach():

var obj = { first: "John", last: "Doe" };

Object.keys(obj).forEach(function(key) {
    console.log(key, obj[key]);
});

ECMAScript 6 agrega for...of:

for (const key of Object.keys(obj)) {
    console.log(key, obj[key]);
}

ECMAScript 8 agrega Object.entries()que evita tener que buscar cada valor en el objeto original:

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

Puedes combinar for...of, desestructurar y Object.entries:

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

Ambos Object.keys()y Object.entries()Iterar propiedades en el mismo orden que un for...inbucle pero ignoran la cadena de prototipo . Solo se iteran las propiedades enumerables propias del objeto.

Tienes que usar el bucle for-in

Pero tenga mucho cuidado al usar este tipo de bucle, porque esto hará un bucle de todas las propiedades a lo largo de la cadena del prototipo .

Por lo tanto, cuando use bucles for-in, siempre use el hasOwnPropertymétodo para determinar si la propiedad actual en iteración es realmente una propiedad del objeto que está revisando:

for (var prop in p) {
    if (!p.hasOwnProperty(prop)) {
        //The current property is not a direct property of p
        continue;
    }
    //Do your logic with the property here
}

La pregunta no estará completa si no mencionamos métodos alternativos para recorrer objetos.

Hoy en día, muchas bibliotecas JavaScript conocidas proporcionan sus propios métodos para iterar sobre colecciones, es decir, sobre matrices , objetos y objetos similares a matrices . Estos métodos son convenientes de usar y son totalmente compatibles con cualquier navegador.

1. Si trabaja con jQuery , puede usar el jQuery.each()método. Se puede usar para iterar sin problemas sobre objetos y matrices:

   $.each(obj, function(key, value) {
       console.log(key, value);
   });

2. En Underscore.js puedes encontrar el método_.each() , que itera sobre una lista de elementos, dando a cada uno una función proporcionada (¡preste atención al orden de los argumentos en la función iteratee !):

   _.each(obj, function(value, key) {
       console.log(key, value);
   });

3. Lo-Dash proporciona varios métodos para iterar sobre las propiedades del objeto. Basic _.forEach()(o su alias _.each()) es útil para recorrer tanto los objetos como las matrices, sin embargo (!) Los objetos con lengthpropiedad se tratan como matrices, y para evitar este comportamiento se sugiere usar_.forIn()_.forOwn() métodos y métodos (estos también tienen valueargumentos en primer lugar):

   _.forIn(obj, function(value, key) {
       console.log(key, value);
   });

   _.forIn()itera sobre propio y heredado propiedades enumerables de un objeto, mientras que _.forOwn()itera solo sobre las propiedades propias de un objeto (básicamente verificando la hasOwnPropertyfunción). Para objetos simples y literales de objeto, cualquiera de estos métodos funcionará bien.

En general, todos los métodos descritos tienen el mismo comportamiento con cualquier objeto suministrado. Además de usar el for..inciclo nativo , generalmente será más rápido que cualquier abstracción, por ejemplo jQuery.each(), estos métodos son considerablemente más fáciles de usar, requieren menos codificación y proporcionan un mejor manejo de errores.

En ECMAScript 5 tiene un nuevo enfoque en los campos de iteración de literal: Object.keys

Más información que puedes ver en MDN

Mi elección está a continuación como una solución más rápida en las versiones actuales de los navegadores (Chrome30, IE10, FF25)

var keys = Object.keys(p),
    len = keys.length,
    i = 0,
    prop,
    value;
while (i < len) {
    prop = keys[i];
    value = p[prop];
    i += 1;
}

Puede comparar el rendimiento de este enfoque con diferentes implementaciones en jsperf.com :

• Ampliar implementaciones
• Iteración de teclas de objeto
• iteración literal de objeto

Soporte de navegador que puede ver en la tabla de compatibilidad de Kangax

Para el navegador antiguo, tiene un polyfill simple y completo

UPD:

Comparación de rendimiento para todos los casos más populares en esta pregunta sobre perfjs.info:

iteración literal de objeto

Prefacio:

• Las propiedades del objeto pueden ser propias (la propiedad está en el objeto mismo) o heredadas (no en el objeto mismo, en uno de sus prototipos).
• Las propiedades del objeto pueden ser enumerables o no enumerables . Las propiedades no enumerables quedan fuera de muchas enumeraciones / matrices de propiedades.
• Los nombres de propiedad pueden ser cadenas o símbolos. Las propiedades cuyos nombres son Símbolos quedan fuera de muchas enumeraciones / matrices de propiedades.

Aquí en 2018, sus opciones para recorrer las propiedades de un objeto son (algunos ejemplos siguen la lista):

1. for-in[ MDN , spec ]: una estructura de bucle que recorre los nombres de las propiedades enumerables de un objeto , incluidas las heredadas, cuyos nombres son cadenas
2. Object.keys[ MDN , spec ] - Una función de proporcionar una matriz de los nombres de los de un objeto propias , enumerables propiedades cuyos nombres son cadenas.
3. Object.values[ MDN , spec ] - Una función de proporcionar una matriz de los valores de de un objeto propias , enumerables propiedades.
4. Object.entries[ MDN , spec ] - Una función de proporcionar una matriz de los nombres y valores de de un objeto propias , enumerables propiedades (cada entrada de la matriz es una [name, value]matriz).
5. Object.getOwnPropertyNames[ MDN , spec ]: una función que proporciona una matriz de los nombres de las propiedades propias de un objeto (incluso las no enumerables) cuyos nombres son cadenas.
6. Object.getOwnPropertySymbols[ MDN , spec ]: una función que proporciona una matriz de los nombres de las propiedades propias de un objeto (incluso las no enumerables) cuyos nombres son símbolos.
7. Reflect.ownKeys[ MDN , spec ]: una función que proporciona una matriz de los nombres de las propiedades propias de un objeto (incluso las no enumerables), ya sea que esos nombres sean cadenas o símbolos.
8. Si desea que todas las propiedades de un objeto, incluyendo las heredadas no enumerables, es necesario utilizar un bucle y Object.getPrototypeOf[ MDN , spec ] y el uso Object.getOwnPropertyNames, Object.getOwnPropertySymbolso Reflect.ownKeysen cada objeto en la cadena de prototipo (ejemplo en la parte inferior de esta respuesta).

Con todos ellos, excepto for-in, que tendría que utilizar algún tipo de bucle construcción de la matriz ( for, for-of, forEach, etc.).

Ejemplos:

for-in:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name in o) {
    const value = o[name];
    console.log(`${name} = ${value}`);
}

Object.keys (con un for-ofbucle, pero puede usar cualquier construcción de bucle) :

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Object.keys(o)) {
    const value = o[name];
    console.log(`${name} = ${value}`);
}

Object.values:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const value of Object.values(o)) {
    console.log(`${value}`);
}

Object.entries:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const [name, value] of Object.entries(o)) {
    console.log(`${name} = ${value}`);
}

Object.getOwnPropertyNames:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Object.getOwnPropertyNames(o)) {
    const value = o[name];
    console.log(`${name} = ${value}`);
}

Object.getOwnPropertySymbols:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Object.getOwnPropertySymbols(o)) {
    const value = o[name];
    console.log(`${String(name)} = ${value}`);
}

Reflect.ownKeys:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Reflect.ownKeys(o)) {
    const value = o[name];
    console.log(`${String(name)} = ${value}`);
}

Todas las propiedades , incluidas las heredadas no enumerables:

// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (let depth = 0, current = o; current; ++depth, current = Object.getPrototypeOf(current)) {
    for (const name of Reflect.ownKeys(current)) {
        const value = o[name];
        console.log(`[${depth}] ${String(name)} = ${String(value)}`);
    }
}

.as-console-wrapper {
  max-height: 100% !important;
}

Puedes iterar sobre él como:

for (var key in p) {
  alert(p[key]);
}

Tenga en cuenta que keyno tomará el valor de la propiedad, es solo un valor de índice.

Como es2015 se está volviendo cada vez más popular, estoy publicando esta respuesta que incluye el uso del generador y el iterador para iterar suavemente a través de [key, value]pares. Como es posible en otros idiomas, por ejemplo, Ruby.

Ok, aquí hay un código:

const MyObject = {
  'a': 'Hello',
  'b': 'it\'s',
  'c': 'me',
  'd': 'you',
  'e': 'looking',
  'f': 'for',
  [Symbol.iterator]: function* () {
    for (const i of Object.keys(this)) {
      yield [i, this[i]];
    }
  }
};

for (const [k, v] of MyObject) {
  console.log(`Here is key ${k} and here is value ${v}`);
}

Toda la información sobre cómo puede hacer un iterador y un generador puede encontrarla en la página del desarrollador Mozilla.

Espero que haya ayudado a alguien.

EDITAR:

ES2017 incluirá lo Object.entriesque hará que la iteración sobre [key, value]pares en objetos sea aún más fácil. Ahora se sabe que será parte de un estándar según el ts39 información de la etapa .

Creo que es hora de actualizar mi respuesta para que se vuelva aún más fresca de lo que es ahora.

const MyObject = {
  'a': 'Hello',
  'b': 'it\'s',
  'c': 'me',
  'd': 'you',
  'e': 'looking',
  'f': 'for',
};

for (const [k, v] of Object.entries(MyObject)) {
  console.log(`Here is key ${k} and here is value ${v}`);
}

Puede encontrar más información sobre el uso en la página MDN

for(key in p) {
  alert( p[key] );
}

Nota: puede hacer esto sobre matrices, pero también iterará sobre las lengthotras propiedades.

Después de revisar todas las respuestas aquí, hasOwnProperty no es necesario para mi propio uso porque mi objeto json está limpio; realmente no tiene sentido agregar ningún procesamiento javascript adicional. Esto es todo lo que estoy usando:

for (var key in p) {
    console.log(key + ' => ' + p[key]);
    // key is key
    // value is p[key]
}

a través de un prototipo con forEach () que debe omitir las propiedades de la cadena del prototipo :

Object.prototype.each = function(f) {
    var obj = this
    Object.keys(obj).forEach( function(key) { 
        f( key , obj[key] ) 
    });
}


//print all keys and values
var obj = {a:1,b:2,c:3}
obj.each(function(key,value) { console.log(key + " " + value) });
// a 1
// b 2
// c 3

Es interesante que las personas en estas respuestas hayan tocado ambos Object.keys()y for...ofnunca los hayan combinado:

var map = {well:'hello', there:'!'};
for (let key of Object.keys(map))
    console.log(key + ':' + map[key]);

_{Puede no sólo for...ofuna Object, porque no es un iterador, y for...indexo .forEach()ing el Object.keys()es feo / ineficiente.
Me alegra que la mayoría de las personas se abstengan for...in(con o sin verificación .hasOwnProperty()), ya que eso también es un poco desordenado, por lo que, aparte de mi respuesta anterior, estoy aquí para decir ...}

¡Puedes hacer que las asociaciones de objetos ordinarios se repitan! Comportarse como Maps con el uso directo de la elegante for...of
DEMO que funciona en Chrome y FF (supongo que solo ES6)

var ordinaryObject = {well:'hello', there:'!'};
for (let pair of ordinaryObject)
    //key:value
    console.log(pair[0] + ':' + pair[1]);

//or
for (let [key, value] of ordinaryObject)
    console.log(key + ':' + value);

Siempre que incluyas mi cuña a continuación:

//makes all objects iterable just like Maps!!! YAY
//iterates over Object.keys() (which already ignores prototype chain for us)
Object.prototype[Symbol.iterator] = function() {
    var keys = Object.keys(this)[Symbol.iterator]();
    var obj = this;
    var output;
    return {next:function() {
        if (!(output = keys.next()).done)
            output.value = [output.value, obj[output.value]];
        return output;
    }};
};

Sin tener que crear un objeto Map real que no tenga el agradable azúcar sintáctico.

var trueMap = new Map([['well', 'hello'], ['there', '!']]);
for (let pair of trueMap)
    console.log(pair[0] + ':' + pair[1]);

De hecho, con esta cuña, si aún desea aprovechar la otra funcionalidad de Map (sin calzarlas todas) pero aún desea usar la notación de objeto ordenada, ya que los objetos ahora son iterables, ¡ahora puede hacer un Mapa a partir de ella!

//shown in demo
var realMap = new Map({well:'hello', there:'!'});

Para aquellos a quienes no les gusta calzar, o meterse con ellos prototypeen general, siéntanse libres de hacer la función en la ventana, llamándola así getObjIterator();

//no prototype manipulation
function getObjIterator(obj) {
    //create a dummy object instead of adding functionality to all objects
    var iterator = new Object();

    //give it what the shim does but as its own local property
    iterator[Symbol.iterator] = function() {
        var keys = Object.keys(obj)[Symbol.iterator]();
        var output;

        return {next:function() {
            if (!(output = keys.next()).done)
                output.value = [output.value, obj[output.value]];
            return output;
        }};
    };

    return iterator;
}

Ahora solo puede llamarlo como una función ordinaria, nada más se ve afectado

var realMap = new Map(getObjIterator({well:'hello', there:'!'}))

o

for (let pair of getObjIterator(ordinaryObject))

No hay razón para que eso no funcione.

Bienvenido al futuro.

Object.keys (obj): Array

recupera todas las claves con valores de cadena de todas las propiedades enumerables propias (no heredadas).

Por lo tanto, proporciona la misma lista de claves que pretendía al probar cada clave de objeto con hasOwnProperty. No necesita esa operación de prueba adicional y Object.keys( obj ).forEach(function( key ){})se supone que es más rápido. Probémoslo:

var uniqid = function(){
			var text = "",
					i = 0,
					possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
			for( ; i < 32; i++ ) {
					text += possible.charAt( Math.floor( Math.random() * possible.length ) );
			}
			return text;
		}, 
		CYCLES = 100000,
		obj = {}, 
		p1,
		p2,
		p3,
		key;

// Populate object with random properties
Array.apply( null, Array( CYCLES ) ).forEach(function(){
	obj[ uniqid() ] = new Date()
});

// Approach #1
p1 = performance.now();
Object.keys( obj ).forEach(function( key ){
	var waste = obj[ key ];
});

p2 = performance.now();
console.log( "Object.keys approach took " + (p2 - p1) + " milliseconds.");

// Approach #2
for( key in obj ) {
	if ( obj.hasOwnProperty( key ) ) {
		var waste = obj[ key ];
	}
}

p3 = performance.now();
console.log( "for...in/hasOwnProperty approach took " + (p3 - p2) + " milliseconds.");

En mi Firefox tengo los siguientes resultados

• El enfoque Object.keys tomó 40.21101451665163 milisegundos.
• para ... en / hasOwnProperty el enfoque tomó 98.26163508463651 milisegundos.

PD. en Chrome la diferencia aún más grande http://codepen.io/dsheiko/pen/JdrqXa

PS2: en ES6 (EcmaScript 2015) puede iterar mejor el objeto iterable:

let map = new Map().set('a', 1).set('b', 2);
for (let pair of map) {
    console.log(pair);
}

// OR 
let map = new Map([
    [false, 'no'],
    [true,  'yes'],
]);
map.forEach((value, key) => {
    console.log(key, value);
});

Aquí hay otro método para iterar a través de un objeto.

   var p = {
"p1": "value1",
"p2": "value2",
"p3": "value3"
};


Object.keys(p).forEach(key => { console.log(key, p[key]) })

También puede usar Object.keys () e iterar sobre las teclas de objeto como a continuación para obtener el valor:

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

Object.keys(p).forEach((key)=> {
 console.log(key +' -> '+ p[key]);
});

Solo código JavaScript sin dependencias:

var p = {"p1": "value1", "p2": "value2", "p3": "value3"};
keys = Object.keys(p);   // ["p1", "p2", "p3"]

for(i = 0; i < keys.length; i++){
  console.log(keys[i] + "=" + p[keys[i]]);   // p1=value1, p2=value2, p3=value3
}

El Object.keys()método devuelve una matriz de propiedades enumerables propias de un objeto dado. Lea más sobre esto aquí

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

Object.keys(p).map((key)=> console.log(key + "->" + p[key]))

Actuación

Hoy 2020.03.06 realizo pruebas de las soluciones elegidas en Chrome v80.0, Safari v13.0.5 y Firefox 73.0.1 en MacOs High Sierra v10.13.6

Conclusiones

• Las soluciones basadas en for-in(A, B) son rápidas (o más rápidas) para todos los navegadores de objetos grandes y pequeños
• Sorprendentemente, la for-ofsolución (H) es rápida en Chrome para objetos pequeños y grandes
• soluciones basadas en índice explícito i (J, K) son bastante rápidas en todos los navegadores para objetos pequeños (para Firefox también es rápido para objetos grandes pero medio rápido en otros navegadores)
• Las soluciones basadas en iteradores (D, E) son más lentas y no se recomiendan
• la solución C es lenta para objetos grandes y medianamente lenta para objetos pequeños

Detalles

Se realizaron pruebas de rendimiento para

• objeto pequeño - con 3 campos - puede realizar pruebas en su máquina AQUÍ
• objeto 'grande' - con 1000 campos - puede realizar pruebas en su máquina AQUÍ

A continuación, los fragmentos presentan soluciones usadas

function A(obj,s='') {
	for (let key in obj) if (obj.hasOwnProperty(key)) s+=key+'->'+obj[key] + ' ';
  return s;
}

function B(obj,s='') {
	for (let key in obj) s+=key+'->'+obj[key] + ' ';
  return s;
}

function C(obj,s='') {
  const map = new Map(Object.entries(obj));
	for (let [key,value] of map) s+=key+'->'+value + ' ';
  return s;
}

function D(obj,s='') {
  let o = { 
    ...obj,
    *[Symbol.iterator]() {
      for (const i of Object.keys(this)) yield [i, this[i]];    
    }
  }
  for (let [key,value] of o) s+=key+'->'+value + ' ';
  return s;
}

function E(obj,s='') {
  let o = { 
    ...obj,
    *[Symbol.iterator]() {yield *Object.keys(this)}
  }
  for (let key of o) s+=key+'->'+o[key] + ' ';
  return s;
}

function F(obj,s='') {
	for (let key of Object.keys(obj)) s+=key+'->'+obj[key]+' ';
  return s;
}

function G(obj,s='') {
	for (let [key, value] of Object.entries(obj)) s+=key+'->'+value+' ';
  return s;
}

function H(obj,s='') {
	for (let key of Object.getOwnPropertyNames(obj)) s+=key+'->'+obj[key]+' ';
  return s;
}

function I(obj,s='') {
	for (const key of Reflect.ownKeys(obj)) s+=key+'->'+obj[key]+' ';
  return s;
}

function J(obj,s='') {
  let keys = Object.keys(obj);
	for(let i = 0; i < keys.length; i++){
    let key = keys[i];
    s+=key+'->'+obj[key]+' ';
  }
  return s;
}

function K(obj,s='') {
  var keys = Object.keys(obj), len = keys.length, i = 0;
  while (i < len) {
    let key = keys[i];
    s+=key+'->'+obj[key]+' ';
    i += 1;
  }
  return s;
}

function L(obj,s='') {
  Object.keys(obj).forEach(key=> s+=key+'->'+obj[key]+' ' );
  return s;
}

function M(obj,s='') {
  Object.entries(obj).forEach(([key, value]) => s+=key+'->'+value+' ');
  return s;
}

function N(obj,s='') {
  Object.getOwnPropertyNames(obj).forEach(key => s+=key+'->'+obj[key]+' ');
  return s;
}

function O(obj,s='') {
  Reflect.ownKeys(obj).forEach(key=> s+=key+'->'+obj[key]+' ' );
  return s;
}



// TEST

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};
let log = (name,f) => console.log(`${name} ${f(p)}`)

log('A',A);
log('B',B);
log('C',C);
log('D',D);
log('E',E);
log('F',F);
log('G',G);
log('H',H);
log('I',I);
log('J',J);
log('K',K);
log('L',L);
log('M',M);
log('N',N);
log('O',O);

This snippet only presents choosen solutions

Y aquí están los resultados para objetos pequeños en cromo

Puede agregar una función forEach simple a todos los objetos, para que pueda recorrer automáticamente cualquier objeto:

Object.defineProperty(Object.prototype, 'forEach', {
    value: function (func) {
        for (var key in this) {
            if (!this.hasOwnProperty(key)) {
                // skip loop if the property is from prototype
                continue;
            }
            var value = this[key];
            func(key, value);
        }
    },
    enumerable: false
});

Para aquellas personas a las que no les gusta el método " para ... en ":

Object.defineProperty(Object.prototype, 'forEach', {
    value: function (func) {
        var arr = Object.keys(this);
        for (var i = 0; i < arr.length; i++) {
            var key = arr[i];
            func(key, this[key]);
        }
    },
    enumerable: false
});

Ahora, puede llamar simple:

p.forEach (function(key, value){
    console.log ("Key: " + key);
    console.log ("Value: " + value);
});

Si no desea tener conflictos con otros métodos para cada método, puede nombrarlo con su nombre único.

Los bucles pueden ser bastante interesantes cuando se usa JavaScript puro. Parece que solo ECMA6 (nueva especificación JavaScript 2015) tiene los bucles bajo control. Desafortunadamente, mientras escribo esto, los navegadores y el popular entorno de desarrollo integrado (IDE) todavía están luchando para soportar completamente las nuevas campanas y silbatos.

De un vistazo, aquí se ve un bucle de objetos JavaScript antes de ECMA6:

for (var key in object) {
  if (p.hasOwnProperty(key)) {
    var value = object[key];
    console.log(key); // This is the key;
    console.log(value); // This is the value;
  }
}

Además, sé que esto está fuera de alcance con esta pregunta, pero en 2011, ECMAScript 5.1 agregó el forEachmétodo solo para matrices, que básicamente creó una nueva forma mejorada de recorrer las matrices y al mismo tiempo dejar objetos no iterables con el antiguo forciclo detallado y confuso . Pero la parte extraña es que este nuevo forEachmétodo no es compatible, lo breakque condujo a todo tipo de problemas.

Básicamente, en 2011, no hay una forma realmente sólida de bucle en JavaScript que no sea lo que muchas bibliotecas populares (jQuery, Underscore, etc.) decidieron volver a implementar.

A partir de 2015, ahora tenemos una mejor manera de hacer un bucle (y romper) cualquier tipo de objeto (incluidas matrices y cadenas). Así es como se verá un bucle en JavaScript cuando la recomendación se convierta en la corriente principal:

for (let [key, value] of Object.entries(object)) {
    console.log(key); // This is the key;
    console.log(value); // This is the value;
}

Tenga en cuenta que la mayoría de los navegadores no admitirán el código anterior a partir del 18 de junio de 2016. Incluso en Chrome, debe habilitar este indicador especial para que funcione: chrome://flags/#enable-javascript-harmony

Hasta que este se convierta en el nuevo estándar, el método anterior todavía puede usarse, pero también hay alternativas en bibliotecas populares o incluso alternativas livianas para aquellos que no usan ninguna de estas bibliotecas.

En ES6 tenemos símbolos bien conocidos para exponer algunos métodos internos anteriores, puede usarlo para definir cómo funcionan los iteradores para este objeto:

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3",
    *[Symbol.iterator]() {
        yield *Object.keys(this);
    }
};

[...p] //["p1", "p2", "p3"]

esto dará el mismo resultado que usar for ... en el bucle es6.

for(var key in p) {
    console.log(key);
}

¡Pero es importante conocer las capacidades que tiene ahora usando es6!

Haría esto en lugar de verificar obj.hasOwnerPropertydentro de cada for ... inbucle.

var obj = {a : 1};
for(var key in obj){
    //obj.hasOwnProperty(key) is not needed.
    console.log(key);
}
//then check if anybody has messed the native object. Put this code at the end of the page.
for(var key in Object){
    throw new Error("Please don't extend the native object");
}

Usando un for-ofencendidoObject.keys()

Me gusta:

let object = {
   "key1": "value1"
   "key2": "value2"
   "key3": "value3"
};

for (var key of Object.keys(p)) {
   console.log(key + " : " + object[key])
}

Si también desea iterar sobre propiedades no enumerables , puede usar Object.getOwnPropertyNames(obj)para devolver una matriz de todas las propiedades (enumerables o no) encontradas directamente sobre un objeto dado.

var obj = Object.create({}, {
  // non-enumerable property
  getFoo: {
    value: function() { return this.foo; },
    enumerable: false
  }
});

obj.foo = 1; // enumerable property

Object.getOwnPropertyNames(obj).forEach(function (name) {
  document.write(name + ': ' + obj[name] + '<br/>');
});

Si alguien necesita recorrer los objetos de matriz con condición :

var arrayObjects = [{"building":"A", "status":"good"},{"building":"B","status":"horrible"}];

for (var i=0; i< arrayObjects.length; i++) {
  console.log(arrayObjects[i]);
  
  for(key in arrayObjects[i]) {      
    
      if (key == "status" && arrayObjects[i][key] == "good") {
        
          console.log(key + "->" + arrayObjects[i][key]);
      }else{
          console.log("nothing found");
      }
   }
}

Considerando ES6, me gustaría agregar mi propia cucharada de azúcar y proporcionar un enfoque más para iterar sobre las propiedades del objeto.

Dado que el objeto JS simple no es iterable de fábrica, no podemos usar el for..ofbucle para iterar sobre su contenido. Pero nadie puede detenernos para que sea iterable .

Vamos a tener bookobjeto.

let book = {
  title: "Amazing book",
  author: "Me",
  pages: 3
}

book[Symbol.iterator] = function(){

  let properties = Object.keys(this); // returns an array with property names
  let counter = 0;
  let isDone = false;

  let next = () => {
    if(counter >= properties.length){
      isDone = true;
    }
    return { done: isDone, value: this[properties[counter++]] }
  }

  return { next };
}

Como lo hemos hecho, podemos usarlo de esta manera:

for(let pValue of book){
  console.log(pValue);
}
------------------------
Amazing book
Me
3

O si conoce el poder de los generadores ES6 , entonces ciertamente puede hacer que el código anterior sea mucho más corto.

book[Symbol.iterator] = function *(){

  let properties = Object.keys(this);
  for (let p of properties){
    yield this[p];
  }

}

Claro, puede aplicar dicho comportamiento para todos los objetos haciendo que sea Objectiterable en el prototypenivel.

Object.prototype[Symbol.iterator] = function() {...}

Además, los objetos que cumplen con el protocolo iterable se pueden usar con el nuevo operador de propagación de características ES2015, por lo que podemos leer los valores de las propiedades de los objetos como una matriz.

let pValues = [...book];
console.log(pValues);
-------------------------
["Amazing book", "Me", 3]

O puede usar la asignación de desestructuración :

let [title, , pages] = book; // notice that we can just skip unnecessary values
console.log(title);
console.log(pages);
------------------
Amazing book
3

Puede consultar JSFiddle con todo el código que he proporcionado anteriormente.

desde ES06 puede obtener los valores de un objeto como matriz con

let arrValues = Object.values( yourObject) ;

¡devuelve una matriz de valores de objetos y no extrae valores de Prototype!

MDN DOCS Object.values ​​()

y para llaves (ya respondí antes que yo aquí)

let arrKeys   = Object.keys(yourObject);

En la última secuencia de comandos ES, puede hacer algo como esto:

let p = {foo: "bar"};
for (let [key, value] of Object.entries(p)) {
  console.log(key, value);
}