Comment passer en boucle ou énumérer un objet JavaScript?

sous ECMAScript 5, vous pouvez combiner Object.keys() et Array.prototype.forEach() :

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

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

ES6 ajoute for...of :

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

ES2017 ajoute Object.entries() ce qui évite d'avoir à chercher chaque valeur dans l'objet original:

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

à la fois Object.keys() et Object.entries() itérate propriétés dans le même ordre qu'une for...in boucle mais ignorer la chaîne prototype . Seules les propriétés énumérables de l'objet sont itérées.

Edit: ES2016 → ES6

vous devez utiliser le pour-en boucle

mais soyez très prudent lors de l'utilisation de ce type de boucle, parce que ce sera boucle toutes les propriétés le long de la chaîne prototype .

par conséquent, lorsque vous utilisez des boucles for-in, Utilisez toujours la méthode hasOwnProperty pour déterminer si la propriété courante en itération est vraiment une propriété de l'objet que vous vérifiez:

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 question ne sera pas complète si nous ne mentionnons pas les méthodes alternatives pour boucler à travers les objets.

de nos jours, de nombreuses bibliothèques JavaScript bien connues proposent leurs propres méthodes d'itération sur les collections, c'est-à-dire sur les tableaux , objets , et objets de type tableau . Ces méthodes sont faciles à utiliser et sont entièrement compatibles avec n'importe quel navigateur.

1. si vous travaillez avec jQuery , vous pouvez utiliser jQuery.each() méthode. Il peut être utilisé pour itérer de façon transparente à la fois sur les objets et les tableaux:

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

2. Dans Trait De Soulignement.js vous pouvez trouver la méthode _.each() , qui itère sur une liste d'éléments, donnant chacun à tour de rôle à une fonction fournie (pay attention à l'ordre des arguments dans iteratee fonction!):

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

3. Lo-Dash fournit plusieurs méthodes pour itérer sur les propriétés de l'objet. Base _.forEach() (ou il est alias _.each() ) est utile pour la boucle à travers les objets et les tableaux, cependant (!) les objets avec la propriété length sont traités comme des tableaux, et pour éviter ce comportement il est suggéré d'utiliser _.forIn() et _.forOwn() méthodes (ceux-ci ont également value argument venant en premier):

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

   _.forIn() itère sur propres et héritées propriétés énumérables d'un objet, tandis que _.forOwn() itère seulement sur propres propriétés d'un objet (essentiellement vérification contre hasOwnProperty fonction). Pour les objets simples et l'une de ces méthodes fonctionne très bien.

en général, toutes les méthodes décrites ont le même comportement avec tout objet fourni. En plus d'utiliser la boucle for..in native sera généralement plus rapide que n'importe quelle abstraction, comme jQuery.each() , ces méthodes sont considérablement plus faciles à utiliser, nécessitent moins de codage et offrent une meilleure manipulation des erreurs.

dans ECMAScript 5 vous avez une nouvelle approche dans les champs d'itération de literal - Object.keys

pour en savoir plus, allez à MDN

mon choix est ci-dessous comme une solution plus rapide dans les versions actuelles des navigateurs (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;
}

vous pouvez comparer la performance de cette approche avec différentes implémentations sur jsperf.com :

• Étendre Les Implémentations
• itération des clés D'objet
• itération littérale de l'objet

prise en charge du Navigateur vous pouvez le voir sur Kangax est compat table

pour vieux navigateur vous avez simple et complet polyfill

UPD:

comparaison des performances pour tous les plus populaires de cas dans cette question sur perfjs.info :

itération littérale de l'objet

vous pouvez simplement itérer dessus comme:

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

notez que key ne prendra pas la valeur de la propriété, c'est juste une valeur d'indice.

depuis es2015 devient de plus en plus populaire je poste cette réponse qui comprennent l'utilisation de générateur et iterator pour itérer en douceur par [key, value] paires. Comme il est possible dans d'autres langues, par exemple Ruby.

ok voici un code:

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

toutes les informations sur la façon de faire un itérateur et un générateur que vous pouvez trouver sur la page developer Mozilla.

J'espère que ça a aidé quelqu'un.

EDIT:

ES2017 inclura Object.entries ce qui rendra l'itération des paires [key, value] dans les objets encore plus facile. Il est maintenant connu qu'il fera partie d'une norme selon le ts39 informations étape.

je pense qu'il est temps de mettre à jour ma réponse pour qu'elle soit encore plus fraîche qu'elle ne l'est maintenant.

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

vous pouvez en savoir plus sur l'utilisation sur MDN page

préface:

• les propriétés de L'objet peuvent être propres (la propriété est sur l'objet lui-même) ou héritées (pas sur l'objet lui-même, sur l'un de ses prototypes).
• les propriétés de L'objet peuvent être énumérable ou non énumérable . Les propriétés non-dénombrables sont laissées en dehors des lots de propriétés énumérations/tableaux.
• les noms de propriétés peuvent être des chaînes ou des symboles. Les propriétés dont les noms sont des symboles sont laissées de côté dans beaucoup d'énumérations/tableaux de propriétés.

ici en 2018, vos options pour boucler à travers les propriétés d'un objet sont:

1. for-in [ MDN , spec ] - une structure de boucle qui boucle à travers les noms d'un objet énumérable propriétés, y compris héritées, dont les noms sont des chaînes de caractères
2. Object.keys [ MDN , spec ] - une fonction fournissant un tableau des noms d'un objet propre , énumérable propriétés dont les noms sont des chaînes.
3. Object.values [ SDN , spec ] - Une fonction fournissant un tableau de la valeurs d'un objet propre , énumérable propriétés.
4. Object.entries [ MDN , spec ] - une fonction fournissant un tableau des noms et valeurs d'un objet propre , propriétés .
5. Object.getOwnPropertyNames [ MDN , spec ] - une fonction fournissant un tableau des noms des propriétés propres d'un objet (même non-dénombrables) dont les noms sont des chaînes.
6. Object.getOwnPropertySymbols [ MDN , spec ] - une fonction fournissant un tableau des noms des propriétés d'un objet propres (même non-énumérables) dont les noms sont des symboles.
7. Reflect.ownKeys [ MDN , spec ] - une fonction fournissant un tableau des noms des propriétés propres d'un objet (même non-dénombrables), que ces noms soient des chaînes ou des symboles.
8. si vous voulez tout des propriétés d'un objet, y compris les héritées non dénombrables, vous devez utiliser une boucle et Object.getPrototypeOf [ MDN , spec ] et utiliser Object.getOwnPropertyNames , Object.getOwnPropertySymbols , ou Reflect.ownKeys sur chaque objet de la chaîne prototype (exemple au bas de cette réponse).

avec tous sauf for-in , vous utiliseriez une sorte de construction en boucle sur le tableau ( for , for-of , forEach , etc.).

