Comment parcourir ou énumérer un objet JavaScript ?

https://stackoverflow.com/questions/684672

22-08-2019
|

Question

J'ai un objet JavaScript comme celui-ci :

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

Maintenant, je veux parcourir tout p éléments (p1, p2, p3...) Et obtenez leurs clés et valeurs.Comment puis je faire ça?

Je peux modifier l'objet JavaScript si nécessaire.Mon objectif ultime est de parcourir certaines paires clé-valeur et si possible, je veux éviter d'utiliser eval.

La solution

Vous pouvez utiliser la boucle de for-in comme indiqué par d'autres. Cependant, vous devez également vous assurer que la clé que vous obtenez est une propriété réelle d'un objet, et ne vient pas du prototype.

Voici l'extrait:

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

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

Autres conseils

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

ECMAScript 6 ajoute for...of :

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

Object.entries() ce qui évite d'avoir à rechercher chaque valeur dans l'objet d'origine:

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

Vous pouvez combiner for...of, déstructurant et Object.entries:

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

Les deux propriétés Object.keys() et Object.entries() Iterate dans le même ordre en boucle de for...in mais ignorer la chaîne prototype . Seulement propres propriétés énumérables de l'objet sont réitérés.

Vous devez utiliser le en boucle

Mais être très prudent lorsque vous utilisez ce type de boucle, car cela boucle toutes les propriétés le long de la chaîne prototype .

Par conséquent, lors de l'utilisation pour en boucles, toujours utiliser la méthode de hasOwnProperty pour déterminer si la propriété actuelle itération est vraiment une propriété de l'objet que vous vérifiez sur:

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 l'on ne mentionne pas d'autres méthodes pour boucler à travers des objets.

Aujourd'hui, de nombreuses bibliothèques JavaScript bien connues fournissent leurs propres méthodes pour itérer collections, soit plus tableaux , objets et objets comme tableau . Ces méthodes sont faciles à utiliser et sont entièrement compatibles avec tous les navigateurs.

Si vous travaillez avec jQuery , vous pouvez utiliser jQuery.each() méthode. Il peut être utilisé pour itérer de façon transparente sur les objets et les tableaux:
```
$.each(obj, function(key, value) {
    console.log(key, value);
});
```
Underscore.js vous pouvez trouver _.each() , qui itère sur une liste d'éléments, donnant chacun à leur tour à une fonction fournie (attention à l'ordre des arguments dans iteratee fonction!):
```
_.each(obj, function(value, key) {
    console.log(key, value);
});
```
Lo-Dash fournit plusieurs méthodes pour itérer sur les propriétés d'objet. _.forEach() (ou il est _.each() alias) est utile pour une boucle à travers les objets et les tableaux, les objets cependant (!) la propriété length sont traités comme des tableaux, et d'éviter ce comportement, il est suggéré d'utiliser _.forIn() et les méthodes de _.forOwn() (ceux-ci ont également argument value venir en premier):
```
_.forIn(obj, function(value, key) {
    console.log(key, value);
});
```
_.forIn() itère propres et hérités propriétés énumérables d'un objet, tandis que _.forOwn() itère seulement sur propre propriétés d'un objet (vérification essentiellement contre la fonction hasOwnProperty). Pour les objets simples et objets littéraux une de ces méthodes fonctionnent très bien.

En général, tous les procédés décrits ont le même comportement avec des objets fournis. Outre l'utilisation de la boucle de for..in native sera généralement plus rapide que toute abstraction, comme jQuery.each(), ces méthodes sont beaucoup plus faciles à utiliser, nécessitent moins de codage et de fournir une meilleure gestion des erreurs.

Dans ECMAScript 5, vous avez une nouvelle approche dans les domaines d'itération de littéral - Object.keys

Plus d'informations vous pouvez voir sur 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 les performances de cette approche avec différentes implémentations sur jsperf.com :

Prise en charge du navigateur que vous pouvez voir sur Table compat de Kangax

Pour ancien navigateur que vous avez simples et < a href = "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys" rel = "noreferrer"> à polyfill

UPD:

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

objet itération littéral

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é, il est juste une valeur d'index.

Avant-propos:

Propriétés de l'objet peut être propre (la propriété est sur l'objet lui-même) ou hérité (et non sur l'objet lui-même, sur l'un de ses prototypes).
Propriétés de l'objet peuvent être dénombrable ou non dénombrable . Les propriétés non-dénombrables sont laissés sur beaucoup de tableaux énumérations / propriété.
Les noms de propriété peuvent être des chaînes ou des symboles. Propriétés dont les noms sont des symboles sont laissés de lots de énumérations / tableaux de propriété.

Ici, en 2018, vos options pour une boucle à travers les propriétés d'un objet sont (quelques exemples suivent la liste):

for-in [ MDN , spécifications ] - une structure en boucle qui boucle à travers les noms de dénombrables propriétés d'un objet, y compris celles héritées, dont les noms sont des chaînes
Object.keys [ MDN spec ] - une fonction fournissant un tableau des noms d'une objets propre , dénombrables propriétés dont les noms sont des chaînes.
Object.values [ MDN spec ] - une fonction fournissant un tableau de la valeurs de son objet propre , dénombrable propriétés.
Object.entries [ MDN , spécifications ] - une fonction fournissant un tableau des noms et valeurs d'un objet de propre , dénombrable propriétés (chaque entrée dans le tableau est un tableau de [name, value]).
Object.getOwnPropertyNames [ MDN spec ] - une fonction fournissant un tableau des noms d'une objets propre propriétés (même les non-dénombrables) dont les noms sont des chaînes.
Object.getOwnPropertySymbols [ MDN spec ] - une fonction fournissant un tableau des noms d'une objets propre propriétés (même les non-dénombrables) dont les noms sont des symboles.
Reflect.ownKeys [ MDN spec ] - une fonction fournissant un tableau des noms d'une objets propres propriétés (même les non-dénombrables), que ces noms sont des chaînes ou des symboles.
Si vous voulez tous des propriétés d'un objet, y compris celles 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 dans la chaîne de prototype (par exemple au bas de cette réponse).

Avec tous sauf for-in, vous devriez utiliser une sorte de boucle construire 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 de for-of, mais vous pouvez utiliser une construction de boucle) :

// 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 non-dénombrables héritées:

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

Depuis es2015 devient de plus en plus populaire je signale cette réponse qui comprennent l'utilisation du générateur et iterator pour itérer en douceur par paires de [key, value]. 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 comment pouvez-vous faire un itérateur et le générateur, vous trouverez à la page Mozilla développeur.

Il a aidé quelqu'un espoir.

EDIT:

ES2017 comprendra Object.entries qui fera itérer sur des paires de [key, value] dans des objets encore plus facile. On sait maintenant que ce sera une partie d'une norme selon le TS39 des informations de phase.

Je pense qu'il est temps de mettre à jour ma réponse à laisser est devenu encore plus frais que c'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 trouver plus sur l'utilisation sur page MDN

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

. Remarque: vous pouvez le faire sur les tableaux, mais vous itérer sur les propriétés de length et d'autres aussi

Après avoir parcouru 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 tout traitement supplémentaire javascript. Ceci est tout ce que je suis en utilisant:

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

via prototype avec forEach () qui doit sauter le chaîne de 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

Ce sont des gens intéressants dans ces réponses ont touché à la fois Object.keys() et for...of mais ne les a jamais combiné:

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

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

Je suis heureux que la plupart des gens sont abstenant de for...in (avec ou sans vérifier .hasOwnProperty()) car c'est aussi un peu en désordre, si autre que ma réponse ci-dessus, je suis ici pour dire ...}

Vous pouvez créer des associations d'objets ordinaires itérer! Comme Maps se comporter avec l'utilisation directe de la for...of fantaisie DEMO travailler dans 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 objet réel de la carte qui n'a pas le beau sucre syntaxique.

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

En fait, avec cette cale, si vous voulez encore profiter d'autres fonctionnalités de la carte (sans les calant tous dans) mais toujours voulu utiliser la notation objet propre, car les objets sont maintenant Iterable vous pouvez juste faire une carte de là!

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

Pour ceux qui n'aiment pas Shim, ou énervez prototype en général, ne hésitez pas à faire fonctionner sur la fenêtre à la place, appeler 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 l'appeler comme une fonction ordinaire, rien d'autre est affecté

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

for (let pair of getObjIterator(ordinaryObject))

Il n'y a aucune raison pour que ne fonctionnerait pas.

Bienvenue dans le futur.

Object.keys (obj): Array

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

Il donne la même liste des clés que vous souhaitez en testant chaque touche d'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 des résultats suivants

approche Object.keys a 40.21101451665163 millisecondes.
pour ... approche / hasOwnProperty a 98.26163508463651 millisecondes.

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

PS2: Dans ES6 (EcmaScript 2015), vous pouvez itérer itérables objectera plus agréable:

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 effectuer une itération à travers un objet.

   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>

La méthode Object.keys() retourne un tableau de propriétés propres dénombrables d'un objet donné. En savoir plus sur ce

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

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

Vous pouvez ajouter simple forEach fonction à tous les objets, vous pouvez donc en boucle automatiquement par un 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 ceux qui n'aiment pas " ... 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 simple appel:

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

Si vous ne voulez pas avoir des conflits avec d'autres forEach-méthodes que vous pouvez le nom avec votre nom unique.

Seul le 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
}

Les boucles peuvent être assez intéressantes lors de l'utilisation pure JavaScript. Il semble que seul ECMA6 (Nouvelle spécification JavaScript 2015) a obtenu les boucles sous contrôle. Malheureusement, comme j'écris cela, les deux navigateurs et populaire environnement de développement intégré (IDE) ont encore du mal à soutenir complètement les nouvelles cloches et de sifflets.

En un coup d'oeil ici est ce qui ressemble une boucle d'objet JavaScript comme 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;
  }
}

De plus, je sais que cela est hors de portée de cette question, mais en 2011, ECMAScript 5.1 a ajouté la méthode forEach pour les tableaux uniquement qui essentiellement a créé une nouvelle façon améliorée à boucle à travers des réseaux tout en laissant des objets non itératives avec l'ancien bavard et boucle for confusion. Mais la partie étrange est que cette nouvelle méthode de forEach ne supporte pas break qui a conduit à toutes sortes d'autres problèmes.

En fait, en 2011, il n'y a pas une vraie façon solide à boucle en JavaScript autre que ce que beaucoup de bibliothèques populaires (jQuery, Underscore, etc.) ont décidé de re-mettre en œuvre.

En 2015, nous avons maintenant une meilleure de la route de la boîte à boucle (et break) tout type d'objets (y compris les tableaux et chaînes). Voici ce qu'une boucle JavaScript finira par ressembler quand la recommandation devient dominante:

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 du 18 Juin 2016. Même dans Chrome, vous devez activer ce drapeau spécial pour que cela fonctionne: chrome://flags/#enable-javascript-harmony

Tant que cela devient la nouvelle norme, l'ancienne méthode peut encore être utilisé, 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.

    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 quelqu'un doit faire une boucle par arrayObjects avec état :

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 Je voudrais ajouter ma propre cuillère de sucre et de fournir une approche plus itérer sur les propriétés de l'objet.

Comme objet JS plaine n'est pas itérables vient de sortir de la boîte, nous ne sommes pas en mesure d'utiliser la boucle de for..of pour itérer sur son contenu. Mais personne ne peut nous arrêter pour le rendre itérables .

Nous allons nous avons book objet.

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

Comme 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 le pouvoir de ES6 , vous pouvez certainement 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 faisant Object itérables au niveau de prototype.

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

En outre, les objets qui sont conformes au protocole itérables peuvent être utilisés avec la nouvelle fonctionnalité ES2015 propagation opérateur ainsi que nous pouvons lire les valeurs de propriétés d'objet comme un tableau.

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

Vous pouvez aussi utiliser destructuration mission:

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.

En ES6 nous avons des symboles bien connus pour exposer quelques méthodes internes précédemment, vous pouvez l'utiliser pour définir la façon dont fonctionnent les itérateurs 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 l'utilisation pour ... en 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!

Je ferais ce plutôt que de vérifier obj.hasOwnerProperty tous les loops de 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");
}

depuis ES06, vous pouvez obtenir les valeurs d'un objet sous forme de tableau avec

let arrValues = Object.values( yourObject) ;

il renvoie un tableau de valeurs d'objet et n'extrait pas les valeurs du prototype !!

Objet MDN DOCS.valeurs()

et pour les clés (j'ai déjà répondu avant moi ici)

let arrKeys   = Object.keys(yourObject);

Si vous voulez itérer sur propriétés non-dénombrables ainsi, vous pouvez utiliser

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

Dans le dernier scénario ES, vous pouvez faire quelque chose comme ceci:

Object.entries(p);

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

J'ai eu un problème similaire lors de l'utilisation angulaire, voici la solution que je l'ai trouvé.

Étape 1. Obtenir toutes les clés d'objet. en utilisant Object.keys. Cette méthode renvoie un tableau de propriétés propres dénombrables d'un objet donné.

Étape 2. Créer un tableau vide. Ceci est un où toutes les propriétés vont vivre, puisque votre nouvelle boucle ngFor va pointer vers ce tableau, on doit les attraper tous. Étape 3. Itérer jeter toutes les clés et pousser chacun dans le tableau que vous avez créé. Voilà comment cela 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 message original. https://medium.com/@ papaponmx / boucle-over-objet-propriétés-avec-ngfor-in-angulaire 869cd7b2ddcc

Un objet devient un itérateur quand il met en oeuvre le procédé .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

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow