¿Cómo puedo bucle a través de o enumerar un objeto de JavaScript?

https://stackoverflow.com/questions/684672

22-08-2019
|

Pregunta

Tengo un objeto de JavaScript como el siguiente:

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

Ahora quiero un bucle a través de todos los p elementos (p1, p2, p3...) Y obtener sus claves y valores.¿Cómo puedo hacer eso?

Puedo modificar el objeto de JavaScript si es necesario.Mi objetivo final es recorrer algunos de los principales pares de valor y si es posible quiero evitar el uso de eval.

Solución

Puede utilizar el bucle for-in como se muestra por otros. Sin embargo, también hay que asegurarse de que la clave que se obtiene es una propiedad de un objeto real, y no viene a partir 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]);
    }
}

Otros consejos

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

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

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

for...of :

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

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

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

Puede combinar for...of, desestructuración y Object.entries:

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

Ambas propiedades Object.keys() e iterar Object.entries() en el mismo orden como un bucle for...in pero ignorar la cadena de prototipo . Sólo propias propiedades enumerables del objeto son iterados.

Hay que utilizar el bucle for-in

Pero tenga mucho cuidado al usar este tipo de bucle, ya que este bucle todas las propiedades a lo largo de la cadena de prototipo .

Por lo tanto, cuando se utiliza para-en bucles, siempre que el uso del método hasOwnProperty para determinar si la propiedad actual en la iteración es realmente una propiedad del objeto que se está comprobando en:

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 cuestión no estará completo si no mencionamos acerca de los métodos alternativos para recorrer a través de objetos.

Hoy en día muchas bibliotecas de JavaScript bien conocidos proporcionan sus propios métodos para iterar sobre colecciones, es decir, más arrays , objetos y objetos de matriz similar a . Estos métodos son fáciles de usar y son totalmente compatibles con cualquier navegador.

Si usted trabaja con jQuery usted puede usar jQuery.each() método. Se puede utilizar para iterar a la perfección sobre ambos objetos y arrays:
```
$.each(obj, function(key, value) {
    console.log(key, value);
});
```
Underscore.js usted puede encontrar el método _.each() , que itera sobre una lista de elementos, produciendo cada uno a su vez a una función suministrada (presten atención a la orden de los argumentos en función iteratee ):
```
_.each(obj, function(value, key) {
    console.log(key, value);
});
```
Lo-Dash proporciona varios métodos para iterar sobre las propiedades del objeto. _.forEach() (o sea _.each() alias) es útil para recorrer a través de ambos objetos y matrices, sin embargo (!) Objetos con la propiedad length son tratados como matrices, y para evitar este comportamiento, se sugiere usar _.forIn() y métodos _.forOwn() (estos también tienen argumento value viene primero):
```
_.forIn(obj, function(value, key) {
    console.log(key, value);
});
```
itera _.forIn() más propia y heredado propiedades enumerables de un objeto, mientras que itera _.forOwn() sólo sobre propia propiedades de un objeto (básicamente la comprobación contra la función de hasOwnProperty). Para los objetos simples y literales de objetos de cualquiera de estos métodos funcionan bien.

En general todos los métodos descritos tienen el mismo comportamiento con objetos suministrados. Además de utilizar bucle for..in nativa por lo general será rápido que cualquier abstracción, como jQuery.each(), estos métodos son mucho más fáciles de usar, requieren menos código y proporcionar una mejor gestión de errores.

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

Más información se puede ver en MDN

Mi elección es 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 :

Compatibilidad del navegador se puede ver en la tabla compat

Para navegador de edad que tienes simple y < a href = "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys" rel = "noreferrer"> completo polyfill

UPD:

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

objeto iteración literal

Puede simplemente iterar sobre ella como:

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

Tenga en cuenta que key no va a asumir el valor de la propiedad, es sólo un valor de índice.

Prefacio:

Propiedades del objeto puede ser propia (la propiedad está en el objeto en sí) o heredado (no en el objeto en sí mismo, en una de sus prototipos).
objeto puede ser enumerable o no enumerable . Las propiedades no enumerables se dejan fuera de porciones de enumeraciones de propiedades / matrices.
Los nombres de propiedades pueden ser cadenas o símbolos. Propiedades cuyos nombres son símbolos son dejados fuera de porciones de propiedad enumeraciones / matrices.

A continuación, en 2018, sus opciones de bucle a través de las propiedades de un objeto son (algunos ejemplos son los siguientes de la lista):

for-in [ MDN , ] - una estructura de bucle que se repite a través de los nombres de enumerables propiedades de un objeto, incluyendo las heredadas, cuyos nombres son cadenas
Object.keys [ MDN , ] - una función de proporcionar una matriz de los nombres de una El objeto de propia , enumerables propiedades cuyos nombres son cadenas.
Object.values [ MDN , spec ] - una función de proporcionar una matriz de la Los valores de un objeto de propia , enumerables propiedades.
Object.entries [ MDN , spec ] - una función de proporcionar una matriz de los nombres y valores de de un objeto propia , enumerable propiedades (cada entrada de la matriz es una matriz [name, value]).
Object.getOwnPropertyNames [ MDN , ] - una función de proporcionar una matriz de los nombres de una El objeto de propia propiedades (incluso no enumerables) cuyos nombres son cadenas.
Object.getOwnPropertySymbols [ MDN , ] - una función de proporcionar una matriz de los nombres de una El objeto de propia propiedades (incluso no enumerables) cuyos nombres son símbolos.
Reflect.ownKeys [ MDN , ] - una función de proporcionar una matriz de los nombres de una El objeto de propiedades (incluso no enumerables), si esos nombres son cadenas o símbolos.
Si desea todos de propiedades de un objeto, incluyendo las heredadas no enumerables, es necesario utilizar un bucle y Object.getPrototypeOf [ MDN , especificación ] y utilice Object.getOwnPropertyNames, Object.getOwnPropertySymbols, o Reflect.ownKeys en cada objeto en la cadena de prototipo (ejemplo en la parte inferior de esta respuesta).

Con todos ellos, excepto for-in, tendrá que utilizar algún tipo de bucle construir en 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 bucle for-of, pero se puede utilizar cualquier estructura iterativa)

// 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 , incluyendo las no enumerables heredados:

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

Desde ES2015 es cada vez más y más popular Estoy publicar esta respuesta, que incluyen el uso del generador y iterador para recorrer sin problemas a través de pares [key, value]. Como es posible en otros idiomas, por ejemplo Ruby.

La autorización aquí es 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 acerca de cómo se puede hacer un iterador y el generador se puede encontrar en la página de desarrolladores de Mozilla.

Esperamos que ayudó a alguien.

EDIT:

ES2017 incluirá Object.entries lo que hará que la iteración a través de pares [key, value] en objetos aún más fácil. Ahora se sabe que va a ser una parte de una norma de acuerdo con la TS39 información sobre los estadios.

Creo que es hora de actualizar mi respuesta a dejar que se hizo 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 de página MDN

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

Nota:. Usted puede hacer esto a través de las matrices, pero vas a iterar sobre los length y otras propiedades, también

Después de mirar a través de todas las respuestas de aquí, hasOwnProperty no es requerida para mi propio uso, porque mi objeto JSON está limpio; no hay realmente ningún sentido en la adición de ningún procesamiento adicional Javascript. 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 prototipo con forEach () que debe saltar el cadena de prototipo propiedades:

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 gente interesante en estas respuestas han tocado tanto Object.keys() y for...of pero nunca las ha combinado:

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

_{No se puede simplemente for...of un Object porque no es un iterador, y for...index o .forEach()ing la Object.keys() es feo / ineficiente.

Me alegro de la mayoría de la gente es abstenerse de for...in (con o sin comprobar .hasOwnProperty()) ya que es también un poco desordenado, por lo que no sea mi respuesta anterior, yo estoy aquí para decir ...}

Puede hacer asociaciones de objetos ordinarios iterar! Comportándose como Maps con el uso directo de la for...of de fantasía
DEMO trabajando en Chrome y FF (supongo ES6 solamente)

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

Así que siempre y cuando incluya 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 de mapa real que no tiene el azúcar sintáctica agradable.

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

