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

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

La clé de chaque élément doit être une balise, telle que {id}ou juste idet 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 qui pourrait facilement être référencée via la classe.

jQuery peut être utilisé.

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 boucle à l'aide de for..inloop :

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

Voir aussi: Travailler avec des objets (MDN).

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

• 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 était rarement 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 une trace manuelle 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

Vous pouvez utiliser la carte .

• Une nouvelle structure de données introduite dans JavaScript ES6.
• Alternative à l'objet JavaScript pour stocker des paires clé / valeur.
• A 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 }

Obtenez la valeur de la carte à l'aide de la clé

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

Obtenez 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

Obtenez les clés

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

Obtenir des valeurs

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

Obtenez des éléments de la carte

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

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

Imprimer les paires de valeurs clés

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

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

Les tableaux sont généralement vus en utilisant la syntaxe entre crochets, et les objets (tableaux "key => value") en utilisant la syntaxe entre crochets, bien que vous puissiez accéder et définir les propriétés des objets en utilisant la syntaxe entre crochets comme l'a montré Alexey Romanov.

Les tableaux en javascript sont généralement utilisés uniquement avec des clés numériques incrémentées automatiquement, mais les objets javascript peuvent également contenir des paires de valeurs de clés 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);
    });

});

Production -

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);
    });

});

Production -

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

nom James

programmeur d'occupation

Objet de hauteur {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 parcourir un tableau de valeurs clés, vous voudriez savoir comment obtenir un objet (clé => tableau de valeurs) comme l'objet personne ci-dessus pour avoir, disons, plus d'une personne.

Eh bien, maintenant que nous savons que les tableaux javascript sont généralement utilisés pour l'indexation numérique et les objets de manière plus flexible pour l'indexation associative, nous les utiliserons ensemble pour créer un tableau d'objets que nous pouvons parcourir, 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");
    });

});

Production -

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

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

Mon nom est Peter et je suis un designer de 4 pieds 10

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

Notez qu'en dehors de la boucle, je dois utiliser la syntaxe entre crochets avec une clé numérique car il s'agit désormais d'un tableau d'objets indexés numériquement, et bien sûr à l'intérieur de la boucle, la clé numérique est implicite.

Objets à l'intérieur d'un tableau:

var cars = [
        { "id": 1, brand: "Ferrari" }
        , { "id": 2, brand: "Lotus" }
        , { "id": 3, brand: "Lamborghini" }
    ];

Faites simplement ceci

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

Je sais que c'est tard, mais cela pourrait être utile pour ceux qui veulent d'autres moyens. Une autre façon de stocker les valeurs de 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 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;  

    });  

    

Aujourd'hui, nous avons publié notre nouveau package appelé laravel-blade-javascript. Il vous fournit une directive javascript Blade pour exporter des variables PHP vers JavaScript. Donc, il fait essentiellement la même chose que le populaire package PHP-Vars-To-Js-Transformer de Jeffrey Way, mais au lieu d'exporter des variables dans le contrôleur, notre package fait une vue.

Voici un exemple de la façon dont il peut être utilisé:

@javascript('key', 'value')

La vue rendue affichera:

<script type="text/javascript">window['key'] = 'value';</script>

Ainsi, dans votre navigateur, vous avez désormais accès à une variable clé:

console.log(key); //outputs "value"

Vous pouvez également utiliser un seul argument:

@javascript(['key' => 'value'])

Qui produira la même chose que le premier exemple.

Vous pouvez également utiliser le fichier de configuration pour configurer un espace de noms dans lequel toutes les variables JavaScript exportées doivent résider.