Quelle est la meilleure façon de stocker un tableau de "clés" et de "valeurs" 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.
Ce devrait être soit l'élément d'une classe javascript existante, soit une variable globale qui pourrait facilement être référencée par la classe.
Il est possible d'utiliser jQuery.
C'est exactement 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
][1] (voir le tableau de compatibilité avec les navigateurs) :
- Un objet a un prototype, il y a donc des clés par défaut dans la carte. Cela pouvait être contourné en utilisant map = Object.create(null) depuis ES5, mais cela a rarement été fait.
Les clés d'un Object sont des chaînes de caractères et des symboles, où ils peuvent être n'importe quelle valeur pour une carte.
Vous pouvez facilement obtenir la taille d'une carte alors que vous devez garder manuellement la trace de la taille d'un objet.
[1] : https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Map
En javascript, un tableau clé-valeur est stocké comme un objet. Il existe des choses comme les tableaux en javascript, mais ils sont aussi considérés comme des objets. Consultez la réponse de ce type - https://stackoverflow.com/questions/874205/what-is-the-difference-between-an-array-and-an-object#answer-874237
Les tableaux sont typiquement vus en utilisant la syntaxe des crochets, et les objets (tableaux "key=>value" ;) en utilisant la syntaxe des crochets, bien que vous puissiez accéder et définir les propriétés des objets en utilisant la syntaxe des crochets comme Alexey Romanov l'a montré.
Les tableaux en javascript sont généralement utilisés uniquement avec des clés numériques, auto incrémentées, mais les objets javascript peuvent contenir des paires clé-valeur 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 "Us" ;
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 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 -
Je m'appelle James et je suis un programmeur d'1m80.
nom James
profession : programmeur
taille 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, puisque vous avez demandé comment boucler un tableau de clés et de valeurs, vous voulez savoir comment obtenir un objet (tableau de clés et de valeurs) comme l'objet personne ci-dessus pour avoir, disons, plus d'une personne.
Bien, maintenant que nous savons que les tableaux de javascript sont utilisés typiquement pour l'indexation numérique et que les objets sont utilisés de manière plus flexible 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 (réseau 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 -
Je m'appelle Joshua et je suis un PDG de 5 ft 11
Je m'appelle James et je suis un programmeur d'1,80 m.
Je m'appelle Peter et je suis un designer d'1m80
Je m'appelle Joshua et je suis un PDG de 5 ft 11
Notez qu'en dehors de la boucle, je dois utiliser la syntaxe des crochets avec une clé numérique parce qu'il s'agit maintenant d'un tableau d'objets à indexation numérique, et bien sûr, à l'intérieur de la boucle, la clé numérique est implicite.