Arrays und einfache Objekte

warn> Diese Dokumentation ist für fortgeschrittene Lernende gedacht.

Array

Wenn Variabeln wie Schubladen sind, dann sind Array die dazugehörigen Schränke.

var frucht1 = "Aprikose";
var frucht2 = "Kiwi";
var frucht3 = "Drachenfrucht"

Möchtest du einen Obstladen gründen ist die obige Darstellung ziemlich umständlich. Auch kannst du dir nicht schnell einen Überblick über all dein Obst verschaffen. Daher orden wir alle frucht-Variabeln in ein Array:

var frucht = ["Aprikose", "Kiwi", "Drachenfrucht"];

In diese eine Variable können wir (fast) beliebig viele Frücht packen. Und das beste wir können uns jede einzeln geben lassen:

frucht[1] // gibt Kiwi aus

Sicher ist dir in obigen Beispiel aufgefallen, dass Kiwi nicht das erste Element in frucht ist. Das liegt daran, dass die Informatiker ganz oft mit 0 beginnen zu zählen. Die Aprikose erhältst du also mit frucht[0].

info> Verknüpfst du dies nun mit deinem Wissen über Schleifen erhältst du ungeahnte neue Möglichkeiten.

wichtige Funktionen

Arrays bieten sehr viele Funktionen. Diese findest du etwa auf deutsch oder auf englisch sehr schön erklärt. Hier wird eine kleine Auswahl für den Unterricht vorgestellt:

Erzeugen

var frucht = ["Aprikose", "Kiwi", "Drachenfrucht"]; //Array mit 3 Elementen
var gemüse = []; //leeres Array

Zugreifen und Ändern

lieblingsfrucht = frucht[1];
frucht[0] = "Apfel";

Hinzufügen

frucht.push("Melone");

Entfernen

frucht.splice(3, 1); //entfernt das 3. Element
frucht.pop(); //entfernt die letzte Frucht

info> Die Funktion splice bietet deutlich mehr Möglichkeiten als hier gezeigt.

Anzahl der Elemente in einem Array bestimmen

frucht.length; //Beachte, dass dies hier kein () ist.

// 3

Sortieren

frucht.sort(); //["Aprikose", "Drachenfrucht", "Kiwi"]

info> Eigentlich sind Arrays ein Spezialfall von einfachen Objekten.

Über ein Array iterieren

info> Eine Iteration beschreibt das mehrfache Wiederholen einer gleichen Handlung. Hier wird jedes Element eines Arrays genau einmal aufgerufen.

for (i = 0; i < frucht.length; ++i) {
    console.log(frucht[i]);
}
// Aprikose
// Kiwi
// Drachenfrucht

for (let entry of frucht) {
    console.log(entry);
}
// Aprikose
// Kiwi
// Drachenfrucht

info> Es gibt noch mehr Möglichkeiten alle Elemente eines Arrays zu erhalten. Im folgenden sind noch einige Beispiele. Alle Varianten hat hier (englisch) ein Benutzer zusammengetragen.

frucht.forEach(function(item, index, array) {
  console.log(item, index);
});
// Aprikose 0
// Kiwi 1
// Drachenfrucht 2

frucht.forEach(function(entry) {
    console.log(entry);
});
// Aprikose
// Kiwi
// Drachenfrucht

einfache Objekte

Nicht immer möchte man alle Informationen in nummerierte Schubladen packen. Möchte man beispielsweise nicht eine Reihe ein Eissorten speichern, sondern alle Daten über eine Person, so sind benannte Schubladen praktischer. Diese Unterscheiden sich in JavaScript von Arrays:

var person = {firstName:"John", lastName:"Doe", age:17};

wichtige Funktionen

Auch hier findest du noch mehr Funktionen und Erlärungen.

Erzeugen

var person = {firstName:"John", lastName:"Doe", age:17};

Zugreifen und Ändern

lieblingsname = person.name;
lieblingsname = person["name"]; //selten verwendet
person.name = "Jane";

Hinzufügen

In der Regel solltest du ein Objekt gleich mit allen Attributen erzeugen. Sonst weißt du später u.U. nicht sicher, ob es auch das gewünsche Attribut enthält

person.school = "Otto Müller Gymnasium (OMG)";

Entfernen

delete person.school;

Prüfen, ob Attribut vorhanden ist

person.hasOwnProperty("school") //true, wenn Attribut vorhanden
if ("school" in person) ; //wahr, wenn Attribut vorhanden

Über ein einfaches Objekt iterieren

for (let key in person) {
    console.log(key + ": " + person[key]);
}
// firstName: John 
// lastName: Doe
// age: 17

einfache Objekte kopieren

Bleistifte gespitzt. In JavaScript gilt folgender Grundsatz:

info> Primitiven Datentypen werden By Value und Objekte By Reference übergeben.

Primitive Datentypen sind Zeichenketten "Bär", Zahlen 5 und Wahrheitswerte true. Zu Objekten zählen hier auch Arrays.

Schauen wir uns zuerst primitiven Datentypen an:

var a = 5;
var b = a;
a = 7
console.log(a); // 7
console.log(b); // 5

Das ist eine Übergabe der Variablen as By Value . Der Inhalt der einen Schublade a wird in die Schublade b kopiert. Anschließend kann ich mit beiden Schubladen verschiedene Aktionen durchführen.

Sehen wir uns das gleiche Verhalten für Arrays an:

var a = [0,1];
var b = a;
a[0] = 5;

console.log(a); // [5,1]
console.log(b); // [5,1]

Das ist eine Übergabe der Variable By Reference . Hier wurde entgegen der primitiven Datentypen keine neue Schublade b mit einer Kopie der alten Schublade a gefüllt, sondern es wurde an die Schublade a noch ein zweiter Aufkleber nämlich b geklebt.

So, was soll das jetzt? Bei primitiven Datentypen möchte man öfters Kopien, da man hier etwas rechnen, verknüpfen oder vergleichen möchte. Bei (einfachen) Objekten legt man oft komplexe Strukturen ab, welche selten kopiert werden sollen. Besonders wichtig ist das bei der Variablenübergabe in Funktionen.