Il modo migliore per memorizzare un array key => value in JavaScript?

Qual è il modo migliore per archiviare un key=>valuearray in javascript e come può essere ripetuto?

La chiave di ogni elemento dovrebbe essere un tag, come {id}o just ide il valore dovrebbe essere il valore numerico dell'id.

Dovrebbe essere l'elemento di una classe javascript esistente o essere una variabile globale a cui si può facilmente fare riferimento tramite la classe.

jQuery può essere utilizzato.

Questo è esattamente ciò che è un oggetto JavaScript:

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

Puoi scorrere attraverso di esso usando for..inloop :

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

Vedi anche: Utilizzo degli oggetti (MDN).

In ECMAScript6 c'è anche Map(vedi la tabella di compatibilità del browser lì):

• Un oggetto ha un prototipo, quindi ci sono chiavi predefinite nella mappa. Questo potrebbe essere aggirato usando map = Object.create (null) da ES5, ma raramente è stato fatto.

• Le chiavi di un oggetto sono stringhe e simboli, dove possono essere qualsiasi valore per una mappa.

• Puoi ottenere facilmente le dimensioni di una mappa mentre devi tenere traccia manualmente delle dimensioni di un oggetto.

Se ti capissi correttamente:

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

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

Puoi usare la mappa .

• Una nuova struttura di dati introdotta in JavaScript ES6.
• Alternativa all'oggetto JavaScript per la memorizzazione di coppie chiave / valore.
• Dispone di metodi utili per l'iterazione sulle coppie chiave / valore.

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 }

Ottieni valore della mappa usando la chiave

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

Ottieni dimensioni della mappa

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

La chiave di controllo esiste in Mappa

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

Ottieni le chiavi

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

Ottieni valori

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

Ottieni elementi della mappa

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

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

Stampa coppie di valori chiave

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

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

Stampa solo le chiavi della mappa

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

// Output:
// name
// id

Stampa solo i valori della mappa

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

// Output:
// John
// 11

In javascript un array di valori chiave viene archiviato come oggetto. Ci sono cose come array in javascript, ma sono anche considerati in qualche modo oggetti ancora, controlla questa risposta di ragazzi - Perché posso aggiungere proprietà nominate a un array come se fosse un oggetto?

Le matrici sono in genere viste usando la sintassi della parentesi quadra e gli oggetti (matrici "chiave => valore") usando la sintassi della parentesi graffa, sebbene sia possibile accedere e impostare le proprietà dell'oggetto usando la sintassi della parentesi quadra come ha mostrato Alexey Romanov.

Le matrici in javascript sono in genere utilizzate solo con chiavi numeriche, auto-incrementate, ma gli oggetti javascript possono contenere coppie di valori chiave, funzioni e persino altri oggetti.

Array semplice ad es.

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

});

Produzione -

0 "Canada"

1 "noi"

2 "Francia"

3 "Italia"

Vediamo sopra che possiamo eseguire il loop di un array numerico usando la funzione jQuery.each e accedere alle informazioni al di fuori del loop usando parentesi quadre con tasti numerici.

Oggetto semplice (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);
    });

});

Produzione -

Mi chiamo James e sono un programmatore di 6 ft 1

nome James

programmatore di occupazione

altezza Oggetto {piedi: 6, pollici: 1}

In un linguaggio come php questo sarebbe considerato un array multidimensionale con coppie chiave-valore o un array all'interno di un array. Sto assumendo perché hai chiesto come eseguire il loop in un array di valori chiave che vorresti sapere come ottenere un oggetto (key => array di valori) come l'oggetto persona sopra per avere, diciamo, più di una persona.

Bene, ora che sappiamo che gli array javascript sono usati tipicamente per l'indicizzazione numerica e gli oggetti in modo più flessibile per l'indicizzazione associativa, li useremo insieme per creare una matrice di oggetti che possiamo scorrere, in questo modo -

Matrice JSON (matrice di oggetti) -

$(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");
    });

});

Produzione -

Mi chiamo Joshua e sono un CEO di 5 ft 11

Mi chiamo James e sono un programmatore di 6 ft 1

Mi chiamo Peter e sono un designer di 4 ft 10

Mi chiamo Joshua e sono un CEO di 5 ft 11

Nota che al di fuori del ciclo devo usare la sintassi della parentesi quadra con un tasto numerico perché ora è un array di oggetti indicizzato numericamente e, naturalmente, all'interno del ciclo è implicito il tasto numerico.

Oggetti all'interno di un array:

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

Fallo e basta

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

So che è tardi ma potrebbe essere utile per coloro che vogliono altri modi. Un altro modo in cui i valori dell'array key => possono essere memorizzati è usando un metodo array chiamato map (); ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map ) puoi usare anche la funzione freccia

 
    var countries = ['Canada','Us','France','Italy'];  

    // Arrow Function  

    countries.map((value, key) => key+ ' : ' + value );  

    // Anonomous Function  

    countries.map(function(value, key){  

         return key + " : " + value;  

    });  

    

Oggi abbiamo rilasciato il nostro nuovo pacchetto chiamato laravel-blade-javascript. Fornisce una direttiva Blade JavaScript per esportare le variabili PHP in JavaScript. Quindi sostanzialmente fa lo stesso del popolare pacchetto PHP-Vars-To-Js-Transformer di Jeffrey Way, ma invece di esportare variabili nel controller il nostro pacchetto fa una vista.

Ecco un esempio di come può essere utilizzato:

@javascript('key', 'value')

La vista renderizzata genererà:

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

Quindi nel tuo browser ora hai accesso a una variabile chiave:

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

Puoi anche usare un singolo argomento:

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

Che produrrà lo stesso del primo esempio.

È inoltre possibile utilizzare il file di configurazione per impostare uno spazio dei nomi in cui devono risiedere tutte le variabili JavaScript esportate.