Como percorrer ou enumerar um objeto JavaScript?

Eu tenho um objeto JavaScript como o seguinte:

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

Agora eu quero percorrer todos pos elementos ( p1, p2, p3...) e obter as suas chaves e valores. Como eu posso fazer isso?

Eu posso modificar o objeto JavaScript, se necessário. Meu objetivo final é percorrer alguns pares de valores-chave e, se possível, quero evitar o uso eval.

Você pode usar o for-inloop como mostrado por outras pessoas. No entanto, você também precisa se certificar de que a chave que obtém é uma propriedade real de um objeto e não vem do protótipo.

Aqui está o trecho:

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

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

For-of com Object.keys () alternativa:

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

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

Observe que o uso de, em for-ofvez de for-in, se não for usado, retornará indefinido nas propriedades nomeadas e Object.keys()assegura o uso apenas das próprias propriedades do objeto sem as propriedades da cadeia de protótipos inteiras

Usando o novo Object.entries()método:

Nota: Este método não é suportado nativamente pelo Internet Explorer. Você pode considerar usar um Polyfill para navegadores mais antigos.

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

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

No ECMAScript 5, você pode combinar Object.keys()e Array.prototype.forEach():

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

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

O ECMAScript 6 acrescenta for...of:

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

O ECMAScript 8 adiciona o Object.entries()que evita a necessidade de procurar cada valor no objeto original:

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

Você pode combinar for...of, desestruturar e Object.entries:

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

As propriedades Object.keys()e Object.entries()iteram na mesma ordem que um for...inloop, mas ignoram a cadeia de protótipos . Somente as propriedades enumeráveis ​​do próprio objeto são iteradas.

Você precisa usar o loop for-in

Mas tenha muito cuidado ao usar esse tipo de loop, porque isso fará um loop em todas as propriedades ao longo da cadeia de protótipos .

Portanto, ao usar loops de entrada, sempre use o hasOwnPropertymétodo para determinar se a propriedade atual na iteração é realmente uma propriedade do objeto que você está verificando:

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
}

A pergunta não estará completa se não mencionarmos métodos alternativos para percorrer objetos.

Atualmente, muitas bibliotecas JavaScript conhecidas fornecem seus próprios métodos para iterar sobre coleções, ou seja, sobre matrizes , objetos e objetos semelhantes a matrizes . Esses métodos são fáceis de usar e são totalmente compatíveis com qualquer navegador.

1. Se você trabalha com jQuery , pode usar o jQuery.each()método Ele pode ser usado para iterar perfeitamente objetos e matrizes:

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

2. No Underscore.js, você encontra o método _.each(), que itera sobre uma lista de elementos, resultando cada um em uma função fornecida (preste atenção à ordem dos argumentos na função iteratee !):

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

3. O Lo-Dash fornece vários métodos para iterar sobre as propriedades do objeto. Básico _.forEach()(ou seu alias _.each()) é útil para fazer loop entre objetos e matrizes, no entanto (!) Objetos com lengthpropriedade são tratados como matrizes, e para evitar esse comportamento, é recomendável usar métodos _.forIn()e _.forOwn()métodos (estes também têm valueargumentos em primeiro lugar):

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

   _.forIn()itera sobre propriedades enumeráveis próprias e herdadas de um objeto, enquanto _.forOwn()itera apenas sobre propriedades próprias de um objeto (basicamente verificando a hasOwnPropertyfunção). Para objetos simples e literais de objeto, qualquer um desses métodos funcionará bem.

Geralmente todos os métodos descritos têm o mesmo comportamento com todos os objetos fornecidos. Além de usar o for..inloop nativo , geralmente será mais rápido do que qualquer abstração, como, por exemplo jQuery.each(), esses métodos são consideravelmente mais fáceis de usar, exigem menos codificação e fornecem melhor tratamento de erros.

No ECMAScript 5, você tem uma nova abordagem nos campos de iteração literal - Object.keys

Mais informações que você pode ver no MDN

Minha opção está abaixo como uma solução mais rápida nas versões atuais de 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;
}

Você pode comparar o desempenho dessa abordagem com diferentes implementações em jsperf.com :

• Estender implementações
• Iteração de Chaves de Objeto
• iteração literal do objeto