De hecho, con este suplemento, si todavía quería tomar ventaja de otras funcionalidades del mapa (sin calzar a todos en) pero todavía quería utilizar la notación de objetos ordenada, ya que los objetos están Iterable ahora se puede simplemente hacer un mapa de ella!

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

Para aquellos que no les gusta a Shim, o meterse con prototype en general, no dude en hacer la función en la ventana en su lugar, llamándolo algo así como getObjIterator() a continuación;

//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 usted puede llamar como una función ordinaria, nada más se ve afectada

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

for (let pair of getObjIterator(ordinaryObject))

No hay razón por la que no iba a funcionar.

Bienvenido al futuro.

Object.keys (obj): Array

recupera todas las claves de cadena de valor de todas las enumerables propios (no hereditaria) propiedades.

Por lo tanto, da la misma lista de claves que tiene la intención de probar cada clave de objeto con hasOwnProperty. No es necesario que la operación de prueba adicional que se supone Object.keys( obj ).forEach(function( key ){}) y ser más rápido. Vamos a demostrar que:

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 resultados siguientes

enfoque Object.keys tomó 40.21101451665163 milisegundos.
for ... in / hasOwnProperty enfoque tomó 98.26163508463651 milisegundos.

PS. en Chrome la diferencia aún mayor http://codepen.io/dsheiko/pen/JdrqXa

PS2: En ES6 (EcmaScript 2015) se puede iterar iterables objeto más bonito:

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

Este es 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]) })

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

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

<p>
  Output:<br>
  p1 = values1<br>
  p2 = values2<br>
  p3 = values3
</p>

El método Object.keys() devuelve una matriz de propias propiedades enumerables de un objeto dado. Lea más sobre esto href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys" aquí

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

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

Puede agregar un simple forEach función para todos los objetos, por lo que puede recorrer de forma automática a través de 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 que no les gusta el " for ... in " - método:

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 conseguir conflictos con otros forEach-Métodos puede que el nombre con su nombre único.

Sólo el código JavaScript y 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
}

Loops pueden ser bastante interesante cuando se utiliza JavaScript puro. Parece que sólo ECMA6 (Nueva 2015 especificación JavaScript) se llevó los bucles bajo control. Por desgracia, ya que estoy escribiendo esto, ambos navegadores y entorno de desarrollo integrado populares (IDE) todavía están luchando para apoyar completamente las nuevas campanas y silbatos.

A primera vista esto es lo que mira un bucle objeto JavaScript como antes 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 del alcance de esta pregunta, pero en 2011, ECMAScript 5.1 añadió el método forEach para Arrays única que básicamente creado una nueva forma mejorada de bucle a través de las matrices al mismo tiempo dejan objetos no iterables con el viejo detallado y bucle for confuso. Pero lo extraño es que este nuevo método forEach no soporta break que dio lugar a todo tipo de otros problemas.

Básicamente en 2011, no es una forma sólida real para bucle en JavaScript que no sea lo que muchas bibliotecas populares (jQuery, subrayado, etc.) decidieron volver a poner en práctica.

A partir de 2015, ahora tenemos una mejor fuera del camino caja para bucle (y romper) cualquier tipo de objeto (incluyendo matrices y cadenas). Esto es lo que un bucle en JavaScript con el tiempo se verá como cuando la recomendación se convierte 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 soportarán el código anterior como del 18 de junio de 2016. Incluso en Chrome necesita habilitar esta bandera especial para que funcione: chrome://flags/#enable-javascript-harmony

Hasta que esto se convierte en la nueva norma, el método de edad todavía se puede utilizar, pero también hay alternativas en bibliotecas populares o incluso alternativas de peso ligero para los que no está usando alguna de estas bibliotecas.

    var p =[{"username":"ordermanageadmin","user_id":"2","resource_id":"Magento_Sales::actions"},
{"username":"ordermanageadmin_1","user_id":"3","resource_id":"Magento_Sales::actions"}]
for(var value in p) {
    for (var key in value) {
        if (p.hasOwnProperty(key)) {
            console.log(key + " -> " + p[key]);
        }
    }
}

Si alguien necesita para recorrer arrayObjects con la 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");
      }
   }
}

Teniendo en cuenta ES6 me gustaría añadir mi propia cuchara de azúcar y proporcionar una mayor aproximación a iterar sobre las propiedades del objeto.

