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é.
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.
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
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.
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
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;
});
Faites ceci simplement
var key = "keyOne";
var obj = {};
obj[key] = someValue;