Zum Inhalt
wannacode

Arrays

Kurz gesagt: Ein Array ist eine Reihe von Werten unter einem Namen. Jedes Element hat eine Nummer, seinen Index ab 0, und das Array wächst mit push.

Problem

Dreißig Noten

Eine Lehrerin schreibt ein Programm für die Punkte aus der Klassenarbeit. Für fünf Schüler legt sie fünf Variablen an:

const score1 = 62;
const score2 = 85;
const score3 = 47;
const score4 = 91;
const score5 = 78;
const sum = score1 + score2 + score3 + score4 + score5;
console.log(sum);
Ausgabe
363

In der Klasse sind aber dreißig. Dreißig Variablen, dreißig Summanden. Und für die höchste Punktzahl braucht es noch neunundzwanzig Vergleiche. Die Schleife aus der letzten Lektion hilft nicht: Sie kann nicht durch score1, score2, score3 gehen, denn das sind getrennte Namen. Wir brauchen viele Werte unter einem Namen.

Die Idee

Ein Array: eine Reihe von Kästchen

Ein Array ist eine Reihe von Werten unter einem Namen. Jeder Wert, ein Element des Arrays, hat eine Nummer: seinen Index. Die Indizes beginnen bei 0.

const scores = [62, 85, 47, 91, 78];
console.log(scores[0]);
console.log(scores[4]);
console.log(scores.length);
scores[2] = 50;
console.log(scores[2]);
Ausgabe
62
78
5
50
  • Die Werte stehen in eckigen Klammern [ ], getrennt durch Kommas. Einen Typ schreibst du nicht. Du kannst Zahlen und Text in einem Array mischen, aber meistens sind alle Elemente von einer Art.
  • scores[0] ist das erste Element, scores[4] das fünfte. Der letzte Index ist immer um 1 kleiner als die Anzahl.
  • scores.length ist die Anzahl der Elemente. Hier ist sie 5.
  • scores[2] = 50; ändert ein Element. Die anderen bleiben gleich.

Wenn du die Werte noch nicht kennst, aber weißt, wie viele es sind, legst du ein Array mit einer Größe an und füllst es mit Nullen:

const booked = new Array(3).fill(0);
booked[1] = 2;
console.log(booked);
Ausgabe
[ 0, 2, 0 ]

Anders als Arrays in Java und C# wächst ein Array. push fügt ein Element am Ende hinzu:

const scores = [62, 85];
scores.push(47);
console.log(scores);
console.log(scores.length);
Ausgabe
[ 62, 85, 47 ]
3

console.log mit einem ganzen Array zeigt seine Elemente in [ ]. Das ist praktisch zum Prüfen. Für die Ausgabe des Programms gibst du die Elemente aber meistens selbst aus.

Genauer, für Neugierige
  • new Array(3) ohne .fill(0) enthält keine Nullen, sondern drei leere Plätze. Liest du einen davon, bekommst du undefined, „kein Wert“:
const booked = new Array(3);
console.log(booked);
console.log(booked[0]);
Ausgabe
[ <3 empty items> ]
undefined
  • const vor dem Array bedeutet, dass der Name immer auf dasselbe Array zeigt. Seine Elemente kannst du trotzdem ändern und neue hinzufügen.

Probier es aus

Welches ist welches?

Was gibt das Programm aus?

const prices = [12, 7, 30, 5];
console.log(prices[1] + prices[3]);
Antwort

Die Idee

Eine Schleife durch das Array

Jetzt hilft die Schleife. Der Zähler i wird zum Index: Er geht von 0 bis zum letzten und nimmt in jeder Runde scores[i].

const scores = [62, 85, 47, 91, 78];
let sum = 0;
for (let i = 0; i < scores.length; i++) {
  sum += scores[i];
}
console.log(`Summe: ${sum}`);
console.log(`Durchschnitt: ${sum / scores.length}`);
Ausgabe
Summe: 363
Durchschnitt: 72.6

Die Bedingung ist i < scores.length und keine feste Zahl. Wenn du alle dreißig Noten in [ ] einträgst, ändert sich die Schleife nicht. Das nennt man das Array durchlaufen.

In JavaScript teilt / genau, deshalb kommt der Durchschnitt ohne Zusatz als 72,6 heraus.

Sieh es dir an

