Comment parcourir ou énumérer un objet JavaScript?

J'ai un objet JavaScript comme le suivant:

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

Maintenant , je veux faire une boucle à travers tous les péléments ( p1, p2, p3...) et obtenir les clés et les valeurs. Comment puis je faire ça?

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

Vous pouvez utiliser la for-inboucle 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 qu'elle ne provient 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]);
    }
}

For-of avec une alternative Object.keys ():

var p = {
    0: "value1",
    "b": "value2",
    key: "value3"
};

for (var key of Object.keys(p)) {
    console.log(key + " -> " + p[key])
}

Remarquez l'utilisation de for-ofau lieu de for-in, s'il n'est pas utilisé, il renverra undefined sur les propriétés nommées et Object.keys()garantit l'utilisation des seules propriétés de l'objet sans les propriétés de la chaîne de prototype entières

En utilisant la nouvelle Object.entries()méthode:

Remarque: Cette méthode n'est pas prise en charge nativement par Internet Explorer. Vous pouvez envisager d'utiliser un Polyfill pour les anciens navigateurs.

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

for (let [key, value] of Object.entries(p)) {
  console.log(`${key}: ${value}`);
}

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

ECMAScript 6 ajoute for...of:

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

ECMAScript 8 ajoute 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éstructurer et Object.entries:

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

Les deux Object.keys()et Object.entries()itèrent les propriétés dans le même ordre qu'une for...inboucle, mais ignorent la chaîne prototype . Seules les propriétés énumérables de l'objet sont itérées.

Vous devez utiliser la boucle for-in

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

Par conséquent, lorsque vous utilisez des boucles for-in, utilisez toujours la hasOwnPropertyméthode pour déterminer si la propriété actuelle dans l'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 de méthodes alternatives pour parcourir les objets.

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

1. Si vous travaillez avec jQuery , vous pouvez utiliser la jQuery.each()méthode. Il peut être utilisé pour itérer de manière transparente sur les objets et les tableaux:

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

2. Dans Underscore.js, vous pouvez trouver une méthode _.each(), qui itère sur une liste d'éléments, donnant chacun à son tour à une fonction fournie (faites attention à l'ordre des arguments dans la fonction iteratee !):

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

3. Lo-Dash propose plusieurs méthodes pour itérer sur les propriétés des objets. Basic _.forEach()(ou son alias _.each()) est utile pour parcourir à la fois les objets et les tableaux, mais (!) Les objets avec lengthpropriété sont traités comme des tableaux, et pour éviter ce comportement, il est suggéré d'utiliser les méthodes _.forIn()et _.forOwn()(elles ont également l' valueargument en premier):

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

   _.forIn()itère sur les propriétés énumérables propres et héritées d'un objet, tandis qu'il _.forOwn()itère uniquement sur les propriétés propres d'un objet (essentiellement en hasOwnPropertyfonction de la fonction). Pour les objets simples et les littéraux d'objets, n'importe laquelle de ces méthodes fonctionnera correctement.

Généralement, toutes les méthodes décrites ont le même comportement avec tous les objets fournis. En plus d'utiliser une for..inboucle native sera généralement plus rapide que n'importe quelle abstraction, par exemple jQuery.each(), ces méthodes sont considérablement plus faciles à utiliser, nécessitent moins de codage et offrent une meilleure gestion des erreurs.

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

Plus d'informations que 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 :

• Étendre les implémentations
• Itération des clés d'objets
• itération littérale d'objet

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

Pour les anciens navigateurs, vous disposez d' un polyfill simple et complet

UPD:

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

itération littérale d'objet

Préface:

