web-dev-qa-db-fra.com

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

Quel est le meilleur moyen de stocker un tableau key=>value en javascript, et comment peut-on le parcourir en boucle?

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

Il doit s'agir soit de l'élément d'une classe javascript existante, soit d'une variable globale pouvant être facilement référencée via la classe.

jQuery peut être utilisé.

179
Click Upvote

C'est ce qu'est un objet JavaScript:

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

Vous pouvez le parcourir en utilisant for..in loop :

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

Voir aussi: Travailler avec des objets (MDN).

Dans ECMAScript6, il existe également Map (voir le tableau de compatibilité de navigateur ci-dessous):

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

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

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

329
Alexey Romanov

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
88
Blixt

En javascript, un tableau de valeurs de clé est stocké en tant qu'objet. Il existe des éléments tels que des tableaux en javascript, mais ils sont également considérés comme des objets, cochez cette réponse - Pourquoi puis-je ajouter des propriétés nommées à un tableau comme s'il s'agissait d'un objet?

Les tableaux utilisent généralement la syntaxe entre crochets et les objets (tableaux "key => value") à l'aide de la syntaxe entre crochets. Vous pouvez toutefois accéder aux propriétés de l'objet et les définir à l'aide de la syntaxe décrite par Alexey Romanov.

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

Tableau simple par exemple.

$(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 "nous"

2 "France"

3 "Italie"

Nous voyons ci-dessus que nous pouvons boucler un tableau numérique en utilisant la fonction jQuery.each et accéder aux informations en dehors de la boucle en utilisant des crochets avec des touches 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 programmeur de 6 pieds 1

nommer James

programmeur d'occupation

hauteur Objet {pieds: 6, pouces: 1}

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

Maintenant que nous savons que les tableaux javascript sont généralement utilisés pour l'indexation numérique et que les objets sont plus flexibles pour l'indexation associative, nous allons les utiliser ensemble pour créer un tableau d'objets que nous pouvons parcourir en boucle, comme ceci -

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 un PDG de 5 pieds 11 pouces

Mon nom est James et je suis un programmeur de 6 pieds 1

Je m'appelle Peter et je suis un designer de 4 ft 10

Mon nom est Joshua et je suis un PDG de 5 pieds 11 pouces

Notez qu'en dehors de la boucle, je dois utiliser la syntaxe entre crochets avec une clé numérique, car il s'agit maintenant d'un tableau d'objets indexé numériquement, et bien entendu, la clé numérique est implicite dans la boucle.

9
kiko carisse

Vous pouvez utiliser Map .

  • Une nouvelle structure de données introduite dans JavaScript ES6.
  • Alternative à JavaScript Object pour stocker des paires clé/valeur.
  • Possède des méthodes utiles pour l'itération sur les paires clé/valeur.
var map = new Map();
map.set('name', 'John');
map.set('id', 11);

// Get the full content of the Map
console.log(map); // Map { 'name' => 'John', 'id' => 11 }

Obtenir la valeur de la carte en utilisant la clé

console.log(map.get('name')); // John 
console.log(map.get('id')); // 11

Obtenir la taille de la carte

console.log(map.size); // 2

La clé de contrôle existe dans la carte

console.log(map.has('name')); // true
console.log(map.has('age')); // false

Obtenir des clés

console.log(map.keys()); // MapIterator { 'name', 'id' }

Obtenir des valeurs

console.log(map.values()); // MapIterator { 'John', 11 }

Obtenir des éléments de la carte

for (let element of map) {
  console.log(element);
}

// Output:
// [ 'name', 'John' ]
// [ 'id', 11 ]

Imprimer les paires de valeurs de clé

for (let [key, value] of map) {
  console.log(key + " - " + value);
}

// Output: 
// name - John
// id - 11

Imprimer uniquement les clés de la carte

for (let key of map.keys()) {
  console.log(key);
}

// Output:
// name
// id

Imprimer uniquement les valeurs de la carte

for (let value of map.values()) {
  console.log(value);
}

// Output:
// John
// 11
7
Mukesh Chapagain

Je sais que c'est tard, mais cela pourrait être utile pour ceux qui veulent d'autres moyens. Une autre façon de stocker une clé de tableau => consiste à 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;
});

0
krialex21

Faites ceci simplement 

var key = "keyOne";
var obj = {};
obj[key] = someValue;
0
Faizan Qureshi