exemples:

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 (avec une boucle for-of , mais vous pouvez utiliser n'importe quelle boucle construction) :

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

toutes les propriétés , y compris les propriétés héritées non dénombrables:

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

via prototype avec forEach () qui devrait sauter la chaîne prototype propriétés:

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

après avoir examiné toutes les réponses ici, hasOwnProperty n'est pas nécessaire pour mon propre usage parce que mon objet json est propre; il n'y a vraiment aucun sens à ajouter un traitement javascript supplémentaire. C'est tout ce que j'utilise:

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

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

Note: Vous pouvez faire cela sur des tableaux, mais vous itérerez sur le length et d'autres propriétés, aussi.

c'est intéressant les gens dans ces réponses ont touché à la fois Object.keys() et for...of mais ne les ont jamais combinés:

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

<sub>Vous ne pouvez pas simplement for...of un Object parce que ce n'est pas un itérateur, et for...index ou .forEach() ing Object.keys() est laid/inefficace.

Je suis heureux que la plupart des gens s'abstiennent de for...in (avec ou sans vérifier .hasOwnProperty() ) comme c'est aussi un peu donc, à part ma réponse ci-dessus, je suis ici pour vous dire...</sub>

vous pouvez faire des associations d'objets ordinaires itérer! Se comporter comme Map s avec l'utilisation directe de la fantaisie for...of

Démo travailler en Chrome et FF (je suppose ES6 seulement)

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

tant que vous incluez mon shim ci-dessous:

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

sans avoir à créer un véritable objet Map qui n'a pas le bon sucre syntaxique.

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

en fait, avec ce shim, si vous avez toujours voulu profiter de L'autre fonctionnalité de Map (sans les shimming tous dedans) mais toujours voulu utiliser la notation d'objet soignée, puisque les objets sont maintenant itérables, vous pouvez maintenant juste faire une carte à partir de cela!

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

pour ceux qui n'aime pas shim, ou le désordre avec prototype en général, n'hésitez pas à faire la fonction sur la fenêtre à la place, l'appelant quelque chose comme getObjIterator() alors;

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

Maintenant, vous pouvez simplement appeler comme une fonction ordinaire, rien d'autre n'est affecté

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

ou

for (let pair of getObjIterator(ordinaryObject))

il n'y a aucune raison pour que cela ne fonctionne pas.

Bienvenue à la avenir.

objet.touches (obj): Array

récupère toutes les clés à chaîne de valeur de toutes les propriétés propres (non héritées) dénombrables.

ainsi il donne la même Liste de clés que vous avez l'intention en testant chaque clé objet avec hasOwnProperty. Vous n'avez pas besoin de cette opération de test supplémentaire que et Object.keys( obj ).forEach(function( key ){}) est censé être plus rapide. Prouvons-le:

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

dans mon Firefox J'ai à la suite des résultats

• objet.l'approche des clés a pris 40.21101451665163 millisecondes.
• .../hasOwnProperty approche a pris 98.26163508463651 millisecondes.

PS. sur Chrome la différence encore plus grand http://codepen.io/dsheiko/pen/JdrqXa

PS2: dans ES6 (EcmaScript 2015) vous pouvez itérer l'objet itérable nicer:

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

Voici une autre méthode pour itérer à travers un objet.

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


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

la méthode Object.keys() retourne un tableau des propriétés énumérables d'un objet donné. Lire la suite de il ici

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

Object.keys(p).map((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>

vous pouvez ajouter un simple forEach fonction à tous les objets, de sorte que vous pouvez Automatiquement boucle à travers n'importe quel objet:

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

pour les gens qui n'aiment pas le pour ... dans "- méthode:

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

maintenant, vous pouvez simplement appeler:

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

si vous ne voulez pas obtenir des conflits avec d'autres méthodes de forEach vous pouvez l'appeler avec votre nom unique.

seulement code JavaScript sans dépendances:

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
}

boucles peut être assez intéressant en utilisant pur JavaScript. Il semble que seul ECMA6 (nouvelle spécification JavaScript 2015) ait contrôlé les boucles. Malheureusement, au moment où j'écris ces lignes, les navigateurs et L'environnement de développement intégré (IDE) populaire ont encore du mal à supporter complètement les nouvelles cloches et sifflets.

en bref voici à quoi ressemble une boucle D'objet JavaScript avant 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;
  }
}

aussi, je sais ceci est hors de portée avec cette question mais en 2011, ECMAScript 5.1 a ajouté la méthode forEach pour les tableaux seulement qui a essentiellement créé une nouvelle façon améliorée de boucle à travers les tableaux tout en laissant les objets non itérables avec l'ancienne boucle verbeuse et confuse for . Mais la partie étrange est que cette nouvelle méthode forEach ne supporte pas break qui a conduit à toutes sortes d'autres problèmes.

en gros, en 2011, il n'y a pas de véritable moyen de boucler JavaScript autre que ce que de nombreuses bibliothèques populaires (jQuery, Underscore, etc.) a décidé de la mettre à nouveau en œuvre.

à partir de 2015, nous avons maintenant une meilleure façon de boucler (et casser) n'importe quel type d'objet (y compris les tableaux et les chaînes). Voici à quoi ressemblera une boucle dans JavaScript lorsque la recommandation deviendra courante:

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