• Les propriétés des objets peuvent être propres (la propriété se trouve 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 des objets peuvent être énumérables ou non énumérables . Les propriétés non énumérables sont exclues de nombreux énumérations / tableaux de propriétés.
• Les noms de propriété peuvent être des chaînes ou des symboles. Les propriétés dont les noms sont des symboles sont exclues de nombreux énumérations / tableaux de propriétés.

Ici, en 2018, vos options pour parcourir les propriétés d'un objet sont (certains exemples suivent la liste):

1. for-in[ MDN , spec ] - Une structure de boucle qui parcourt les noms des propriétés énumérables d'un objet , y compris celles héritées, dont les noms sont des chaînes
2. Object.keys[ MDN , spec ] - Une fonction fournissant un tableau des noms de d'un objet propre , dénombrables propriétés dont les noms sont des chaînes.
3. Object.values[ MDN , spec ] - Une fonction fournissant un tableau des valeurs de l' objet d'un propre , dénombrables propriétés.
4. Object.entries[ MDN , spec ] - Une fonction fournissant un tableau des noms et des valeurs de d'un objet propre , dénombrables propriétés (chaque entrée de la matrice est une [name, value]matrice).
5. Object.getOwnPropertyNames[ MDN , spec ] - Une fonction fournissant un tableau des noms d'un objet de propres propriétés (même les non-dénombrables) dont les noms sont des chaînes.
6. Object.getOwnPropertySymbols[ MDN , spec ] - Une fonction fournissant un tableau des noms d'un objet de propres propriétés (même les non-dénombrables) dont les noms sont des symboles.
7. Reflect.ownKeys[ MDN , spec ] - Une fonction fournissant un tableau des noms d'un objet de propres propriétés (même les non-dénombrables), que ces noms sont des chaînes ou des symboles.
8. Si vous voulez toutes les propriétés d'un objet, y compris celles héritées non dénombrables, vous devez utiliser une boucle et Object.getPrototypeOf[ MDN , spécifications ] et l' utilisation Object.getOwnPropertyNames, Object.getOwnPropertySymbolsou Reflect.ownKeyssur chaque objet dans la chaîne de prototype ( par exemple au bas de cette réponse).

Avec tous sauf for-in, vous utiliseriez une sorte de boucle construction 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 for-ofboucle, mais vous pouvez utiliser n'importe quelle construction en 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 propriétés non énumérables 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;
}

Vous pouvez simplement itérer dessus comme:

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

Notez que keycela ne prendra pas la valeur de la propriété, c'est juste une valeur d'index.

Depuis que es2015 devient de plus en plus populaire, je publie cette réponse qui inclut l'utilisation du générateur et de l'itérateur pour itérer en douceur par [key, value]paires. Comme c'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 dont vous pouvez faire un itérateur et un générateur que vous pouvez trouver sur la page Mozilla du développeur.

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

ÉDITER:

ES2017 inclura Object.entriesce qui rendra l'itération sur des [key, value]paires d'objets encore plus facile. On sait maintenant qu'il fera partie d'une norme selon les informations d'étape ts39 .

Je pense qu'il est temps de mettre à jour ma réponse pour la laisser devenir 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 trouver plus d'informations sur l'utilisation sur la page MDN

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

Remarque: vous pouvez le faire sur des tableaux, mais vous parcourrez également les lengthpropriétés et d'autres.

Après avoir parcouru toutes les réponses ici, hasOwnProperty n'est pas requis pour mon propre usage car 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]
}

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

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

Il est intéressant que les personnes dans ces réponses aient abordé les deux Object.keys()et for...ofne les aient jamais combinées:

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

_{Vous ne pouvez pas juste for...ofun Objectparce que ce n'est pas un itérateur, et for...indexou .forEach()ing Object.keys()est laid / inefficace.
Je suis content que la plupart des gens s'abstiennent for...in(avec ou sans vérification .hasOwnProperty()) car c'est aussi un peu compliqué, donc à part ma réponse ci-dessus, je suis ici pour dire ...}

Vous pouvez faire itérer les associations d'objets ordinaires! Se Mapcomporter comme des s avec une utilisation directe du for...of
DEMO sophistiqué fonctionnant dans Chrome et FF (je suppose que ES6 uniquement)

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 ma cale 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 vouliez toujours profiter des autres fonctionnalités de Map (sans les caler toutes), mais vouliez toujours utiliser la notation d'objet soignée, puisque les objets sont maintenant itérables, vous pouvez maintenant simplement en faire une Map!

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

Pour ceux qui n'aiment pas faire de shim, ou jouer avec prototypeen général, n'hésitez pas à faire la fonction sur la fenêtre à la place, en l'appelant quelque chose comme ça getObjIterator();

//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 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 dans le futur.

Object.keys (obj): tableau

récupère toutes les clés de chaîne de toutes les propriétés propres (non héritées) énumérables.

Il donne donc la même liste de clés que vous souhaitez en testant chaque clé d'objet avec hasOwnProperty. Vous n'avez pas besoin de cette opération de test supplémentaire et Object.keys( obj ).forEach(function( key ){})vous êtes 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 les résultats suivants

• L'approche Object.keys a pris 40,21101451665163 millisecondes.
• for ... in / hasOwnProperty a pris 98,26163508463651 millisecondes.

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

PS2: Dans ES6 (EcmaScript 2015), vous pouvez parcourir plus facilement un objet itérable:

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 parcourir un objet.

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


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

Vous pouvez également utiliser Object.keys () et parcourir les clés d'objet comme ci-dessous pour obtenir la valeur:

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

Object.keys(p).forEach((key)=> {
 console.log(key +' -> '+ p[key]);
});

Uniquement du 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
}

La Object.keys()méthode renvoie un tableau des propres propriétés énumérables d'un objet donné. En savoir plus ici

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

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

Performance

Aujourd'hui 2020.03.06 j'effectue des tests des solutions choisies sur Chrome v80.0, Safari v13.0.5 et Firefox 73.0.1 sur MacOs High Sierra v10.13.6

Conclusions

• solutions basées sur for-in (A, B) sont rapides (ou les plus rapides) pour tous les navigateurs pour petits et grands objets
• étonnamment for-of (H), la solution est rapide sur le chrome pour les petits et les gros objets
• solutions basées sur un index explicite i (J, K) sont assez rapides sur tous les navigateurs pour les petits objets (pour firefox aussi rapide pour les gros objets mais moyenne rapide sur les autres navigateurs)
• les solutions basées sur des itérateurs (D, E) sont les plus lentes et non recommandées
• la solution C est lente pour les gros objets et moyenne-lente pour les petits objets

Détails

Des tests de performance ont été effectués pour

• petit objet - avec 3 champs - vous pouvez effectuer le test sur votre machine ICI
• 'grand' objet - avec 1000 champs - vous pouvez effectuer des tests sur votre machine ICI

Les extraits ci-dessous présentent les solutions utilisées

function A(obj,s='') {
	for (let key in obj) if (obj.hasOwnProperty(key)) s+=key+'->'+obj[key] + ' ';
  return s;
}

function B(obj,s='') {
	for (let key in obj) s+=key+'->'+obj[key] + ' ';
  return s;
}

function C(obj,s='') {
  const map = new Map(Object.entries(obj));
	for (let [key,value] of map) s+=key+'->'+value + ' ';
  return s;
}

function D(obj,s='') {
  let o = { 
    ...obj,
    *[Symbol.iterator]() {
      for (const i of Object.keys(this)) yield [i, this[i]];    
    }
  }
  for (let [key,value] of o) s+=key+'->'+value + ' ';
  return s;
}

function E(obj,s='') {
  let o = { 
    ...obj,
    *[Symbol.iterator]() {yield *Object.keys(this)}
  }
  for (let key of o) s+=key+'->'+o[key] + ' ';
  return s;
}

function F(obj,s='') {
	for (let key of Object.keys(obj)) s+=key+'->'+obj[key]+' ';
  return s;
}

function G(obj,s='') {
	for (let [key, value] of Object.entries(obj)) s+=key+'->'+value+' ';
  return s;
}

function H(obj,s='') {
	for (let key of Object.getOwnPropertyNames(obj)) s+=key+'->'+obj[key]+' ';
  return s;
}

function I(obj,s='') {
	for (const key of Reflect.ownKeys(obj)) s+=key+'->'+obj[key]+' ';
  return s;
}

function J(obj,s='') {
  let keys = Object.keys(obj);
	for(let i = 0; i < keys.length; i++){
    let key = keys[i];
    s+=key+'->'+obj[key]+' ';
  }
  return s;
}

function K(obj,s='') {
  var keys = Object.keys(obj), len = keys.length, i = 0;
  while (i < len) {
    let key = keys[i];
    s+=key+'->'+obj[key]+' ';
    i += 1;
  }
  return s;
}

function L(obj,s='') {
  Object.keys(obj).forEach(key=> s+=key+'->'+obj[key]+' ' );
  return s;
}

function M(obj,s='') {
  Object.entries(obj).forEach(([key, value]) => s+=key+'->'+value+' ');
  return s;
}

function N(obj,s='') {
  Object.getOwnPropertyNames(obj).forEach(key => s+=key+'->'+obj[key]+' ');
  return s;
}

function O(obj,s='') {
  Reflect.ownKeys(obj).forEach(key=> s+=key+'->'+obj[key]+' ' );
  return s;
}



// TEST

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};
let log = (name,f) => console.log(`${name} ${f(p)}`)

log('A',A);
log('B',B);
log('C',C);
log('D',D);
log('E',E);
log('F',F);
log('G',G);
log('H',H);
log('I',I);
log('J',J);
log('K',K);
log('L',L);
log('M',M);
log('N',N);
log('O',O);

This snippet only presents choosen solutions

Et voici le résultat pour les petits objets sur chrome

Vous pouvez ajouter une fonction forEach simple à tous les objets, vous pouvez donc parcourir automatiquement 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 ceux qui n'aiment pas la méthode " for ... in ":

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 appeler simplement:

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

Si vous ne voulez pas avoir de conflits avec d'autres méthodes forEach, vous pouvez le nommer avec votre nom unique.

Les boucles peuvent être assez intéressantes lors de l'utilisation de JavaScript pur. Il semble que seul ECMA6 (nouvelle spécification JavaScript 2015) ait maîtrisé les boucles. Malheureusement, au moment où j'écris ceci, les navigateurs et l'environnement de développement intégré (IDE) populaire ont encore du mal à prendre en charge 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;
  }
}

De plus, je sais que cela est hors de portée avec cette question, mais en 2011, ECMAScript 5.1 a ajouté la forEachméthode pour les tableaux uniquement, ce qui a essentiellement créé une nouvelle façon améliorée de parcourir les tableaux tout en laissant des objets non itérables avec l'ancienne forboucle verbeuse et déroutante . Mais la partie étrange est que cette nouvelle forEachméthode ne prend pas en charge breakce qui a conduit à toutes sortes d'autres problèmes.

Fondamentalement, en 2011, il n'y a pas de véritable moyen solide de boucler en JavaScript autre que ce que de nombreuses bibliothèques populaires (jQuery, Underscore, etc.) ont décidé de réimplémenter.

Depuis 2015, nous avons maintenant une meilleure façon de boucler (et de casser) tout type d'objet (y compris les tableaux et les chaînes). Voici à quoi ressemblera finalement une boucle en JavaScript lorsque la recommandation deviendra grand public:

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 prendront pas en charge le code ci-dessus à partir du 18 juin 2016. Même dans Chrome, vous devez activer cet indicateur spécial pour qu'il fonctionne: chrome://flags/#enable-javascript-harmony

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

Dans ES6, nous avons des symboles bien connus pour exposer certaines méthodes précédemment internes, vous pouvez l'utiliser pour définir le fonctionnement des 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 de for ... 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!

Je ferais cela plutôt que de vérifier obj.hasOwnerPropertydans chaque for ... inboucle.

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

Utiliser un for-ofsurObject.keys()

Comme:

let object = {
   "key1": "value1"
   "key2": "value2"
   "key3": "value3"
};

for (var key of Object.keys(p)) {
   console.log(key + " : " + object[key])
}

Si vous souhaitez également parcourir les propriétés non énumérables , vous pouvez utiliser Object.getOwnPropertyNames(obj)pour renvoyer un tableau de toutes les propriétés (énumérables 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 doit parcourir les objets 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");
      }
   }
}

Compte tenu de ES6, je voudrais ajouter ma propre cuillère de sucre et fournir une autre approche pour itérer sur les propriétés de l'objet.

Étant donné qu'un objet JS simple n'est pas itérable juste à la sortie de la boîte, nous ne pouvons pas utiliser la for..ofboucle pour itérer sur son contenu. Mais personne ne peut nous empêcher de le rendre itérable .

Ayons un bookobjet.

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 des générateurs ES6 , vous pouvez certainement raccourcir le code ci-dessus.

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 en le rendant Objectitérable au prototypeniveau.

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

De plus, les objets conformes au protocole itérable peuvent être utilisés avec le nouvel opérateur d' étalement des fonctionnalités ES2015 , ce qui nous permet de lire les valeurs des propriétés des objets sous forme de tableau.

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

Ou vous pouvez utiliser l' affectation de déstructuration :

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.

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

let arrValues = Object.values( yourObject) ;

il retourne un tableau des valeurs des objets et il n'extrait pas les valeurs du prototype !!

MDN DOCS Object.values ​​()

et pour les clés (déjà répondu devant moi ici)

let arrKeys   = Object.keys(yourObject);

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

let p = {foo: "bar"};
for (let [key, value] of Object.entries(p)) {
  console.log(key, value);
}