web-dev-qa-db-fra.com

Comment itérer sur un objet JavaScript?

J'ai un objet en JavaScript:

{
    abc: '...',
    bca: '...',
    zzz: '...',
    xxx: '...',
    ccc: '...',
    // ...
}

Je veux utiliser une boucle for pour obtenir ses propriétés. Et je veux le parcourir par parties (pas toutes les propriétés d'un objet à la fois).

Avec un tableau simple, je peux le faire avec une boucle standard for:

for (i = 0; i < 100; i++) { ... } // first part
for (i = 100; i < 300; i++) { ... } // second
for (i = 300; i < arr.length; i++) { ... } // last

Mais comment le faire avec des objets?

javascriptloopsobjectiterationjavascript-objects
340
nkuhta

Pour la plupart des objets, utilisez for .. in:

for (var key in yourobject) {
  console.log(key, yourobject[key]);
}

Avec ES6, si vous avez besoin simultanément de clés et de valeurs, ne

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

Pour éviter la journalisation des propriétés héritées, vérifiez avec hasOwnProperty :

for (var key in yourobject) {
   if (yourobject.hasOwnProperty(key)) {
      console.log(key, yourobject[key]);
   }
}

Il n'est pas nécessaire de vérifier hasOwnProperty lors de l'itération de clés si vous utilisez un objet simple (par exemple, un objet que vous avez créé vous-même avec {})

Cette documentation MDN explique plus généralement comment traiter les objets et leurs propriétés.

Si vous voulez le faire "en morceaux", le mieux est d'extraire les clés d'un tableau. Comme la commande n'est pas garantie, c'est la bonne façon. Dans les navigateurs modernes, vous pouvez utiliser

var keys = Object.keys(yourobject);

Pour être plus compatible, vous feriez mieux de faire ceci:

 var keys = [];
 for (var key in yourobject) {      
     if (yourobject.hasOwnProperty(key)) keys.Push(key);
 }

Ensuite, vous pouvez parcourir vos propriétés par index: yourobject[keys[i]]:

for (var i=300; i<keys.length && i<600; i++) { 
   console.log(keys[i], yourobject[keys[i]]);
}
685
Denys Séguret

Voici une autre solution d'itération pour les navigateurs modernes:

Object.keys(obj).filter(function(k, i) {
    return i >= 100 && i < 300;
}).forEach(function(k) {
    console.log(obj[k]);
});

Ou même plus court:

Object.keys(obj).forEach(function(k, i) {
    if (i >= 100 && i < 300) {
        console.log(obj[k]);
    }
});

Cependant, vous devez considérer que les propriétés de l’objet JavaScript ne sont pas triées, c’est-à-dire qu’elles n’ont pas d’ordre.

53
VisioN

Avec les nouvelles fonctionnalités de l'ES6/ES2015, vous n'avez plus besoin d'utiliser un objet pour effectuer une itération sur un hachage. Vous pouvez utiliser un Carte . Les cartes Javascript gardent les clés dans l'ordre d'insertion, ce qui signifie que vous pouvez les parcourir sans avoir à vérifier la propriété hasOwnProperty, qui était toujours vraiment un hack.

Itérer sur une carte:

var myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");
for (var [key, value] of myMap) {
  console.log(key + " = " + value);
}
// Will show 2 logs; first with "0 = zero" and second with "1 = one"

for (var key of myMap.keys()) {
  console.log(key);
}
// Will show 2 logs; first with "0" and second with "1"

for (var value of myMap.values()) {
  console.log(value);
}
// Will show 2 logs; first with "zero" and second with "one"

for (var [key, value] of myMap.entries()) {
  console.log(key + " = " + value);
}
// Will show 2 logs; first with "0 = zero" and second with "1 = one"

ou utiliser pour chaque:

myMap.forEach(function(value, key) {
  console.log(key + " = " + value);
}, myMap)
// Will show 2 logs; first with "0 = zero" and second with "1 = one"
15
Paul

En utilisant Object.entries vous faites quelque chose comme ceci.

 // array like object with random key ordering
 const anObj = { 100: 'a', 2: 'b', 7: 'c' };
 console.log(Object.entries(anObj)); // [ ['2', 'b'],['7', 'c'],['100', 'a'] ]

La méthode Object.entries () renvoie un tableau de la propre propriété énumérable d'un objet donné [clé, valeur].

Ainsi, vous pouvez parcourir l'objet et obtenir key et value pour chaque objet et obtenir quelque chose comme ceci.

const anObj = { 100: 'a', 2: 'b', 7: 'c' };
Object.entries(anObj).map(obj => {
   const key   = obj[0];
   const value = obj[1];

   // do whatever you want with those values.
});

ou comme ça

// Or, using array extras
Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
});

Pour une référence, consultez la documentation MDN pour Object Entries

14
Adeel Imran

Pour ce faire, le seul moyen fiable consiste à enregistrer vos données d'objet dans deux tableaux, l'un des clés et l'autre pour les données:

var keys = [];
var data = [];
for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
        keys.Push(key);
        data.Push(obj[key]); // Not necessary, but cleaner, in my opinion. See the example below.
    }
}

Vous pouvez ensuite parcourir les tableaux comme vous le feriez normalement:

for(var i = 0; i < 100; i++){
    console.log(keys[i], data[i]);
    //or
    console.log(keys[i], obj[keys[i]]); // harder to read, I think.
}
for(var i = 100; i < 300; i++){
    console.log(keys[i], data[i]);
}

Je n'utilise pas Object.keys(obj), car c'est IE 9+.

7
Cerbrus

Si vous voulez la clé et la valeur lors de l'itération, vous pouvez utiliser une boucle pour ... de avec Object.entries .

const myObj = {a: 1, b: 2}

for (let [key, value] of Object.entries(myObj)) {
    console.log(`key=${key} value=${value}`)
}

// output: 
// key=a value=1
// key=b value=2
5
Derek Soike

-> si nous itérons sur un objet JavaScript en utilisant et trouvons la clé d'un tableau d'objets

Object.keys(Array).forEach(key => {

 console.log('key',key)

})
2
ashishdudhat

J'ai finalement mis au point une fonction utilitaire pratique avec une interface unifiée pour itérer des objets, des chaînes, des tableaux, des tableaux typés, des cartes, des ensembles, (tous les Iterables).

const iterate = require('@a-z/iterate-it');
const obj = { a: 1, b: 2, c: 3 };

iterate(obj, (value, key) => console.log(key, value)); 
// a 1
// b 2
// c 3

https://github.com/alrik/iterate-javascript

1
Alrik Zachert

Vous pouvez essayer d'utiliser lodash- Une bibliothèque d'utilitaires JavaScript moderne offrant modularité, performances et extras js to itération d'objet rapide: -

var  users  =   {
    'fred':     { 
        'user':   'fred',
            'age':  40 
    },
    'pebbles':  { 
        'user':   'pebbles',
         'age':  1 
    }
}; 
_.mapValues(users,  function(o)  { 
    return  o.age; 
});
// => { 'fred': 40, 'pebbles': 1 } (iteration order is not guaranteed)
// The `_.property` iteratee shorthand.
console.log(_.mapValues(users,  'age')); // returns age property & value 
console.log(_.mapValues(users,  'user')); // returns user property & value 
console.log(_.mapValues(users)); // returns all objects 
// => { 'fred': 40, 'pebbles': 1 } (iteration order is not guaranteed)
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash-compat/3.10.2/lodash.js"></script>
1
Parth Raval

Vraiment un PITA cela ne fait pas partie du Javascript standard.

/**
 * Iterates the keys and values of an object.  Object.keys is used to extract the keys.
 * @param object The object to iterate
 * @param fn (value,key)=>{}
 */
function objectForEach(object, fn) {
    Object.keys(object).forEach(key => {
        fn(object[key],key, object)
    })
}

Remarque: J'ai remplacé les paramètres de rappel par (valeur, clé) et ajouté un troisième objet pour rendre l'API cohérent avec les autres API.

Utilisez-le comme ça

const o = {a:1, b:true};
objectForEach(o, (value, key, obj)=>{
    // do something
});
1
Steven Spungin

Pour l'itération d'objet, nous utilisons généralement une boucle for..in. Cette structure parcourt toutes les propriétés enumerable, y compris celles héritées via l'héritage prototype. Par exemple:

let obj = {
  prop1: '1',
  prop2: '2'
}

for(let el in obj) {
  console.log(el);
  console.log(obj[el]);
}

Cependant, for..in fera une boucle sur tous les éléments énumérables et cela ne nous permettra pas de scinder l'itération en morceaux. Pour ce faire, nous pouvons utiliser la fonction intégrée Object.keys() pour récupérer toutes les clés d'un objet dans un tableau. Nous pouvons ensuite scinder l'itération en plusieurs boucles for et accéder aux propriétés à l'aide du tableau keys. Par exemple:

let obj = {
  prop1: '1',
  prop2: '2',
  prop3: '3',
  prop4: '4',
};

const keys = Object.keys(obj);
console.log(keys);


for (let i = 0; i < 2; i++) {
  console.log(obj[keys[i]]);
}


for (let i = 2; i < 4; i++) {
  console.log(obj[keys[i]]);
}
1
Willem van der Veen

Si vous voulez parcourir l'objet entier en une fois, vous pouvez utiliser la boucle for in:

for (var i in obj) {
  ...
}

Mais si vous voulez diviser l'objet en plusieurs parties, vous ne pouvez pas. Rien ne garantit que les propriétés de l'objet sont dans un ordre spécifié. Par conséquent, je peux penser à deux solutions.

Le premier d'entre eux est de "supprimer" les propriétés déjà lues:

var i = 0;
for (var key in obj) {
    console.log(obj[key]);
    delete obj[key];
    if ( ++i > 300) break;
}

Une autre solution à laquelle je peux penser est d'utiliser Array of Arrays à la place de l'objet:

var obj = [['key1', 'value1'], ['key2', 'value2']];

Ensuite, la boucle standard for fonctionnera.

1
Michał Miszczyszyn

Avec ES6, vous avez besoin à la fois de clés et de valeurs, procédez de la sorte.

for (let [key, value] of Object.entries(your_object)) {
     console.log(key, value);
}
0
Ashish Gupta
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);
0
HovyTech

Oui. Vous pouvez parcourir un objet à l'aide de la boucle for. Voici un exemple

var myObj = {
    abc: 'ABC',
    bca: 'BCA',
    zzz: 'ZZZ',
    xxx: 'XXX',
    ccc: 'CCC',
}

var k = Object.keys (myObj);
for (var i = 0; i < k.length; i++) {
    console.log (k[i] + ": " + myObj[k[i]]);
}

REMARQUE: L'exemple mentionné ci-dessus ne fonctionnera que dans IE9 +. Voir la prise en charge du navigateur Objec.keys ici .

0
Omprakash Arumugam