Suporte ao navegador que você pode ver na tabela de compatibilidade do Kangax

Para o navegador antigo, você tem o polyfill simples e completo

UPD:

comparação de desempenho para todos os casos mais populares nesta pergunta em perfjs.info:

iteração literal do objeto

Prefácio:

• As propriedades do objeto podem ser próprias (a propriedade está no próprio objeto) ou herdadas (não no próprio objeto, em um de seus protótipos).
• As propriedades do objeto podem ser enumeráveis ou não enumeráveis . Propriedades não enumeráveis ​​são deixadas de fora de muitas enumerações / matrizes de propriedades.
• Os nomes das propriedades podem ser cadeias ou símbolos. As propriedades cujos nomes são Símbolos são deixadas de fora de muitas enumerações / matrizes de propriedades.

Aqui em 2018, suas opções para percorrer as propriedades de um objeto são (alguns exemplos seguem a lista):

1. for-in[ MDN , spec ] - Uma estrutura de loop que percorre os nomes das propriedades enumeráveis de um objeto , incluindo as herdadas, cujos nomes são cadeias
2. Object.keys[ MDN , especificação ] - A função de fornecer uma matriz dos nomes dos de um objeto próprio , enumeráveis propriedades cujos nomes são strings.
3. Object.values[ MDN , especificação ] - Uma função de proporcionar uma matriz de valores de de um objecto próprios , enumeráveis propriedades.
4. Object.entries[ MDN , especificação ] - Uma função que fornece uma disposição dos nomes e os valores de de um objecto próprios , enumeráveis propriedades (cada entrada na matriz é uma [name, value]matriz).
5. Object.getOwnPropertyNames[ MDN , especificação ] - A função de fornecer uma matriz dos nomes dos de um objeto próprias propriedades (mesmo os não-enumeráveis) cujos nomes são strings.
6. Object.getOwnPropertySymbols[ MDN , especificação ] - A função de fornecer uma matriz dos nomes dos de um objeto próprias propriedades (mesmo os não-enumeráveis) cujos nomes são símbolos.
7. Reflect.ownKeys[ MDN , especificação ] - Uma função que fornece uma disposição dos nomes dos de um objecto próprias propriedades (mesmo aqueles não-enumeráveis), se esses nomes são cadeias de caracteres ou símbolos.
8. Se você quer tudo de propriedades de um objeto, incluindo aqueles herdados não-enumeráveis, você precisa usar um loop e Object.getPrototypeOf[ MDN , especificação ] e utilização Object.getOwnPropertyNames, Object.getOwnPropertySymbolsou Reflect.ownKeysem cada objeto na cadeia de protótipos (exemplo na parte inferior desta resposta).

Com todos eles, exceto for-in, você pode usar algum tipo de looping construção no array ( for, for-of, forEach, etc.).

Exemplos:

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 (com um for-ofloop, mas você pode usar qualquer construção de loop) :

// 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 as propriedades , incluindo as não enumeráveis ​​herdadas:

// 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;
}

Você pode simplesmente iterar sobre isso como:

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

Observe que keynão assumirá o valor da propriedade, é apenas um valor de índice.

Como o es2015 está se tornando cada vez mais popular, estou postando esta resposta, que inclui o uso de gerador e iterador para iterar suavemente através de [key, value]pares. Como é possível em outros idiomas, por exemplo, Ruby.