Die höchste Punktzahl

Wie findest du die größte Zahl? Du merkst dir die bisher größte und ersetzt sie, sobald du eine größere siehst.

const scores = [62, 85, 47, 91, 78];
let max = scores[0];
for (let i = 1; i < scores.length; i++) {
  if (scores[i] > max) {
    max = scores[i];
  }
}
console.log(max);  // 91
Schritt für Schritt, in Worten
  1. Fünf Punktzahlen nebeneinander. Die Zahlen darunter sind die Indizes: von 0 bis 4.
  2. max beginnt beim ersten: scores[0] ist 62.
  3. i = 1: 85 > 62, also wird max zu 85.
  4. i = 2: 47 ist nicht größer als 85. Nichts ändert sich.
  5. i = 3: 91 > 85, also wird max zu 91.
  6. i = 4: 78 < 91. Dann wird i zu 5, 5 < scores.length ist falsch, und die Schleife endet.
  7. Die höchste Punktzahl ist 91.

max beginnt beim ersten Element und nicht bei 0. Wären alle Punktzahlen negativ, würde 0 „gewinnen“, obwohl sie gar nicht im Array steht. Deshalb beginnt die Schleife auch bei i = 1: Das erste Element steckt schon in max.

Probier es aus

Finde den Fehler

Das Programm soll die Summe 363 ausgeben. Stattdessen gibt es NaN aus.

In welcher Zeile ist der Fehler?

Wähle die Zeile mit dem Fehler.

Die Idee

for … of: für jedes Element

Wenn du nur die Werte brauchst und nicht die Indizes, gibt es eine kürzere Schleife. Wie viele Schüler haben die Prüfung bestanden (60 Punkte oder mehr)?

const scores = [62, 85, 47, 91, 78];
let passed = 0;
for (const score of scores) {
  if (score >= 60) {
    passed++;
  }
}
console.log(`Prüfung bestanden: ${passed}`);
Ausgabe
Prüfung bestanden: 4

Man liest sie so: „für jedes score aus (of) scores“. In Java heißt dasselbe for-each. Es gibt keinen Zähler und keinen Index, deshalb kannst du nicht über das Array hinausgehen. Es ist const, weil sich score innerhalb einer Runde nicht ändert: Die nächste Runde bekommt ein neues score.

Es gibt aber auch eine Grenze: Du weißt nicht, bei welchem Index du bist, und du kannst das Element nicht ändern.

Genauer, für Neugierige
  • Wenn du im Rumpf score = 0; schreibst, bricht das Programm mit TypeError ab, weil score const ist. Mit let score würde sich nur die Variable ändern, und das Array bliebe gleich.
const scores = [62, 85, 47];
try {
  for (const score of scores) {
    score = 0;
  }
} catch (error) {
  console.log(`${error.name}: ${error.message}`);
}
Ausgabe
TypeError: Assignment to constant variable.
  • Es gibt auch for … in, mit in statt of. Es liefert nicht die Elemente, sondern die Indizes, und zwar als Text. Für Arrays schreibst du for … of:
const scores = [62, 85, 47];
for (const i in scores) {
  console.log(i, typeof i);
}
Ausgabe
0 string
1 string
2 string
  • Um Elemente zu ändern oder wenn du den Index brauchst (zum Beispiel für den Nachbarn scores[i + 1]), nimmst du ein normales for.

Probier es aus

Zwei Namen, ein Array

Was gibt das Programm aus?

const prices = [10, 20, 30];
const sale = prices;
sale[0] = 5;
console.log(prices[0]);
Antwort
Genauer, für Neugierige

Eine echte Kopie machst du mit einem neuen Array und einer Schleife:

const prices = [10, 20, 30];
const sale = [];
for (const price of prices) {
  sale.push(price);
}
sale[0] = 5;
console.log(prices[0], sale[0]);
Ausgabe
10 5

[...prices] macht dasselbe:

const prices = [10, 20, 30];
const sale = [...prices];
sale[0] = 5;
console.log(prices[0], sale[0]);
Ausgabe
10 5

Probier es aus

Bring die Zeilen in die richtige Reihenfolge

