Beste Möglichkeit, ein Schlüssel => Wertearray in JavaScript zu speichern?

Was ist der beste Weg, um ein key=>valueArray in Javascript zu speichern , und wie kann das durchlaufen werden?

Der Schlüssel jedes Elements sollte ein Tag sein, wie z. B. {id}oder nur, idund der Wert sollte der numerische Wert der ID sein.

Es sollte entweder das Element einer vorhandenen Javascript-Klasse sein oder eine globale Variable, auf die über die Klasse leicht verwiesen werden kann.

jQuery kann verwendet werden.

Genau das ist ein JavaScript-Objekt:

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

Sie können es mit for..inloop durchlaufen :

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

Siehe auch: Arbeiten mit Objekten (MDN).

In ECMAScript6 gibt es auch Map(siehe dort die Browserkompatibilitätstabelle):

• Ein Objekt hat einen Prototyp, daher gibt es Standardschlüssel in der Karte. Dies konnte mit map = Object.create (null) seit ES5 umgangen werden, wurde jedoch selten durchgeführt.

• Die Schlüssel eines Objekts sind Zeichenfolgen und Symbole, wobei sie einen beliebigen Wert für eine Karte haben können.

• Sie können die Größe einer Karte leicht ermitteln, während Sie die Größe eines Objekts manuell verfolgen müssen.

Wenn ich dich richtig verstanden habe:

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

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

Sie können Map verwenden .

• Eine neue Datenstruktur, die in JavaScript ES6 eingeführt wurde.
• Alternative zum JavaScript-Objekt zum Speichern von Schlüssel / Wert-Paaren.
• Verfügt über nützliche Methoden zur Iteration über die Schlüssel / Wert-Paare.

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 }

Holen Sie sich den Wert der Karte mit dem Schlüssel

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

Holen Sie sich die Größe der Karte

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

Der Prüfschlüssel ist in der Karte vorhanden

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

Schlüssel holen

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

Werte abrufen

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

Holen Sie sich Elemente der Karte

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

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

Schlüsselwertpaare drucken

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

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

Drucken Sie nur die Schlüssel der Karte

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

// Output:
// name
// id

Drucken Sie nur Werte der Karte

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

// Output:
// John
// 11

In Javascript wird ein Schlüsselwertarray als Objekt gespeichert. Es gibt solche Dinge wie Arrays in Javascript, aber sie werden auch immer noch als Objekte betrachtet. Überprüfen Sie die Antwort dieser Typen. Warum kann ich einem Array benannte Eigenschaften hinzufügen, als wäre es ein Objekt?

Arrays werden normalerweise mit eckiger Klammer-Syntax und Objekte ("key => value" -Arrays) mit geschweifter Klammer-Syntax angezeigt. Sie können jedoch Objekteigenschaften mit eckiger Klammer-Syntax aufrufen und festlegen, wie Alexey Romanov gezeigt hat.

Arrays in Javascript werden normalerweise nur mit numerischen, automatisch inkrementierten Schlüsseln verwendet, aber Javascript-Objekte können auch benannte Schlüsselwertpaare, Funktionen und sogar andere Objekte enthalten.

Einfaches Array z.

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

});

Ausgabe -

0 "Kanada"

1 "Wir"

2 "Frankreich"

3 "Italien"

Wir sehen oben, dass wir ein numerisches Array mit der Funktion jQuery.each schleifen und mit eckigen Klammern mit numerischen Tasten auf Informationen außerhalb der Schleife zugreifen können.

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

});

Ausgabe -

Mein Name ist James und ich bin ein 6 ft 1 Programmierer

Name James

Berufsprogrammierer

Höhe Objekt {Fuß: 6, Zoll: 1}

In einer Sprache wie PHP würde dies als mehrdimensionales Array mit Schlüsselwertpaaren oder als Array innerhalb eines Arrays betrachtet. Ich gehe davon aus, dass Sie, weil Sie gefragt haben, wie Sie ein Schlüsselwertarray durchlaufen sollen, wissen möchten, wie Sie ein Objekt (Schlüssel => Wertearray) wie das obige Personenobjekt erhalten, um beispielsweise mehr als eine Person zu haben.

Nun, da wir wissen, dass Javascript-Arrays normalerweise für die numerische Indizierung und Objekte flexibler für die assoziative Indizierung verwendet werden, werden wir sie zusammen verwenden, um ein Array von Objekten zu erstellen, die wir wie folgt durchlaufen können:

JSON-Array (Array von Objekten) -

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

});

Ausgabe -

Mein Name ist Joshua und ich bin ein 5 ft 11 CEO

Mein Name ist James und ich bin ein 6 ft 1 Programmierer

Mein Name ist Peter und ich bin ein 4 ft 10 Designer

Mein Name ist Joshua und ich bin ein 5 ft 11 CEO

Beachten Sie, dass ich außerhalb der Schleife die Syntax in eckigen Klammern mit einem numerischen Schlüssel verwenden muss, da dies jetzt ein numerisch indiziertes Array von Objekten ist und natürlich innerhalb der Schleife der numerische Schlüssel impliziert ist.

Objekte innerhalb eines Arrays:

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

Mach das einfach

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

Ich weiß, dass es spät ist, aber es könnte für diejenigen hilfreich sein, die andere Wege wollen. Eine andere Möglichkeit, Array-Schlüssel => -Werte zu speichern, ist die Verwendung einer Array-Methode namens map (). ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map ) Sie können auch die Pfeilfunktion verwenden

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

    // Arrow Function  

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

    // Anonomous Function  

    countries.map(function(value, key){  

         return key + " : " + value;  

    });  

    

Heute haben wir unser neues Paket namens Laravel-Blade-Javascript veröffentlicht. Es bietet Ihnen eine Javascript-Blade-Direktive zum Exportieren von PHP-Variablen nach JavaScript. Es funktioniert also im Grunde genauso wie das beliebte PHP-Vars-To-Js-Transformer-Paket von Jeffrey Way, aber anstatt Variablen in den Controller zu exportieren, macht unser Paket eine Ansicht.

Hier ist ein Beispiel, wie es verwendet werden kann:

@javascript('key', 'value')

Die gerenderte Ansicht gibt Folgendes aus:

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

In Ihrem Browser haben Sie jetzt Zugriff auf eine Schlüsselvariable:

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

Sie können auch ein einzelnes Argument verwenden:

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

Welches wird das gleiche wie im ersten Beispiel ausgeben.

Sie können die Konfigurationsdatei auch verwenden, um einen Namespace einzurichten, in dem sich alle exportierten JavaScript-Variablen befinden sollen.