Ok, aqui está um 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}`);
}

Todas as informações sobre como você pode criar um iterador e gerador podem ser encontradas na página do desenvolvedor Mozilla.

Espero que tenha ajudado alguém.

EDITAR:

O ES2017 incluirá o Object.entriesque tornará a iteração sobre [key, value]pares em objetos ainda mais fácil. Sabe-se agora que fará parte de um padrão de acordo com as informações do estágio ts39 .

Acho que está na hora de atualizar minha resposta para deixá-la ainda mais atual do que é agora.

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

Você pode encontrar mais informações sobre o uso na página MDN

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

Nota: você pode fazer isso através de matrizes, mas também repetirá as lengthpropriedades e outras.

Depois de examinar todas as respostas aqui, o hasOwnProperty não é necessário para meu próprio uso porque meu objeto json está limpo; realmente não faz sentido adicionar nenhum processamento javascript adicional. Isso é tudo o que estou usando:

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

através da protótipo com forEach (), que deve pular as propriedades da cadeia de protótipos :

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

É pessoas interessantes nestas respostas tocaram em ambos Object.keys()e for...ofmas nunca combinou-os:

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

_{Você pode não apenas for...ofum Object, porque não é um iterador, e for...indexou .forEach()ing o Object.keys()é feio / ineficiente.
Fico feliz que a maioria das pessoas se abstenha de for...in(com ou sem verificação .hasOwnProperty()), pois isso também é um pouco confuso, então, além da minha resposta acima, estou aqui para dizer ...}

Você pode fazer associações de objetos comuns iterarem! Comportando-se como Maps com o uso direto da for...of
DEMO chique trabalhando no Chrome e no FF (presumo apenas o 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);

Contanto que você inclua meu calço abaixo:

//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;
    }};
};

Sem ter que criar um objeto de mapa real que não tenha o bom açúcar sintático.

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

De fato, com esse calço, se você ainda deseja tirar proveito das outras funcionalidades do Map (sem compor todas), mas ainda deseja usar a notação de objeto, uma vez que os objetos agora são iteráveis, agora você pode fazer um mapa a partir dele!

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

Para quem não gosta de brincar ou mexer prototypeem geral, sinta-se à vontade para fazer a função na janela, chamando-a de algo parecido com getObjIterator()isso;

//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;
}

Agora você pode chamá-lo como uma função comum, nada mais é afetado

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

ou

for (let pair of getObjIterator(ordinaryObject))

Não há razão para que isso não funcione.

Bem vindo ao futuro.

Object.keys (obj): matriz

recupera todas as chaves com valor de seqüência de caracteres de todas as propriedades enumeráveis ​​próprias (não herdadas).

Portanto, ele fornece a mesma lista de chaves que você pretende, testando cada chave de objeto com hasOwnProperty. Você não precisa dessa operação de teste extra e Object.keys( obj ).forEach(function( key ){})deve ser mais rápida. Vamos provar:

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

No meu Firefox, tenho os seguintes resultados

• A abordagem Object.keys levou 40,21101451665163 milissegundos.
• para ... em / a abordagem hasOwnProperty levou 98,26163508463651 milissegundos.

PS. no Chrome, a diferença ainda maior http://codepen.io/dsheiko/pen/JdrqXa

PS2: no ES6 (EcmaScript 2015), você pode iterar objetos iteráveis ​​melhor:

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

Aqui está outro método para iterar através de um objeto.

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


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

Você também pode usar Object.keys () e iterar sobre as chaves de objeto, como abaixo, para obter o valor:

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

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

Somente código JavaScript sem dependências:

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
}

O Object.keys()método retorna uma matriz das propriedades enumeráveis ​​de um determinado objeto. Leia mais sobre isso aqui

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

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

atuação

Hoje 2020.03.06 realizo testes de soluções escolhidas no Chrome v80.0, Safari v13.0.5 e Firefox 73.0.1 no MacOs High Sierra v10.13.6

Conclusões

• As soluções baseadas em for-in(A, B) são rápidas (ou mais rápidas) para todos os navegadores para objetos grandes e pequenos
• surpreendentemente for-of(H) a solução é rápida no chrome para objetos pequenos e grandes
• soluções baseadas em índice explícito i (J, K) são bastante rápidas em todos os navegadores para objetos pequenos (para o firefox também são rápidas em objetos grandes, mas são rápidas em outros navegadores)
• soluções baseadas em iteradores (D, E) são mais lentas e não são recomendadas
• solução C é lenta para objetos grandes e média lenta para objetos pequenos

Detalhes

Testes de desempenho foram realizados para

• objeto pequeno - com 3 campos - você pode executar o teste em sua máquina AQUI
• objeto 'grande' - com 1000 campos - você pode executar o teste em sua máquina AQUI

Os trechos abaixo apresentam soluções 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

E aqui estão os resultados para pequenos objetos no chrome

Você pode adicionar uma função forEach simples a todos os objetos, para poder percorrer automaticamente qualquer 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 aquelas pessoas que não gostam do método " for ... in ":

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

Agora, você pode simplesmente ligar para:

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

Se você não deseja entrar em conflito com outros métodos forEach, você pode nomear com seu nome exclusivo.

Os loops podem ser bastante interessantes ao usar JavaScript puro. Parece que apenas o ECMA6 (nova especificação JavaScript de 2015) controlou os loops. Infelizmente, enquanto escrevo isso, os navegadores e o popular ambiente de desenvolvimento integrado (IDE) ainda estão lutando para oferecer suporte completo aos novos sinos e assobios.

À primeira vista, aqui está a aparência de um loop de objeto JavaScript antes do 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;
  }
}

Além disso, eu sei que isso está fora de escopo com esta pergunta, mas em 2011, o ECMAScript 5.1 adicionou o forEachmétodo para Arrays, o que basicamente criou uma nova maneira aprimorada de fazer um loop através de matrizes enquanto ainda deixa objetos não iteráveis ​​com o antigo forloop detalhado e confuso . Mas a parte estranha é que esse novo forEachmétodo não suporta o breakque levou a todos os tipos de outros problemas.

Basicamente, em 2011, não existe uma maneira realmente sólida de fazer loop no JavaScript, além do que muitas bibliotecas populares (jQuery, Underscore etc.) decidiram reimplementar.

A partir de 2015, agora temos uma maneira melhor e imediata de fazer loop (e quebrar) qualquer tipo de objeto (incluindo matrizes e seqüências de caracteres). Aqui está como será um loop em JavaScript quando a recomendação se tornar mainstream:

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

Observe que a maioria dos navegadores não suporta o código acima a partir de 18 de junho de 2016. Mesmo no Chrome, você precisa habilitar este sinalizador especial para que ele funcione: chrome://flags/#enable-javascript-harmony

Até que este se torne o novo padrão, o método antigo ainda pode ser usado, mas também existem alternativas em bibliotecas populares ou até alternativas leves para aqueles que não estão usando nenhuma dessas bibliotecas.

No ES6, temos símbolos conhecidos para expor alguns métodos internos anteriormente. Você pode usá-lo para definir como os iteradores funcionam para este objeto:

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

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

isso dará o mesmo resultado que usar for ... no loop es6.

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

Mas é importante conhecer os recursos que você tem agora usando o es6!

Eu faria isso ao invés de verificar obj.hasOwnerPropertydentro de cada for ... inloop.

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 um for-ofonObject.keys()

Gostar:

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

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

Se você quiser iterar também sobre propriedades não enumeráveis , poderá usar Object.getOwnPropertyNames(obj)para retornar uma matriz de todas as propriedades (enumeráveis ​​ou não) encontradas diretamente em um determinado objeto.

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/>');
});

Se alguém precisar fazer um loop através de arrayObjects com a condição :

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 o ES6, gostaria de adicionar minha própria colher de açúcar e fornecer mais uma abordagem para iterar as propriedades do objeto.

Como o objeto JS comum não é iterável apenas fora da caixa, não podemos usar o for..ofloop para iterar sobre seu conteúdo. Mas ninguém pode nos parar para torná-lo iterável .

Vamos ter 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 };
}

Desde que fizemos, podemos usá-lo desta maneira:

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

Ou, se você conhece o poder dos geradores ES6 , certamente pode tornar o código acima muito mais curto.

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

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

}

Claro, você pode aplicar esse comportamento a todos os objetos, tornando Objectiterável no prototypenível.

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

Além disso, objetos que cumprem o protocolo iterável podem ser usados ​​com o novo operador de dispersão de recursos do ES2015 , para que possamos ler os valores das propriedades dos objetos como uma matriz.

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

Ou você pode usar a atribuição de desestruturação :

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

Você pode conferir o JSFiddle com todo o código que forneci acima.

desde ES06, você pode obter os valores de um objeto como matriz com

let arrValues = Object.values( yourObject) ;

retorna a matriz dos valores do objeto e não extrai valores do Prototype !!

DOCS MDN Object.values ​​()

e para chaves (já respondidas antes de mim aqui)

let arrKeys   = Object.keys(yourObject);

No script mais recente do ES, você pode fazer algo assim:

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