Das Programm soll den niedrigsten Preis finden. Bring seine Zeilen in die richtige Reihenfolge.

  1. min = prices[i];
  2. let min = prices[0];
  3. if (prices[i] < min) {
  4. const prices = [18, 7, 25, 12];
  5. for (let i = 1; i < prices.length; i++) {
  6. }
  7. }
  8. console.log(min);

Übung

Rechnen mit einem Array

Löse die Aufgaben in deinem Editor. Jedes Programm liest zuerst, wie viele Zahlen es sind, und dann die Zahlen selbst, eine pro Zeile:

const n = Number(await ask(""));
const numbers = [];
for (let i = 0; i < n; i++) {
  numbers.push(Number(await ask("")));
}

Ganz oben stehen die Zeilen für ask() und am Ende rl.close(), wie in der Lektion „Eingabe und Ausgabe“.

1. Summe, gerade, ungerade. Gib die Summe aller Zahlen aus, die Summe der geraden und die der ungeraden.

Eingabe
3
1
2
3
Ausgabe
Summe: 6
Gerade: 2
Ungerade: 4

2. Umgekehrt. Lege zusätzlich ein Array mit denselben Zahlen in umgekehrter Reihenfolge an und gib es in einer Zeile aus.

Eingabe
5
1
2
3
4
5
Ausgabe
5 4 3 2 1

3. Kleinste, größte, Durchschnitt. Mit einem einzigen Durchlauf durch das Array.

Eingabe
5
4
9
2
7
4
Ausgabe
Kleinste: 2
Größte: 9
Durchschnitt: 5.2

Übung

Sortieren und zählen

4. Sortieren. Sortiere die Zahlen von der kleinsten zur größten. Tipp: Geh durch das Array, und wenn zwei Nachbarn in der falschen Reihenfolge stehen, vertausche sie (das Vertauschen kennst du aus der Lektion über Variablen). Wiederhole das, bis es nichts mehr zu vertauschen gibt. Das nennt man Bubblesort: Die großen Zahlen „steigen“ wie Blasen ans Ende.

Eingabe
5
42
7
19
3
25
Ausgabe
3 7 19 25 42

5. Längste Folge. Finde die längste Folge gleicher Zahlen direkt hintereinander.

Eingabe
8
2
2
5
5
5
1
5
5
Ausgabe
Die Zahl 5, 3-mal hintereinander

6. Notenstatistik. Lies Noten von 2 bis 6 ein und gib aus, wie viele es von jeder Note gibt. Tipp: ein Array counts mit 7 Elementen, in dem die Note der Index ist: counts[grade]++.

Eingabe
8
6
4
5
6
3
2
6
5
Ausgabe
Ausgezeichnet (6): 3
Sehr gut (5): 2
Gut (4): 1
Ausreichend (3): 1
Ungenügend (2): 1

Weitere Aufgaben

  • Median. Die Zahl in der Mitte des sortierten Arrays. Für 3, 1, 4, 1, 5 ist der Median 3. Bei einer geraden Anzahl von Zahlen ist der Median der Durchschnitt der beiden in der Mitte: Für 7, 1, 3, 9 ist er (3 + 7) / 2 = 5.
  • Symmetrisches Array. Liest es sich von vorne nach hinten genauso wie von hinten nach vorne? 1 2 3 2 1 ist symmetrisch, 1 2 3 1 nicht.
  • Römische Zahlen. Lies eine Zahl von 1 bis 3999 ein und gib sie in römischen Zahlen aus: 2024 ist MMXXIV, 1994 ist MCMXCIV. Tipp: zwei Arrays nebeneinander, eines mit den Werten 1000, 900, 500, 400, 100, …, 1 und eines mit den Zeichen "M", "CM", "D", "CD", "C", …, "I". Solange die Zahl mindestens so groß ist wie der aktuelle Wert, hängst du das Zeichen an und ziehst den Wert ab.

Test

Teste dich

1. An welchem Index steht 91 im Array [62, 85, 47, 91, 78]?
2. Welchen Index hat das letzte Element des Arrays scores?
3. Was steht im Array direkt nach const booked = new Array(3).fill(0);?
4. Das Array scores hat 5 Elemente. Was liefert scores[5]?
5. const sale = prices; sale[0] = 5; Was passiert mit prices[0]?

Erstellt von Ivo Gergov im Rahmen der Kampagne von Evo Tech für zugängliche Programmierausbildung ·