web-dev-qa-db-fra.com

Boucle Javascript pour chaque objet sur un tableau associatif

Pourquoi ma boucle for-each n'itère-t-elle pas sur mon objet tableau associatif JavaScript?

// defining an array
var array = [];

// assigning values to corresponding keys
array["Main"] = "Main page";
array["Guide"] = "Guide page";
array["Articles"] = "Articles page";
array["Forum"] = "Forum board";

// expected: loop over every item,
// yet it logs only "last" assigned value - "Forum"
for (var i = 0; i < array.length; i++) {
    console.log(array[i]);
}

EDIT: jQuery each() pourrait être utile: https://api.jquery.com/jQuery.each/

javascriptarraysforeach
148
Szymon Toda

La propriété .length suit uniquement les propriétés avec des index numériques (clés). Vous utilisez des chaînes pour les clés.

Tu peux le faire:

var arr_jq_TabContents = {}; // no need for an array

arr_jq_TabContents["Main"] = jq_TabContents_Main;
arr_jq_TabContents["Guide"] = jq_TabContents_Guide;
arr_jq_TabContents["Articles"] = jq_TabContents_Articles;
arr_jq_TabContents["Forum"] = jq_TabContents_Forum;

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

Pour être sûr, c'est une bonne idée dans les boucles comme celle-ci de s'assurer qu'aucune des propriétés n'est un résultat inattendu de l'héritage:

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

edit - c'est probablement une bonne idée de noter maintenant que la fonction Object.keys() est disponible sur les navigateurs modernes et dans Node, etc. Cette fonction renvoie les clés "propres" d'un objet, sous forme de tableau:

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

La fonction de rappel transmise à .forEach() est appelée avec chaque clé et son index dans le tableau renvoyé par Object.keys(). Il a également passé le tableau à travers lequel la fonction itère, mais ce tableau ne nous est pas vraiment utile; nous avons besoin de l’objet original . Vous pouvez y accéder directement par nom, mais (à mon avis), il est un peu plus agréable de le passer explicitement, ce qui se fait en passant un deuxième argument à .forEach() - l'objet d'origine - qui sera lié en tant que this à l'intérieur du rappel. (Je viens de voir que cela a été noté dans un commentaire ci-dessous.)

265
Pointy

C'est une approche très simple. L'avantage est que vous pouvez également obtenir des clés:

for (var key in array) {
    var value = array[key];
    console.log(key, value);
}

Pour ES6:

array.forEach(value => {
  console.log(value)
})

Pour ES6: (Si vous voulez valeur, index et le tableau lui-même)

array.forEach((value, index, self) => {
  console.log(value, index, self)
})
61
tika

Il existe déjà quelques exemples simples, mais d'après votre formulation, vous constatez que vous venez probablement de PHP et que vous vous attendez à ce que JavaScript fonctionne de la même manière - ce n'est pas le cas. Un PHP array est très différent d'un JavaScript Array.

En PHP, un tableau associatif peut faire presque tout ce qu'un tableau indexé numériquement (les fonctions array_* fonctionnent, vous pouvez le count(), etc.). Vous créez simplement un tableau et commencez à affecter des index de chaîne au lieu de numériques.

En JavaScript, tout est un objet (à l'exception des primitives: chaîne, numérique, booléen), et les tableaux sont une implémentation particulière qui vous permet de disposer d'index numériques. Tout élément poussé dans un tableau affectera sa length et pourra être itéré à l'aide des méthodes Array (map, forEach, reduce, filter, find, etc.) Cependant, comme tout est un objet, vous êtes toujours libre d'assigner des propriétés, parce que c'est quelque chose que vous faites à n'importe quel objet. La notation entre crochets est simplement un autre moyen d’accéder à une propriété, donc dans votre cas:

array['Main'] = 'Main Page';

est en fait équivalent à:

array.Main = 'Main Page';

D'après votre description, je suppose que vous voulez un "tableau associatif", mais pour JavaScript, il s'agit d'un cas simple d'utilisation d'un objet en tant que hashmap. Je sais aussi que c'est un exemple, mais évitez les noms non explicites qui décrivent uniquement le type de variable (par exemple, array) et le nom en fonction de ce qu'elle devrait contenir (par exemple, pages). Les objets simples n'ont pas beaucoup de bonnes manières directes d'itérer, aussi nous transformons souvent d'abord en tableaux en utilisant les méthodes Object (Object.keys dans ce cas - il y a aussi entries et values actuellement ajoutés à certains navigateurs) que nous pouvons boucler .

// assigning values to corresponding keys
const pages = {
  Main: 'Main page',
  Guide: 'Guide page',
  Articles: 'Articles page',
  Forum: 'Forum board',
};

Object.keys(pages).forEach((page) => console.log(page));
3
Josh from Qaribou

arr_jq_TabContents[key] voit le tableau comme une forme d'index 0.

3
MSO

Voici un moyen simple d'utiliser un tableau associatif en tant que type d'objet générique:

Object.prototype.forEach = function(cb){
   if(this instanceof Array) return this.forEach(cb);
   let self = this;
   Object.getOwnPropertyNames(this).forEach(
      (k)=>{ cb.call(self, self[k], k); }
   );
};

Object({a:1,b:2,c:3}).forEach((value, key)=>{ 
    console.log(`key/value pair: ${key}/${value}`);
});

2
Chouettou
var obj = {
    no : ["no",32],
    nt : ["no",32],
    nf : ["no",32,90]
};
count = -1; // which must be static value
for(i in obj){ 
   count++;
   if(obj.hasOwnProperty(i){
        console.log(obj[i][count])
      };
};

dans ce code, j’utilisais la méthode des parenthèses pour les valeurs d’appel dans array car elle contenait un tableau, mais brièvement l’idée selon laquelle une variable i possède une clé de propriété et avec une boucle appelée les deux valeurs d’un tableau associé

méthode parfaite, si cela vous intéresse, appuyez comme

0
Dev-Wb Ahmed

Si le fichier node.js ou le navigateur est pris en charge Object.entries() , il peut être utilisé à la place de Object.keys() ( https://stackoverflow.com/a/18804596/225291 ). 

const h = {
  a: 1
  b: 2
};

Object.entries(h).forEach(([key, value]) => console.log(value));
// => 1
// => 2

dans cet exemple, forEach utilise Affectation de destruction d'un tableau. 

0
banyan