La meilleure façon de stocker un tableau clé => valeur en JavaScript?

Question

Quelle est la meilleure façon de stocker un tableau key=>value en javascript, et comment cela peut-il être bouclé?

La clé de chaque élément doit être une étiquette, telle que {id} ou simplement id et la valeur doit être la valeur numérique de l'ID.

Cela devrait être soit l'élément d'une classe javascript existante, soit une variable globale qui pourrait facilement être référencée à travers la classe.

jVous pouvez utiliser jQuery.

Answer 1

C'est juste ce qui est un objet JavaScript:

var myArray = {id1: 100, id2: 200, "tag with spaces": 300}; 
myArray.id3 = 400; 
myArray["id4"] = 500; 

Vous pouvez parcourir à l'aide for..in loop:

for (var key in myArray) { 
    console.log("key " + key + " has value " + myArray[key]); 
} 

Voir aussi: Working with objects (MDN).

En ECMAScript6 il y a aussi Map (voir le tableau de compatibilité du navigateur il):

• Un objet a un prototype, donc il y a des clés par défaut dans la carte. Cela pourrait être contourné en utilisant map = Object.create (null) depuis ES5, mais a rarement été fait.

• Les clés d'un objet sont des chaînes et des symboles, où elles peuvent avoir n'importe quelle valeur pour une carte.

• Vous pouvez obtenir facilement la taille d'une carte tout en conservant manuellement la taille d'un objet.

Answer 2

Si je vous ai bien compris:

var hash = {}; 
hash['bob'] = 123; 
hash['joe'] = 456; 

var sum = 0; 
for (var name in hash) { 
    sum += hash[name]; 
} 
alert(sum); // 579 

Answer 3

en JavaScript un tableau de valeur de clé est stockée comme un objet. Il y a des choses comme des tableaux dans javascript, mais ils sont aussi quelque peu considérés comme des objets, vérifiez que les gars répondent - What is the difference between an array and an object?

Les tableaux sont généralement vus en utilisant la syntaxe du carré, et les objets (tableaux "key => value") en utilisant bouclés syntaxe de la parenthèse, bien que vous puissiez accéder et définir les propriétés de l'objet en utilisant la syntaxe carrée comme Alexey Romanov a montré.

Les tableaux en javascript sont généralement utilisés uniquement avec des touches numériques incrémentées automatiquement, mais les objets javascript peuvent également contenir des paires de valeurs clés, des fonctions et même d'autres objets.

Simple Tableau par ex.

$(document).ready(function(){ 

    var countries = ['Canada','Us','France','Italy']; 
    console.log('I am from '+countries[0]); 
    $.each(countries, function(key, value) { 
     console.log(key, value); 
    }); 

}); 

Sortie -

0 "Canada"

1 "Us"

2 "France"

3 "Italie"

Nous voyons ci-dessus que nous peut boucler un tableau numérique en utilisant la fonction jQuery.each et accéder aux informations en dehors de la boucle en utilisant le carré parenthèses avec des clés numériques.

objet simple (JSON)

$(document).ready(function(){ 

    var person = { 
     name: "James", 
     occupation: "programmer", 
     height: { 
      feet: 6, 
      inches: 1 
     }, 
    } 

    console.log("My name is "+person.name+" and I am a "+person.height.feet+" ft "+person.height.inches+" "+person.occupation); 

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

}); 

Sortie -

Mon nom est James et je suis un 6 pi 1 programmeur

nom

James

programmeur occupation

height Object {pieds: 6, pouces: 1}

Dans un langage comme php, cela serait considéré comme un tableau multidimensionnel avec des paires de valeurs clés, ou un tableau dans un tableau. Je suppose que parce que vous avez demandé comment faire une boucle dans un tableau de valeur clé que vous voulez savoir comment obtenir un objet (clé => tableau de valeur) comme l'objet personne ci-dessus pour avoir, disons, plus d'une personne.

Eh bien, maintenant que nous savons tableaux javascript sont généralement utilisés pour l'indexation numérique et des objets avec plus de souplesse pour l'indexation associative, nous allons les utiliser pour créer un tableau d'objets que nous boucle peut à travers, comme si -

tableau JSON (tableau d'objets) -

$(document).ready(function(){ 

    var people = [ 
     { 
      name: "James", 
      occupation: "programmer", 
      height: { 
       feet: 6, 
       inches: 1 
      } 
     }, { 
      name: "Peter", 
      occupation: "designer", 
      height: { 
       feet: 4, 
       inches: 10 
      } 
     }, { 
      name: "Joshua", 
      occupation: "CEO", 
      height: { 
       feet: 5, 
       inches: 11 
      } 
     } 
    ]; 

    console.log("My name is "+people[2].name+" and I am a "+people[2].height.feet+" ft "+people[2].height.inches+" "+people[2].occupation+"\n"); 

    $.each(people, function(key, person) { 
     console.log("My name is "+person.name+" and I am a "+person.height.feet+" ft "+person.height.inches+" "+person.occupation+"\n"); 
    }); 

}); 

sortie -

Mon nom est Joshua et je suis 5 pieds 11 PDG

Mon nom est James et je suis un 6 pi 1 programmeur

Mon nom est Peter et je suis un 4 pi 10 concepteur

Mon nom est Joshua et je suis 5 pieds 11 PDG

Remarque En dehors de la boucle, je dois utiliser la syntaxe du carré avec une clé numérique, car il s'agit maintenant d'un tableau d'objets numériquement indexés, et bien sûr, à l'intérieur de la boucle, la clé numérique est implicite.

Answer 4

Je sais qu'il est en retard, mais il pourrait être utile pour ceux qui veulent d'autres moyens. Une autre façon de stocker les valeurs de la clé array => est d'utiliser une méthode de tableau appelée map(); (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) vous pouvez également utiliser la fonction de flèche

    var countries = ['Canada','Us','France','Italy']; 
 
    // Arrow Function 
 
    countries.map((value, key) => key+ ' : ' + value); 
 
    // Anonomous Function 
 
    countries.map(function(value, key){ 
 
     return key + " : " + value; 
 
    });