Iterar a través de las propiedades del objeto
var obj = {
name: "Simon",
age: "20",
clothing: {
style: "simple",
hipster: false
}
}
for(var propt in obj){
console.log(propt + ': ' + obj[propt]);
}¿ Cómo proptrepresenta la variable las propiedades del objeto? No es un método o propiedad incorporado. ¿Por qué aparece con todas las propiedades del objeto?
Iterar sobre propiedades requiere esta hasOwnPropertyverificación adicional:
for (var prop in obj) {
if (Object.prototype.hasOwnProperty.call(obj, prop)) {
// do stuff
}
}
Es necesario porque el prototipo de un objeto contiene propiedades adicionales para el objeto que técnicamente son parte del objeto. Estas propiedades adicionales se heredan de la clase de objeto base, pero siguen siendo propiedades de obj.
hasOwnPropertysimplemente comprueba si se trata de una propiedad específica de esta clase y no heredada de la clase base.
También es posible llamar hasOwnPropertya través del propio objeto:
if (obj.hasOwnProperty(prop)) {
// do stuff
}
Pero esto fallará si el objeto tiene un campo no relacionado con el mismo nombre:
var obj = { foo: 42, hasOwnProperty: 'lol' };
obj.hasOwnProperty('foo'); // TypeError: hasOwnProperty is not a function
Por eso es más seguro llamarlo Object.prototype:
var obj = { foo: 42, hasOwnProperty: 'lol' };
Object.prototype.hasOwnProperty.call(obj, 'foo'); // true
May 24 '2013 12:05
A partir de JavaScript 1.8.5, puede utilizarlo Object.keys(obj)para obtener una matriz de propiedades definidas en el objeto mismo (las que devuelven verdadero obj.hasOwnProperty(key)).
Object.keys(obj).forEach(function(key,index) {
// key: the name of the object key
// index: the ordinal position of the key within the object
});
Esto es mejor (y más legible) que usar un bucle for-in.
Es compatible con estos navegadores:
- Firefox (Geco): 4 (2.0)
- Cromo: 5
- Explorador de Internet: 9
Consulte la referencia de Mozilla Developer Network Object.keys() para obtener más información.
Chicas y chicos, estamos en 2019 y no tenemos mucho tiempo para escribir... Así que hagamos este nuevo y elegante ECMAScript 2016:
Object.keys(obj).forEach(e => console.log(`key=${e} value=${obj[e]}`));
En implementaciones actualizadas de ES, puede utilizar Object.entries:
for (const [key, value] of Object.entries(obj)) { }
o
Object.entries(obj).forEach(([key, value]) => ...)
Si solo desea iterar sobre los valores, utilice Object.values:
for (const value of Object.values(obj)) { }
o
Object.values(obj).forEach(value => ...)
Es el for...in statement( MDN , especificación ECMAScript ).
Puede leerlo como " PARA cada propiedad EN el objobjeto, asigne cada propiedad a la variable PROPT por turno".
Es sólo un for...inbucle. Consulte la documentación en Mozilla .