notez que la plupart des navigateurs ne supporteront pas le code ci-dessus à partir du 18 juin 2016. Même dans Chrome vous devez activer ceci drapeau spécial pour qu'il fonctionne: chrome://flags/#enable-javascript-harmony

Jusqu'à ce que cela devienne la nouvelle norme, l'ancienne méthode peut encore être utilisée, mais il y a aussi des alternatives dans les bibliothèques populaires ou même alternatives légères pour ceux qui n'utilisent pas l'une de ces bibliothèques.

je le ferais plutôt que de vérifier obj.hasOwnerProperty dans chaque boucle 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");
}

si vous voulez itérer plus de propriétés non-dénombrables ainsi, vous pouvez utiliser Object.getOwnPropertyNames(obj) pour retourner un tableau de toutes les propriétés (dénombrables ou non) trouvées directement sur un objet donné.

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 quelqu'un a besoin de boucle à travers arrayObjects avec condition :

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

considérant ES6, j'aimerais ajouter ma propre cuillère de sucre et fournir une approche de plus pour itérer sur les propriétés de l'objet.

puisque l'objet simple JS n'est pas itérable juste sorti de la boîte, nous ne sommes pas en mesure d'utiliser for..of boucle pour itérer sur son contenu. Mais personne ne peut nous arrêter pour le rendre itérable .

nous avons l'objet book .

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

puisque nous l'avons fait, nous pouvons l'utiliser de cette façon:

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

ou si vous connaissez la puissance de ES6 générateurs , donc vous pouvez certainement faire le code ci-dessus beaucoup plus court.

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

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

}

bien sûr, vous pouvez appliquer un tel comportement pour tous les objets avec faire Object itérable au niveau prototype .

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

aussi, les objets qui se conforment au protocole itérable peuvent être utilisés avec le nouvelle fonctionnalité ES2015 spread opérateur ainsi nous pouvons lire les valeurs des propriétés des objets comme un tableau.

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

ou vous pouvez utiliser destruction assignation:

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

vous pouvez consulter JSFiddle avec tout le code que j'ai fourni ci-dessus.

dans le dernier script ES, vous pouvez faire quelque chose comme ceci:

Object.entries(p);

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

dans ES6 nous avons des symboles bien connus pour exposer certaines méthodes précédemment internes, vous pouvez l'utiliser pour définir comment les itérateurs fonctionnent pour cet objet:

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

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

Cela donnera le même résultat que pour...dans la boucle es6.

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

mais il est important de connaître les capacités que vous avez maintenant en utilisant es6!

un objet devient un itérateur lorsqu'il implémente le .méthode suivante ()

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

depuis ES06 vous pouvez obtenir les valeurs d'un objet comme tableau avec

let arrValues = Object.values( yourObject) ;

il renvoie le tableau des valeurs de l'objet et il n'extrait pas les valeurs de Prototype!!

MDN Docs objet.valeurs ()

et pour les touches ( déjà answerd avant moi ici )

let arrKeys   = Object.keys(yourObject);

si vous voulez itérer seulement sur les propriétés utilisez l'une des réponses ci-dessus, cependant si vous voulez itérer sur tout y compris les fonctions, alors vous pourriez vouloir utiliser objet.getOwnPropertyNames (obj)

for (let o of Object.getOwnPropertyNames(Math)) {
  console.log(o);
}

Je l'utilise parfois pour tester rapidement toutes les fonctions sur des objets avec des entrées et sorties simples.

j'ai eu un problème similaire en utilisant Angular, voici la solution que j'ai trouvé.

Étape 1. récupérez toutes les clés de l'objet. à l'aide de l'Objet.touches. Cette méthode retourne un tableau d'un objet énumérable propriétés.

Étape 2. crée un tableau vide. C'est un endroit où toutes les propriétés vont vivre, puisque votre nouvelle boucle ngFor va pointer vers ce tableau, nous devons les attraper tout. Étape 3. Lancez toutes les clés et poussez chacune dans le tableau que vous avez créé. Voilà à quoi ça ressemble dans le code.

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

voici un lien vers le billet original. https://medium.com/@papaponmx/looping-over-object-properties-with-ngfor-in-angular-869cd7b2ddcc