Desde llano objeto JS no es iterables acaba de salir de la caja, no somos capaces de utilizar bucle for..of para iterar sobre su contenido. Pero nadie nos puede parar para que sea iterables .

Vamos hemos book objeto.

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 nos hemos hecho podemos usarlo de esta manera:

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

O si conoce la potencia de los generadores rel="nofollow"> ES6 , por lo que sin duda puede hacer que el código mucho más corto.

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

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

}

Por supuesto, se puede aplicar este tipo de comportamiento para todos los objetos con lo que Object iterable en el nivel prototype.

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

Además, los objetos que cumplen con el protocolo iterable se pueden utilizar con la nueva característica de ES2015 propagación operador Así, podemos leer los valores de las propiedades del objeto como una matriz.

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

O puede usar desestructuración asignación :

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

Se puede extraer de jsFiddle con todo el código que he proporcionado anteriormente.

En ES6 hemos símbolos conocida para exponer algunos métodos previamente internos, que se puede utilizar 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 le dará el mismo resultado que utilizar bucle for ... in ES6.

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

Sin embargo, es importante conocer las capacidades que ahora tiene el uso de es6!

Me gustaría hacer esto en lugar de comprobar obj.hasOwnerProperty dentro de cada bucle for ... in.

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

desde ES06 usted puede obtener los valores de un objeto array con

let arrValues = Object.values( yourObject) ;

que vuelvan los de una matriz de los valores de objeto y no extraer valores de Prototipo!!

MDN DOCS Objeto.los valores de()

y para las llaves ( ya answerd delante de mí aquí )

let arrKeys   = Object.keys(yourObject);

Si desea iterar sobre propiedades no enumerables , así, puede utilizar Object.getOwnPropertyNames(obj) para devolver una matriz de todas las propiedades (enumerable o no) encontrado 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/>');
});

En el último guión ES, se puede hacer algo como esto:

Object.entries(p);

Función Object.entries():

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

for (var i in Object.entries(p)){
	var key = Object.entries(p)[i][0];
	var value = Object.entries(p)[i][1];
	console.log('key['+i+']='+key+' '+'value['+i+']='+value);
}

He tenido un problema similar cuando se usa angular, aquí está la solución que he encontrado.

Paso 1. Obtener todas las claves de objeto. utilizando Object.keys. Este método devuelve una matriz de propias propiedades enumerables de un objeto dado.

Paso 2. Crea una matriz vacía. Esta es una donde todas las propiedades van a vivir, ya que su nuevo bucle ngFor va a apuntar a esta matriz, tenemos que atraparlos a todos. Paso 3. Iterar tirar todas las teclas, y empuje cada uno en la matriz que ha creado. Así es como que se ve como en el código.

    // Evil response in a variable. Here are all my vehicles.
let evilResponse = { 
  "car" : 
    { 
       "color" : "red",
       "model" : "2013"
    },
   "motorcycle": 
    { 
       "color" : "red",
       "model" : "2016"
    },
   "bicycle": 
    { 
       "color" : "red",
       "model" : "2011"
    }
}
// Step 1. Get all the object keys.
let evilResponseProps = Object.keys(evilResponse);
// Step 2. Create an empty array.
let goodResponse = [];
// Step 3. Iterate throw all keys.
for (prop of evilResponseProps) { 
    goodResponse.push(evilResponseProps[prop]);
}

Aquí hay un enlace al post original. https://medium.com/@ papaponmx / más-objeto de propiedades-con-ngfor-in-angular looping--869cd7b2ddcc

Un objeto se convierte en un iterador cuando se implementa el método .Next ()

const james = {
name: 'James',
height: `5'10"`,
weight: 185,

[Symbol.iterator]() {
let properties = []
for (let key of Object.keys(james)){
     properties.push(key);
 }

index = 0;
return {
        next: () => {
            let key = properties[index];
            let value = this[key];
            let done = index >= properties.length - 1 ;
            index++;
            return { key, value, done };
        }
    };
  }

};


const iterator = james[Symbol.iterator]();

console.log(iterator.next().value); // 'James'
console.log(iterator.next().value); // `5'10`
console.log(iterator.next().value); // 185

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow