JavaScript-Arrays
Die vorige Seite hat Fakten als Text verpackt, den man später verschicken kann. Hier bleibt die Liste im Skript, und du kannst ihre Fächer umschreiben. Drei Farbnamen liegen der Reihe nach. Du zeigst mit einer Nummer auf ein Fach, nicht mit einem Schlüssel.
Ein Regal, keine Notiz
Eckige Klammern bauen die Liste, während das Skript läuft, und jeder Wert sitzt in einem nummerierten Fach. Das ist kein JSON-Text, der auf parse wartet, und auch kein Objekt mit benannten Feldern. Der Sinn dieser Form liegt in der Reihenfolge der Fächer.
Name gegen Nummer
📊 Benanntes Objekt gegen nummeriertes Array
| Frage | Objekt | Array |
|---|---|---|
| Wie du zeigst | ein Schlüssel wie name | ein Index wie 0 |
| Erste Farbe | keine Farbliste | colors[0] |
| Wie viele | du zählst die Schlüssel | length |
| Reihenfolge | nicht der Punkt | der Punkt |
| Nach der JSON-Seite | eine Notiz über Daten | eine lebendige Liste im Skript |
Ein Objekt fragt, welchen Namen du meinst, ein Array fragt, welche Stelle du meinst. Die erste Farbe ist colors[0], ganz ohne Schlüssel. Ein Objekt in ein Fach zu legen ist eine spätere Gewohnheit, nicht diese Seite.
Klammern, keine geschweiften
Geschweifte Klammern öffnen ein Objekt, eckige öffnen ein Array. Drei Farbnamen sind drei Fächer hintereinander. Die Tasse von vorhin war ein benanntes Feld, keine Liste. Wenn du nur eine Liste willst, bleiben die eckigen Klammern.
let colors = ["red", "green", "blue"];
console.log(colors[0]);
Das erste Fach hat den Index 0
colors[0] gibt red aus. Gezählt wird ab null, nicht ab eins. Fängst du bei eins an, überspringst du Rot. Das zweite Fach ist green, das dritte blue.
let colors = ["red", "green", "blue"];
console.log(colors.length);
console.log(colors[colors.length - 1]);
length zählt die Fächer
colors.length ist 3, weil drei Namen gespeichert sind, und das letzte Fach colors[colors.length - 1] ist blue. Du ziehst eins ab, weil der erste Index null ist, nicht eins. length ist eine Eigenschaft und will keine Aufrufklammern.
let colors = ["red", "green", "blue"];
colors[1] = "gold";
console.log(colors[1]);
console.log(colors.length);
Ersetzen ändert die Anzahl nicht
colors[1] = "gold" überschreibt green. Die nächste Lesung dieses Fachs gibt gold aus. length bleibt 3. Ein vorhandenes Fach wurde ersetzt, kein neues angehängt. Anfügen und Entfernen gehören zur nächsten Lektion über Array-Methoden.
let colors = ["red", "green", "blue"];
console.log(colors[9]);
console.log(colors.length);
Ein fehlender Index ist kein neues Fach
colors[9] speichert nichts, die Lesung ist undefined, und length bleibt 3. Eine leere Stelle zu lesen macht die Liste nicht länger. Hinter das Ende zu schreiben vergrößert die Länge und lässt Lücken, und das ist nicht das Werkzeug dieser Seite.
let bag = ["red", 12, true];
console.log(bag[1]);
console.log(typeof bag[0]);
Eine Art von Wert liest sich leichter
Ein Fach darf einen Text, eine Zahl oder einen boolean halten. bag[1] gibt 12 aus, und typeof bag[0] ist string. Eine Farbliste ist klarer als ein gemischter Beutel. Die Sprache verbietet die Mischung nicht.
Die erste Farbe auf die Seite
Lies Index 0 und schreib diesen Text in den Absatz. Die beiden anderen Farben bleiben in der Liste.
<!DOCTYPE html>
<html>
<head>
<title>arrays — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let colors = ["red", "green", "blue"];
let box = document.getElementById("line");
box.textContent = colors[0];
</script>
</body>
</html>
Der Absatz zeigt red. Änder nur den ersten Text in den Klammern und lade neu, dann folgt die Zeile. Die anderen beiden Farben bleiben gespeichert und landen nicht im Absatz.
Übungsschritte
- Lege die drei Farben an und lies Index 0, danach die Länge, und erreiche die letzte Farbe mit Länge minus eins.
- Setze Index 1 auf
goldund lies dieses Fach sowie die Länge. - Lies Index 9 und prüfe, dass die Länge noch 3 ist, und sieh im gemischten Beutel die Zahl und den Typ des ersten Fachs.
- Im HTML-Beispiel änder nur die erste Farbe, lade neu und lies den Absatz.
Häufige Ausrutscher
- Ab eins zählen und die erste Farbe verpassen, und
lengthmit Klammern aufrufen, als wäre es eine Funktion - Das Array als
JSON-Text behandeln und anparsegeben - Erwarten, dass bloßes Lesen eines fehlenden Index
lengthwachsen lässt, oder dass Ersetzen ein neues Element anfügt - Auf dieser Seite schon nach Array-Methoden greifen
Kurz gefasst
- Ein Array ist eine lebendige Liste im Skript, und eckige Klammern bauen sie
- Index 0 ist das erste Element
lengthzählt Fächer und nimmt keine Aufrufklammern- Schreiben auf einen vorhandenen Index ersetzt dieses Fach, und Lesen hinter dem Ende ist
undefined, ohne dass die Länge sich ändert - Das erste Element kann eine Zeile auf der Seite füllen, und als Nächstes kommen Array-Methoden zum Anfügen und Entfernen
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt