Parcourir les propriétés de l'objet
var obj = {
name: "Simon",
age: "20",
clothing: {
style: "simple",
hipster: false
}
}
for(var propt in obj){
alert(propt + ': ' + obj[propt]);
}
Comment la variable propt
représentent les propriétés de l'objet? Ce n'est pas une méthode intégrée, ni une propriété. Alors pourquoi trouve-t-il Toutes les propriétés de l'objet?
25 réponses
Itération sur les propriétés nécessite supplémentaires hasOwnProperty
case:
for (var property in object) {
if (object.hasOwnProperty(property)) {
// do stuff
}
}
c'est nécessaire parce que le prototype d'un objet contient des propriétés supplémentaires pour l'objet qui font techniquement partie de l'objet. Ces propriétés supplémentaires sont héritées de la classe d'objet de base, mais sont toujours des propriétés de object
.
hasOwnProperty
vérifie simplement si c'est une propriété spécifique à cette classe, et pas une héritée de la classe de base.
de JavaScript 1.8.5 vous pouvez utiliser Object.keys(obj)
pour obtenir un Tableau de propriétés définies sur l'objet lui-même (ceux qui renvoient true pour 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
});
c'est mieux (et plus lisible) que d'utiliser une boucle for-in.
de Sa prise en charge sur ces navigateurs:
- Firefox (Gecko): 4 (2.0)
- Chrome: 5
- Internet Explorer: 9
voir the Mozilla Developer Network Object.les touches() de référence pour de plus amples informations.
C'est le for...in statement
( MDN , ECMAScript spec ).
vous pouvez le lire comme pour chaque bien dans l'objet obj
, assignez chaque bien à la PROPT variable à tour de rôle".
les Filles et les gars nous sommes en 2017 et nous n'avons pas beaucoup de temps pour écrire... Alors faisons cette nouvelle fantaisie cool ECMAScript 2016:
Object.keys(obj).forEach(e => console.log(`key=${e} value=${obj[e]}`));
dans les versions à venir de ES, vous pouvez utiliser Object.entries
:
for (const [key, value] of Object.entries(obj)) { }
ou
Object.entries(obj).forEach(([key, value]) => ...)
si vous voulez simplement itérer les valeurs, utilisez Object.valeurs:
for (const value of Object.values(obj)) { }
ou
Object.values(obj).forEach(value => ...)
c'est juste une boucle for...in
. Consultez la documentation chez Mozilla .
jquery vous permet de le faire maintenant:
$.each( obj, function( key, value ) {
alert( key + ": " + value );
});
si votre environnement supporte ES2017 alors je recommande objet.entrées :
Object.entries(obj).forEach(([key, value]) => {
console.log(`${key} ${value}`);
});
comme indiqué dans objet Mozillas.entrées () documentation:
L'Objet .entries () la méthode retourne un tableau du propre objet propriété énumérable [clé, valeur] paires, dans le même ordre que celui fourni par un pour... boucle (la différence étant qu'un pour-en boucle énumère les propriétés dans la chaîne de prototype).
essentiellement avec Objet.entrées nous pouvons renoncer à l'étape supplémentaire suivante qui est nécessaire avec l'ancien pour ... dans boucle:
// This step is not necessary with Object.entries
if (object.hasOwnProperty(property)) {
// do stuff
}
les réponses ci-dessus sont un peu ennuyeuses parce qu'elles n'expliquent pas ce que vous faites à l'intérieur de la boucle for après vous être assuré que c'est un objet: vous n'y ACCÉDEZ PAS directement! Vous êtes en fait seulement livré la clé que vous devez appliquer à L'OBJ:
var obj = {
a: "foo",
b: "bar",
c: "foobar"
};
// We need to iterate the string keys (not the objects)
for(var someKey in obj)
{
// We check if this key exists in the obj
if (obj.hasOwnProperty(someKey))
{
// someKey is only the KEY (string)! Use it to get the obj:
var myActualPropFromObj = obj[someKey]; // Since dynamic, use [] since the key isn't literally named "someKey"
// NOW you can treat it like an obj
var shouldBeBar = myActualPropFromObj.b;
}
}
c'est tout ECMA5 sans danger. Même fonctionne dans les versions boiteuses JS comme Rhino ;)
la boucle for...in représente chaque propriété d'un objet car elle est comme une boucle for. Vous avez défini propt dans le pour ... en boucle en faisant:
for(var propt in obj){
alert(propt + ': ' + obj[propt]);
}
...en boucle parcourt l'énumération des propriétés d'un objet. Quelle que soit la variable que vous définissez, ou mettez dans la boucle for...in, change chaque fois qu'elle va à la propriété suivante qu'elle itère. La variable dans la...dans la boucle parcourt les touches, mais la valeur est la valeur de la clé. Pour exemple:
for(var propt in obj) {
console.log(propt);//logs name
console.log(obj[propt]);//logs "Simon"
}
Vous pouvez voir comment la variable diffère de la valeur de la variable. En revanche, un pour...de boucle fait le contraire.
j'espère que cela aidera.
vous pouvez utiliser Lodash. La documentation
var obj = {a: 1, b: 2, c: 3};
_.keys(obj).forEach(function (key) {
...
});
let obj = {"a": 3, "b": 2, "6": "a"}
Object.keys(obj).map((item) => {console.log("item", obj[item])})
// a
// 3
// 2
de nos jours, vous pouvez convertir un objet JS standard en un objet itérable simplement en ajoutant un symbole.méthode d'itérateur. Vous pouvez alors utiliser une boucle for of
et accéder directement à ses valeurs ou même utiliser un opérateur spread sur l'objet. Cool. Voyons ce que nous pouvons faire:
var o = {a:1,b:2,c:3},
a = [];
o[Symbol.iterator] = function*(){
var ok = Object.keys(this);
i = 0;
while (i < ok.length) yield this[ok[i++]];
};
for (var value of o) console.log(value);
// or you can even do like
a = [...o];
console.log(a);
votre boucle for
est itérative sur toutes les propriétés de l'objet obj
. propt
est défini dans la première ligne de votre boucle. C'est une chaîne qui est un nom d'une propriété de la obj
objet. Dans la première itération de la boucle, propt
serait "nom".
Object.keys(obj).forEach(key =>
console.log(`key=${key} value=${obj[key]}`)
);
ajoutant également la voie récursive:
function iterate(obj) {
// watch for objects we've already iterated so we won't end in endless cycle
// for cases like var foo = {}; foo.bar = foo; iterate(foo);
var walked = [];
var stack = [{obj: obj, stack: ''}];
while(stack.length > 0)
{
var item = stack.pop();
var obj = item.obj;
for (var property in obj) {
if (obj.hasOwnProperty(property)) {
if (typeof obj[property] == "object") {
// check if we haven't iterated through the reference yet
var alreadyFound = false;
for(var i = 0; i < walked.length; i++)
{
if (walked[i] === obj[property])
{
alreadyFound = true;
break;
}
}
// new object reference
if (!alreadyFound)
{
walked.push(obj[property]);
stack.push({obj: obj[property], stack: item.stack + '.' + property});
}
}
else
{
console.log(item.stack + '.' + property + "=" + obj[property]);
}
}
}
}
}
Utilisation:
iterate({ foo: "foo", bar: { foo: "foo"} });
Si en cours d'exécution Nœud je vous recommande:
Object.keys(obj).forEach((key, index) => {
console.log(key);
});
je veux ajouter aux réponses ci-dessus, parce que vous pourriez avoir des intentions différentes de Javascript. Un objet JSON et un objet Javascript sont des choses différentes, et vous pourriez vouloir itérer à travers les propriétés d'un objet JSON en utilisant les solutions proposées ci-dessus, puis être surpris.
supposons que vous ayez un objet JSON comme:
var example = {
"prop1": "value1",
"prop2": [ "value2_0", value2_1"],
"prop3": {
"prop3_1": "value3_1"
}
}
Le mauvais chemin à parcourir ses "propriétés":
function recursivelyIterateProperties(jsonObject) {
for (var prop in Object.keys(example)) {
console.log(prop);
recursivelyIterateProperties(jsonObject[prop]);
}
}
vous pourriez être surpris de voir la connexion de la console 0
, 1
, etc. lors de l'itération à travers les propriétés de prop1
et prop2
et de prop3_1
. Ces objets sont des séquences, et les indices d'une séquence sont des propriétés de l'objet en Javascript.
une meilleure façon d'itérer de façon récursive les propriétés d'un objet JSON serait de vérifier d'abord si cet objet est un séquence ou non:
function recursivelyIterateProperties(jsonObject) {
for (var prop in Object.keys(example)) {
console.log(prop);
if (!(typeof(jsonObject[prop]) === 'string')
&& !(jsonObject[prop] instanceof Array)) {
recursivelyIterateProperties(jsonObject[prop]);
}
}
}
ici je suis en train d'itérer chaque noeud et de créer des noms de noeuds significatifs. Si vous remarquez, instanceOf Array et instanceOf Object font à peu près la même chose (dans mon application, je donne une logique différente cependant)
function iterate(obj,parent_node) {
parent_node = parent_node || '';
for (var property in obj) {
if (obj.hasOwnProperty(property)) {
var node = parent_node + "/" + property;
if(obj[property] instanceof Array) {
//console.log('array: ' + node + ":" + obj[property]);
iterate(obj[property],node)
} else if(obj[property] instanceof Object){
//console.log('Object: ' + node + ":" + obj[property]);
iterate(obj[property],node)
}
else {
console.log(node + ":" + obj[property]);
}
}
}
}
note-je m'inspire de la réponse d'Ondrej Svejdar. Mais cette solution est plus performante et moins ambiguë
vous voulez essentiellement boucle à travers chaque propriété dans l'objet.
var Dictionary = {
If: {
you: {
can: '',
make: ''
},
sense: ''
},
of: {
the: {
sentence: {
it: '',
worked: ''
}
}
}
};
function Iterate(obj) {
for (prop in obj) {
if (obj.hasOwnProperty(prop) && isNaN(prop)) {
console.log(prop + ': ' + obj[prop]);
Iterate(obj[prop]);
}
}
}
Iterate(Dictionary);
pour ajouter L'utilisation ES2015 de Reflect.ownKeys(obj)
et aussi itérer sur les propriétés via un itérateur.
par exemple:
let obj = { a: 'Carrot', b: 'Potato', Car: { doors: 4 } };
peut être itéré par
// logs each key
Reflect.ownKeys(obj).forEach(key => console.log(key));
si vous souhaitez itérer directement sur les valeurs des touches d'un objet, vous pouvez définir un iterator
, tout comme les itérateurs par défaut de JavaScipts pour les chaînes, tableaux, tableaux dactylographiés, Map et Set.
js will essayez d'itérer via la propriété iterator par défaut, qui doit être définie comme Symbol.iterator
.
si vous voulez pouvoir itérer sur tous les objets, vous pouvez l'ajouter comme prototype D'objet:
Object.prototype[Symbol.iterator] = function*() {
for(p of Reflect.ownKeys(this)){ yield this[p]; }
}
cela vous permettrait d'itérer les valeurs d'un objet avec un for...de boucle, par exemple:
for(val of obj) { console.log('Value is:' + val ) }
Caution : au moment d'écrire cette réponse (juin 2018) Tous les autres navigateurs, mais IE, générateurs de soutien et for...of
itération via Symbol.iterator
ce que pour..in loop fait est qu'il crée une nouvelle variable (var someVariable) et stocke ensuite chaque propriété de l'objet donné dans cette nouvelle variable(someVariable) un par un. Par conséquent, si vous utilisez block {}, vous pouvez itérer. Considérons l'exemple suivant.
var obj = {
name:'raman',
hobby:'coding',
planet:'earth'
};
for(var someVariable in obj) {
//do nothing..
}
console.log(someVariable); // outputs planet
pour affiner la réponse acceptée, il est intéressant de noter que si vous instanciez l'objet avec un var object = Object.create(null)
alors object.hasOwnProperty(property)
déclenchera une erreur de type. Donc, pour être sur le côté sûr, vous avez besoin de l'appeler du prototype comme ceci:
for (var property in object) {
if (Object.prototype.hasOwnProperty.call(object, property)) {
// do stuff
}
}