JavaScript-assoziative Arrays erklärt: Objekte, Anwendung und wesentliche Unterschiede

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Einführung

JavaScript ist eine der wichtigsten Programmiersprachen in der Webentwicklung. Unter seinen vielen Merkmalen sind „assoziative Arrays“ eine wichtige Struktur, die bei der effizienten Datenverwaltung und -verarbeitung hilft.

In diesem Artikel geben wir eine ausführliche Erklärung zu JavaScript‑assoziativen Arrays, von den Grundkonzepten bis hin zu fortgeschrittener Nutzung. Code‑Beispiele sind enthalten, um den Inhalt leicht verständlich zu machen – selbst für Einsteiger – und können daher als praktische Referenz verwendet werden.

2. Was ist ein assoziatives Array?

2.1 Definition eines assoziativen Arrays

Ein assoziatives Array ist eine Datenstruktur, die Daten als Paare von „Schlüsseln“ und „Werten“ verwaltet. Während normale Arrays Indexzahlen (0, 1, 2, …) verwenden, ermöglichen assoziative Arrays den Zugriff auf Daten mittels beliebiger Zeichenketten‑Schlüssel.

2.2 Assoziative Arrays in JavaScript

In JavaScript werden assoziative Arrays mittels Objekten dargestellt. Objekte werden mit geschweiften Klammern {} definiert und speichern Daten als Schlüssel‑Wert‑Paare.

Unten steht ein einfaches Beispiel für ein assoziatives Array in JavaScript.

let user = {
  name: "Sato",
  age: 25,
  email: "sato@example.com"
};

2.3 Unterschiede zwischen assoziativen Arrays und regulären Arrays

Assoziative Arrays und reguläre Arrays unterscheiden sich in den folgenden Punkten.

2.4 Anwendungsfälle

Reguläre Arrays eignen sich zur Verwaltung von listenartigen Daten, während assoziative Arrays praktisch sind, um Daten mit spezifischen Attributen zu handhaben, z. B. Benutzerinformationen oder Konfigurationseinstellungen.

3. Wie man assoziative Arrays erstellt

3.1 Deklaration mit einem Objekt‑Literal

Die gebräuchlichste Methode, ein assoziatives Array in JavaScript zu erstellen, ist die Verwendung eines Objekt‑Literals.

let product = {
  id: 101,
  name: "Laptop PC",
  price: 120000
};

3.2 Erstellung mit new Object()

Eine weitere Möglichkeit besteht darin, ein Objekt mit new Object() zu erzeugen.

let product = new Object();
product.id = 101;
product.name = "Laptop PC";
product.price = 120000;

3.3 Dynamisches Hinzufügen von Schlüsseln und Werten

Durch die Verwendung der eckigen Klammern‑Notation können Sie auch Variablen als Schlüssel nutzen.

let key = "color";
let product = {};
product[key] = "red";

4. Manipulation von assoziativen Arrays

4.1 Elemente hinzufügen

Hinzufügen mit Punkt‑Notation

let user = {};
user.name = "Tanaka";
user.age = 30;

Hinzufügen mit eckiger Klammern‑Notation

let user = {};
user["email"] = "tanaka@example.com";

4.2 Elemente abrufen

Abrufen mit Punkt‑Notation

console.log(user.name); // "Tanaka"

Abrufen mit eckiger Klammern‑Notation

console.log(user["email"]); // "tanaka@example.com"

4.3 Elemente aktualisieren

Sie können einen bestehenden Wert aktualisieren, indem Sie dem gleichen Schlüssel einen neuen Wert zuweisen.

user.age = 35;
console.log(user.age); // 35

4.4 Elemente löschen

Verwenden Sie das Schlüsselwort delete, um ein Schlüssel‑Wert‑Paar zu entfernen.

delete user.phone;
console.log(user.phone); // undefined

5. Durchlaufen von assoziativen Arrays

5.1 Iteration mit for...in‑Schleife

Die for...in‑Schleife ermöglicht das Durchlaufen der Schlüssel eines assoziativen Arrays.

let user = {
  name: "Tanaka",
  age: 30,
  email: "tanaka@example.com"
};

for (let key in user) {
  console.log(key + ": " + user[key]);
}

5.2 Verwendung von Object.keys() und forEach()

Sie können ein Array von Schlüsseln mit Object.keys() erhalten und dieses dann mit forEach() durchlaufen.

Object.keys(user).forEach(key => {
  console.log(key + ": " + user[key]);
});

5.3 Verwendung von Object.entries() und for...of

Mit Object.entries() können Sie gleichzeitig über Schlüssel und Werte iterieren.

for (let [key, value] of Object.entries(user)) {
  console.log(key + ": " + value);
}

6. Sortieren von assoziativen Arrays

6.1 Sortieren nach Schlüsseln

JavaScript‑Objekte selbst sind nicht direkt sortierbar, aber Sie können ihre Schlüssel sortieren und anschließend die Werte in sortierter Reihenfolge abrufen.

let user = {
  name: "Tanaka",
  age: 30,
  email: "tanaka@example.com"
};

let sortedKeys = Object.keys(user).sort();
sortedKeys.forEach(key => {
  console.log(key + ": " + user[key]);
});

6.2 Sortieren nach Werten

Um nach Werten zu sortieren, konvertieren Sie das Objekt in ein Array von Schlüssel‑Wert‑Paaren mithilfe von Object.entries().

let scores = {
  Alice: 85,
  Bob: 92,
  Charlie: 88
};

let sortedEntries = Object.entries(scores).sort((a, b) => a[1] - b[1]);
sortedEntries.forEach(([key, value]) => {
  console.log(key + ": " + value);
});

6.3 Wichtige Hinweise beim Sortieren

Wenn Werte als Zeichenketten gespeichert sind, erfordert die numerische Sortierung eine explizite Umwandlung.

let data = {
  a: "10",
  b: "2",
  c: "15"
};

let sorted = Object.entries(data).sort((a, b) => Number(a[1]) - Number(b[1]));
console.log(sorted);

7. Wichtige Hinweise bei der Verwendung assoziativer Arrays

7.1 Doppelte Schlüssel und Überschreiben

Wenn derselbe Schlüssel mehrmals definiert wird, überschreibt der spätere Wert den früheren.

let user = {
  name: "Tanaka",
  age: 30
};

user.name = "Sato";
console.log(user.name); // "Sato"

7.2 undefined und Überprüfung der Schlüssel­existenz

Um zu prüfen, ob ein Schlüssel in einem assoziativen Array existiert, verwenden Sie den in‑Operator oder hasOwnProperty().

let user = { name: "Tanaka" };
console.log("age" in user); // false
console.log(user.hasOwnProperty("age")); // false

7.3 Die push‑Methode kann nicht verwendet werden

Assoziative Arrays (Objekte) unterstützen die push()‑Methode nicht, die nur für reguläre Arrays verfügbar ist.

let user = {};
user.push({ name: "Tanaka" }); // TypeError: user.push is not a function

7.4 Unterschiede zu JSON‑Daten

JavaScript‑Objekte und JSON‑Daten stehen in Beziehung, sind aber nicht identisch. Objekte müssen für den Datenaustausch in JSON‑Zeichenketten konvertiert werden.

let obj = { name: "Tanaka", age: 30 };
let jsonData = JSON.stringify(obj);
console.log(jsonData); // '{"name":"Tanaka","age":30}'

let parsed = JSON.parse(jsonData);
console.log(parsed.name); // "Tanaka"

8. Zusammenfassung

8.1 Schlüsselpunkte von assoziativen Arrays

• Daten werden mittels Schlüssel‑Wert‑Paaren verwaltet.
• Flexible Operationen sind möglich, einschließlich Hinzufügen, Abrufen, Aktualisieren und Löschen von Daten.
• Assoziative Arrays unterstützen Iteration und Sortierung durch eingebaute Methoden.

8.2 Praktische Anwendungsbeispiele

Unten finden Sie ein Beispiel für die Handhabung mehrerer Benutzerobjekte mithilfe eines Arrays, das mit assoziativen Arrays kombiniert wird.

let users = [
  { id: 1, name: "Tanaka", email: "tanaka@example.com" },
  { id: 2, name: "Sato", email: "sato@example.com" }
];

users.forEach(user => {
  console.log(user.name);
});

9. FAQ – Häufig gestellte Fragen

Q1. Was ist der Unterschied zwischen assoziativen Arrays und regulären Arrays?

Reguläre Arrays verwenden numerische Indizes, während assoziative Arrays Zeichenketten‑Schlüssel zur Zugriff auf Werte nutzen.

let arr = ["apple", "orange"];
console.log(arr[1]); // "orange"

let fruits = { apple: "apple", orange: "orange" };
console.log(fruits["orange"]); // "orange"

Q2. Wie kann ich prüfen, ob ein Schlüssel existiert?

Sie können die Existenz eines Schlüssels mit dem in‑Operator prüfen.

if ("age" in user) {
  console.log(user.age);
}

10. Abschließende Zusammenfassung

JavaScript‑assoziative Arrays sind äußerst nützlich für die Verwaltung und Organisation von Daten.
In diesem Artikel haben wir alles von den Grundkonzepten bis zu fortgeschritteneren Nutzungsmustern behandelt.

Nächste Schritte:

• Führen Sie die Codebeispiele selbst aus, um Ihr Verständnis zu vertiefen.
• Versuchen Sie, assoziative Arrays mit JSON‑Daten und API‑Operationen zu integrieren.