Arrays

Arrays helfen Ihnen, wenn Sie viele gleiche Objekte im Code haben und diese verwalten wollen. Wenn Sie zum Beispiel eine Liste mit Lieblingstieren haben wollen, könnten Sie das so schreiben:

// Negativ-Beispiel, so bitte ab heute nicht mehr :-D
let animal1 = "🐹";
let animal2 = "🐶";
let animal3 = "🐰";
let animal4 = "🐱";
let animal5 = "🐵";
let animal6 = "🦁";

Aber was würden Sie machen, wenn Sie auf einmal den 🐻 auf Platz 3 einfügen möchten? Sie müssten alle Variablen umbenennen - das wäre ziemlich umständlich. Stattdessen kann man ein Array, eine Liste, dafür benutzen. Dann sieht der gleiche Code so aus:

let animals = ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁"];

Viel übersichtlicher, oder? Aber wie bekomme ich jetzt nur den 3. Platz?

Der Index

let animals = ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁"];
console.log(animals[2]);
// Der 🐰 wird in der Konsole stehen.
// Ja, der 🐰

Aber warum 2? Es ist doch an der 3. Stelle?
Warum wird bei 2 der 🐰 ausgegeben und nicht der 🐶?

Das ist richtig, aber Computer fangen gerne bei 0 an zu zählen. Das heißt: 0 ist das erste Element, 1 ist das Zweite und so weiter. Das braucht etwas Gewöhnung, hat aber tatsächlich Vorteile wenn man später mit den Stellen im Array rechnen möchte.

Auf die Stellen in einem Array greift man über Indizes zu. Jedes Element hat also einen eigenen Index in der Liste.
Sie können sich das so vorstellen wie in dieser Tabelle:

Ein kleiner Tipp: Es ist meistens Sinnvoll, nur gleichartige Sachen in ein Array zu packen. Man darf das zwar mischen, aber oft macht man sich damit mehr Probleme, als man löst.

✅ Gutes Beispiel:
let names = ["Anna", "Leonie", "Hannah", "Jan", "Lukas", "Tim"];

✅ Gutes Beispiel:
let gridSizeOptions = [10, 50, 150, 250, 420];

❌ Schlechtes Beispiel:
let kram = ["Anna", "Müller", 22, "weiblich"];

Für das Zweite gibt es sinnvollere Möglichkeiten, zu denen wir später kommen.

Was ein Array alles kann

Länge/Anzahl

Ein Array weitere nützliche Dinge mit! Es kennt zum Beispiel seine eigene Länge, also die Anzahl der Elemente im Array:

let animals = ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁"];
console.log(animals.length);
// gibt 6 aus.

Suchen

Sie können auch in Ihrem Array suchen. Die indexOf(...)-Funktion sagt Ihnen, wo etwas in dem Array steht - es gibt ihnen den Index, also die Position, eines Elements zurück:

let animals = ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁"];
console.log(animals.indexOf("🐵"));
// gibt 4 aus (5. Element ist Index 4!)

In dem Fall würden Sie den Index des 🐵 in dem Array animals zurückbekommen, also 4. Wenn Sie etwas abfragen, das gar nicht drin ist, gibt es einen Sonderfall: hier wird dann als Erkennungswert -1 ausgegeben - einen Index den es normalerweise nicht geben kann.

let animals = ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁"];
console.log(animals.indexOf("🐖"));
// gibt -1 aus weil das 🐖 gar nicht im Array drin ist.

Es ist total sinnvoll, diese Beispiele hier mal in Ihren eigenen Code-Editor zu übernehmen, und damit herum zu spielen. Stellen Sie sich einfach vor, das wäre eine Aufgabe. Hinweise, was Sie ausprobieren können, finden Sie über den ganzen Artikel verstreut.

Arrays umwandeln

Wenn Sie alle Tiere im Array hintereinander ausgeben wollen, aber ohne , und die eckigen Klammern, können Sie .join(...) verwenden.

let animals = ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁"];
console.log(animals.join());
// gibt "🐹🐶🐰🐱🐵🦁" aus

Dabei werden alle Elemente eines Arrays in einen String zusammengefügt. .join(...) nimmt optional auch einen Parameter. Wenn dort etwas mitgegeben wird, wird das als Kleber verwendet. Im nächsten Beispiel kleben wir Elemente mit einem Baum zusammen. Probieren Sie mal aus, was das sonst noch so kann. Als Kleber funktionieren auch längere Strings.

let animals = ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁"];
console.log(animals.join("🌳"));
// gibt "🐹🌳🐶🌳🐰🌳🐱🌳🐵🌳🦁" aus

Elemente einfügen und löschen

Wenn Sie ein Element am Ende des Arrays anfügen wollen, können Sie das mit .push(...) machen.

let animals = ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁"];
animals.push("🐻");
// animals sieht nun so aus: ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁", "🐻"]

Und wenn Sie das letzte Element im Array wieder entfernen wollen, können Sie das mit dem Befehl .pop() tun. Der Befehl gibt dir das Element was er entfernt hat auch zurück.

let animals = ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁"];
animals.pop();
// animals sieht nun so aus: ["🐹", "🐶", "🐰", "🐱", "🐵"];

Die Ähnlichkeit zu dem bereits bekannten push()- und pop()-Funktionen, die P5.JS bei Transformationen verwendet, ist kein Zufall. Bitte bringen Sie die beiden Sachen dennoch nicht durcheinander.

Die Begriffe sind in der Informatik oft in Gebrauch, wenn man sich eine Liste von Dingen oder einen Stapel von Kram vorstellt. In P5.JS legen wir Zeichen- und Transformationsanweisungen auf so einen Stapel drauf, die wir zusammenhängend wieder vom Stapel runter nehmen wollen.

Und wenn Sie das gleiche nicht am Ende, sondern am Anfang eines Arrays machen möchten, können Sie .unshift(...) und .shift() verwenden.

let animals = ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁"];
animals.unshift("🐻");
console.log(animals);

animals.shift();
console.log(animals);

Um Elemente innerhalb des Arrays hinzuzufügen oder zu löschen gibt es die Funktion .splice(...). Als erstes geben Sie den Index an, an dem der Befehl beginnen soll, dann die Anzahl von Elementen die Sie dort löschen möchten (das können auch 0 Elemente sein!) und dann können Sie neue Elemente, die Sie hinzufügen wollen, auflisten (auch hier: das darf auch “keins” sein).

let animals = ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁"];
animals.splice(2, 0, "🐻");
console.log(animals);

animals.splice(2, 1);
console.log(animals);

Wenn Sie ein einzelnes Element ersetzen möchten, dann können Sie auch die Index-Schreibweise benutzen: Die sieht fast genauso aus, wie die Schreibweise bei Variablen! Um zum Beispiel den 🐰 durch den 🐻 zu ersetzen können Sie folgendes schreiben:

let animals = ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁"];
animals[2] = "🐻";
console.log(animals);

Arrays 💞 Schleifen

Wenn Sie Arrays, also Listen, benutzen, macht es häufig Sinn diese zusammen mit Schleifen zu benutzen. Damit können Sie Arrays ganz unabhängig von ihrer Länge super verarbeiten. Und weil das beim Programmieren häufig vorkommt, gibt es sogar auf Arrays spezialisierte Schreibweisen für Schleifen in JavaScript.

Zum Beispiel können Sie den Index von jedem Element ausgeben lassen, unabhängig davon wie viele Elemente du in deinem Array hast.

let animals = ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁"];

//              /--- achten Sie auf das "in"
for (let index in animals) {
  console.log(animals[index] + " ist auf index: " + index);
}

Wie Sie sehen, ist es etwas einfacher zu lesen und weniger zu schreiben. Sie können die Variable index natürlich auch anders benennen.

Alternativ können Sie sich jedes Element in einem Array ausgeben lassen, ohne dass der Index benutzt wird:

let animals = ["🐹", "🐶", "🐰", "🐱", "🐵", "🦁"];

//               /--- achten Sie auf das "of"
for (let animal of animals) {
  console.log(animal);
}

Ihnen ist auch vielleicht aufgefallen, dass der Variablenname vom Array plural ist (animals), während das einzelne Element singular ist (animal). Mit so einer Schreibweise können Sie und andere Programmierer*innen auf den ersten Blick unterscheiden ob du es sich um eine Liste oder ein einzelnes Element handelt.

Das Video zu Arrays ist etwas umfangreicher, dafür gibt es ab 35:20 einen Live-Coding Teil in voller Länge, der alle Konzepte noch mal am Stück wiederholt. Wenn Sie möchten, können Sie gerne mit den Übungen im Video etwas rumspielen. Viel Spaß beim schauen und coden 😊.
Aufgabe

Aufgabe

Für alle Aufgaben gilt: Sie können sich ein eigenes Array definieren, oder unser Emoji-Beispiel-Array mit den Tieren verwenden.

Drehen Sie die Reihenfolge von einem Array um und benutzem Sie dafür keine fertige Funktion (also nicht .reverse()). Lösen Sie es zum Beispiel mit einer Schleife.

Speichern Sie den Code unter array-reverse.js.

Aufgabe

Sortieren Sie die Reihenfolge in einem Array zufällig. Benutzen nicht die p5js random() Funktion, sondern versuchen Sie, es mit der Math.random()-Funktion, die JavaScript selbst mitbringt. (Siehe auch der Text zu Zufall )

Lösungs-Hinweis

Für ein zufälliges Element aus einem Array kann man Math.floor(...), meinTollesArray.length und Math.random() kombinieren!

Speichern Sie den Code in array-random.js.

Aufgabe

Erweitern Sie advent.js so, dass sich die Türchen öffnen lassen. geöffnete Türchen sollen in einem Array gespeichert werden. Hinter jedem Türchen soll ein anderer Spruch versteckt sein, der ausgegeben wird wenn man draufklickt. Benutzen Sie auch dafür ein weiteres Array.

Ändern Sie den Code direkt in advent.js.