Wie speichert man am besten ein Schlüssel=>Wert-Array in JavaScript?

Question

Wie speichert man am besten eine key=>value Array in Javascript, und wie kann man das durchschleifen?

Der Schlüssel eines jeden Elements sollte ein Tag sein, z. B. {id} oder einfach id und der Wert sollte der numerische Wert der id sein.

Es sollte entweder das Element einer bestehenden Javascript-Klasse sein, oder eine globale Variable, die leicht durch die Klasse referenziert werden kann.

jQuery kann verwendet werden.

Answer 1

Das ist genau das, was ein JavaScript-Objekt ist:

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

Sie können sie in einer Schleife durchlaufen mit for..in Schleife :

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 die Tabelle zur Browserkompatibilität dort):

• Ein Objekt hat einen Prototyp, daher gibt es Standardschlüssel in der Map. Dies konnte seit ES5 durch die Verwendung von map = Object.create(null) umgangen werden, wurde aber nur selten getan.

• Die Schlüssel eines Objekts sind Strings und Symbole, wobei es sich um beliebige Werte für eine Map handeln kann.

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

Answer 2

Wenn ich Sie 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

Answer 3

Sie können verwenden Karte .

• Eine neue Datenstruktur, die in JavaScript ES6 eingeführt wurde.
• Alternative zu JavaScript Object für die Speicherung von Schlüssel/Wert-Paaren.
• Hat nützliche Methoden für die Iteration über die Schlüssel/Wertpaare.

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 }

Wert der Karte mit Schlüssel abrufen

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

Größe der Karte ermitteln

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

Prüfen, ob der Schlüssel in der Karte vorhanden ist

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

Tasten holen

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

Werte erhalten

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

Elemente der Karte abrufen

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

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

Schlüssel-Wert-Paare drucken

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

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

Nur Schlüssel der Map drucken

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

// Output:
// name
// id

Nur Werte der Karte drucken

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

// Output:
// John
// 11

Answer 4

In Javascript wird ein Schlüssel-Wert-Array als Objekt gespeichert. Es gibt solche Dinge wie Arrays in Javascript, aber sie sind auch etwas als Objekte noch, überprüfen Sie diese Jungs Antwort - Warum kann ich benannte Eigenschaften zu einem Array hinzufügen, als wäre es ein Objekt?

Arrays werden in der Regel in eckigen Klammern dargestellt, während Objekte ("key=>value"-Arrays) in geschweiften Klammern dargestellt werden. Wie Alexey Romanov gezeigt hat, kann man jedoch auch auf Objekteigenschaften mit eckigen Klammern zugreifen und diese festlegen.

Arrays in Javascript sind in der Regel nur mit numerischen, Auto inkrementiert Tasten verwendet, sondern Javascript-Objekte können benannte Schlüssel-Wert-Paare, Funktionen und sogar andere Objekte als gut.

Einfaches Array z.B..

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

});

Ausgang -

0 "Kanada"

1 "Wir"

2 "Frankreich"

3 "Italien"

Wie wir oben gesehen haben, können wir mit der Funktion jQuery.each eine Schleife über ein numerisches Array ziehen und außerhalb der Schleife über eckige Klammern mit numerischen Schlüsseln auf Informationen zugreifen.

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

});

Ausgang -

Mein Name ist James und ich bin ein 1,80 m großer Programmierer.

Name James

Beruf Programmierer

height Object {Fuß: 6, Zoll: 1}

In einer Sprache wie php würde dies als ein mehrdimensionales Array mit Schlüssel-Wert-Paaren oder ein Array innerhalb eines Arrays betrachtet werden. Ich nehme an, weil Sie gefragt haben, wie Sie durch ein Schlüssel-Wert-Array schleifen können, dass Sie wissen möchten, wie man ein Objekt (Schlüssel=>Wert-Array) wie das Person-Objekt oben erhält, um, sagen wir, mehr als eine Person zu haben.

Nun, da wir wissen, javascript Arrays sind in der Regel für numerische Indizierung und Objekte flexibler für assoziative Indizierung verwendet werden, werden wir sie zusammen verwenden, um ein Array von Objekten, die wir durch Schleife erstellen können, wie so -

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

});

Ausgang -

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

Mein Name ist James und ich bin ein 1,80 m großer 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 der eckigen Klammern mit einem numerischen Schlüssel verwenden muss, da es sich jetzt um ein numerisch indiziertes Array von Objekten handelt, und natürlich ist der numerische Schlüssel innerhalb der Schleife impliziert.

Answer 5

Objekte innerhalb eines Arrays:

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