Aufwärmen · Aufgabe 1 von 7
Zum Aufwärmen: Was gibt dieser Code aus?
const colours = ["red", "green", "blue"];
console.log(colours[1]);// B5.1 · ca. 30 Min. · Einstieg
Arrays und ihre Methoden
Nach dieser Lektion lesen, ändern, durchsuchen, kopieren und sortieren Sie ein Array und wissen, welche Methoden es verändern.
Lektion 1 von 5 in B5 Arrays, Objekte und JSON
Anfang des ModulsWeiter
Danach können Sie
- Ein Array über Index, length und at(-1) lesen und mit push, pop, shift und unshift Elemente hinzufügen oder entfernen
- Ein Array mit includes, indexOf, find und findIndex durchsuchen, mit slice einen Teil kopieren, mit splice ändern und mit join verbinden
- Zahlen mit einer Vergleichsfunktion sortieren und Methoden, die das Array ändern, von denen unterscheiden, die ein neues zurückgeben
Vorhersagen · Aufgabe 2 von 7
Sagen Sie es vorher, bevor Sie weiterlesen: Was gibt dieser Code aus?
console.log([10, 1, 5, 100].sort());Üben · Aufgabe 3 von 7
Füllen Sie die Lücke so, dass das Programm das letzte Element, cherry, ausgibt, gezählt vom Ende des Arrays.
const fruits = ["apple", "banana", "cherry"]; console.log(fruits.____);console.log(fruits.);Üben · Aufgabe 4 von 7
Ordnen Sie jeder Methode zu, was sie tut.
Üben · Aufgabe 5 von 7
Was gibt dieser Code aus?
const a = [1, 2, 3, 4, 5]; const b = a.splice(1, 2); console.log(a, b);Denksport · Aufgabe 6 von 7
Knobelaufgabe. Das Programm sortiert und fügt dann an sorted etwas an. Was gibt es aus?
const scores = [40, 9, 100]; const sorted = scores.sort((a, b) => a - b); sorted.push(1); console.log(scores);Anwenden · Aufgabe 7 von 7
Kleine Aufgabe: eine Warteschlange am Schalter. Beginnen Sie mit drei Namen in einem Array. Fügen Sie einen Namen hinten und einen vorne an und geben Sie dann die Länge und mit at(-1) den letzten Namen aus. Bedienen Sie die erste Person mit shift und geben Sie aus, wer bedient wurde. Jemand geht: Ermitteln Sie mit indexOf die Position und entfernen Sie die Person mit splice. Geben Sie zum Schluss eine alphabetische Kopie mit toSorted neben der Warteschlange selbst aus, um zu zeigen, dass die Warteschlange ihre Reihenfolge behält.
Prüfen Sie Ihr Ergebnis anhand dieser Liste
Selbst programmieren
Lesen Sie das ausgearbeitete Beispiel und lösen Sie dann die Übungen. Ihr Code läuft in Ihrem Browser oder auf Ihrem Computer und wird nie hochgeladen.
Ausgearbeitetes Beispiel
Eine To-do-Liste und ein paar Punktzahlen
Ein Programm, das fast alles aus dieser Lektion nutzt: Es liest eine To-do-Liste über den Index und vom Ende her, fügt Aufgaben hinzu und entfernt welche, durchsucht die Liste und kopiert und sortiert dann eine Liste von Punktzahlen. Achten Sie auf die letzten drei Zeilen: Die Standardsortierung stellt 100 nach vorn, die Vergleichsfunktion korrigiert das, und scores selbst ändert sich nie, weil toSorted eine Kopie zurückgibt.
main.js
// A to-do list and some scores: read, change, search, sort.
const tasks = ["wash", "shop", "cook"];
console.log(tasks[0], tasks.length, tasks.at(-1));
tasks.push("read");
const done = tasks.shift();
console.log(done, tasks);
console.log(tasks.includes("cook"), tasks.indexOf("cook"), tasks.indexOf("swim"));
const scores = [40, 100, 9, 25];
console.log(scores.find((s) => s > 30), scores.findIndex((s) => s > 30));
console.log(scores.slice(1, 3), scores.join(" | "));
console.log(scores.toSorted());
console.log(scores.toSorted((a, b) => a - b));
console.log(scores);
Ausführen mit
node main.jsAusgabe
wash 3 cook
wash [ 'shop', 'cook', 'read' ]
true 1 -1
40 0
[ 100, 9 ] 40 | 100 | 9 | 25
[ 100, 25, 40, 9 ]
[ 9, 25, 40, 100 ]
[ 40, 100, 9, 25 ]- shift hat "wash" zurückgegeben und entfernt, deshalb beginnt tasks jetzt mit "shop".
- indexOf liefert -1 für "swim", das nicht in der Liste steht.
- find gibt die erste Punktzahl über 30 zurück, 40 an Index 0, nicht die größte.
- toSorted() ohne Vergleichsfunktion sortiert als Strings, also kommt 100 vor 25.
- Die letzte Zeile zeigt scores nach beiden toSorted-Aufrufen unverändert.
Ändern und ausführen
Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.
Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.
Übungen
Übung 1 von 2
Sortierte Preise, Original unberührt
sortedPrices(prices) soll die Preise vom niedrigsten zum höchsten als neues Array zurückgeben und das übergebene Array in seiner alten Reihenfolge lassen. Der Starter hat zwei Fehler: Er sortiert 100 vor 12, und er ändert das Array des Aufrufers. Beheben Sie beide. Lassen Sie das Wort export vor der Funktion stehen, wie in Modul B4.
Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.
Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.
Hinweise
Hinweis 1
Führen Sie die Tests aus: [12, 5, 100] kommt als [100, 12, 5] zurück. Warum steht 100 vorn?
Hinweis 2
Zahlen brauchen eine Vergleichsfunktion: (a, b) => a - b.
Hinweis 3
sort ändert das Array, auf dem es aufgerufen wird. Welche Methode gibt stattdessen eine sortierte Kopie zurück?
Hinweis 4
return prices.toSorted((a, b) => a - b);
Eine Lösung zeigen
Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.
// Return a new array with the prices from lowest to highest.
export function sortedPrices(prices) {
return prices.toSorted((a, b) => a - b);
}
Auf dem eigenen Computer ausführen
Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.
main.js
// Return a new array with the prices from lowest to highest.
export function sortedPrices(prices) {
return prices.sort();
}
main.test.js
import {test} from 'node:test';
import assert from 'node:assert/strict';
import {sortedPrices} from './main.js';
test('Sortiert Zahlen nach Größe, nicht als Text', () => {
const got = sortedPrices([12, 5, 100]);
assert.deepEqual(got, [5, 12, 100], `sortedPrices([12, 5, 100]) hat ${JSON.stringify(got)} zurückgegeben, erwartet [5,12,100]`);
});
test('Lässt das übergebene Array unverändert', () => {
const prices = [3.5, 1.25, 2];
sortedPrices(prices);
assert.deepEqual(prices, [3.5, 1.25, 2], `nach dem Aufruf war das Array ${JSON.stringify(prices)}, erwartet war, dass es [3.5,1.25,2] bleibt`);
});
test('Gibt für keine Preise ein leeres Array zurück', () => {
const got = sortedPrices([]);
assert.deepEqual(got, [], `sortedPrices([]) hat ${JSON.stringify(got)} zurückgegeben, erwartet []`);
});
package.json
{
"type": "module"
}
package.json sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.
Programm ausführen:
node main.jsPrüfungen ausführen (learnrun.js muss im selben Ordner liegen):
node --testÜbung 2 von 2
Ein Element entfernen, falls es da ist
removeItem(list, item) soll das erste Element, das gleich item ist, aus der Liste selbst entfernen und true zurückgeben. Steht item nicht in der Liste, muss die Liste genau so bleiben, wie sie ist, und die Funktion gibt false zurück. Der Starter funktioniert für vorhandene Elemente, beschädigt die Liste aber, wenn das Element fehlt. Finden Sie heraus, warum, und beheben Sie es.
Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.
Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.
Hinweise
Hinweis 1
Führen Sie die Tests aus: Das Entfernen von "jam" entfernt "bread". Was liefert indexOf für ein fehlendes Element?
Hinweis 2
indexOf liefert -1, und splice(-1, 1) zählt vom Ende her: Es entfernt das letzte Element.
Hinweis 3
Prüfen Sie den Index vor dem splice: Ist er -1, geben Sie false zurück und lassen die Liste in Ruhe.
Eine Lösung zeigen
Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.
// Remove the first item equal to item from list. Return true if one was removed.
export function removeItem(list, item) {
const index = list.indexOf(item);
if (index === -1) {
return false;
}
list.splice(index, 1);
return true;
}
Auf dem eigenen Computer ausführen
Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.
main.js
// Remove the first item equal to item from list. Return true if one was removed.
export function removeItem(list, item) {
const index = list.indexOf(item);
list.splice(index, 1);
return true;
}
main.test.js
import {test} from 'node:test';
import assert from 'node:assert/strict';
import {removeItem} from './main.js';
test('Entfernt ein Element, das in der Liste steht', () => {
const list = ['tea', 'milk', 'bread'];
const got = removeItem(list, 'milk');
assert.equal(got, true, `removeItem hat ${got} zurückgegeben, erwartet true`);
assert.deepEqual(list, ['tea', 'bread'], `die Liste ist ${JSON.stringify(list)}, erwartet ["tea","bread"]`);
});
test('Lässt die Liste in Ruhe, wenn das Element fehlt', () => {
const list = ['tea', 'milk', 'bread'];
const got = removeItem(list, 'jam');
assert.equal(got, false, `removeItem hat für ein fehlendes Element ${got} zurückgegeben, erwartet false`);
assert.deepEqual(list, ['tea', 'milk', 'bread'], `die Liste wurde zu ${JSON.stringify(list)}, erwartet unverändert`);
});
test('Entfernt nur das erste von zwei gleichen Elementen', () => {
const list = ['a', 'b', 'a'];
removeItem(list, 'a');
assert.deepEqual(list, ['b', 'a'], `die Liste ist ${JSON.stringify(list)}, erwartet ["b","a"]`);
});
package.json
{
"type": "module"
}
package.json sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.
Programm ausführen:
node main.jsPrüfungen ausführen (learnrun.js muss im selben Ordner liegen):
node --testHäufige Fehler
Eine Methode aus einer anderen Sprache
const tasks = ["wash", "shop", "cook"];
if (tasks.contains("cook")) {
console.log("Dinner is planned");
}
Was Node.js ausgibt
TypeError: tasks.contains is not a functionWarum, und die Lösung
Arrays haben in JavaScript keine Methode contains, also ist tasks.contains undefined, und undefined aufzurufen ist ein TypeError. Die Methode heißt includes: tasks.includes("cook") gibt true oder false zurück. Wenn die Meldung sagt, eine Methode sei keine Funktion, prüfen Sie die Schreibweise und ob Arrays sie überhaupt haben.
Erwarten, dass push das Array zurückgibt
const tasks = ["wash", "shop"];
const more = tasks.push("cook");
console.log(more.at(-1));
Was Node.js ausgibt
TypeError: more.at is not a functionWarum, und die Lösung
push ändert tasks selbst und gibt die neue Länge zurück, hier die Zahl 3. more ist eine Zahl, und Zahlen haben keine Methode at. Verwenden Sie das Array, an das Sie angefügt haben: tasks.at(-1) ist "cook". Auch unshift gibt die neue Länge zurück; pop und shift geben das entfernte Element zurück.
Verwenden, was find nicht gefunden hat
const words = ["apple", "banana", "cherry"];
const word = words.find((w) => w.startsWith("z"));
console.log(word.toUpperCase());
Was Node.js ausgibt
TypeError: Cannot read properties of undefined (reading 'toUpperCase')Warum, und die Lösung
Kein Wort beginnt mit "z", also gibt find undefined zurück, und undefined hat keine Methoden. Die Meldung nennt die Methode, die gelesen werden sollte. Prüfen Sie das Ergebnis, bevor Sie es verwenden: if (word !== undefined) { … }, oder geben Sie eine Meldung aus, wenn nichts gefunden wurde.
JavaScript im Browser: die eigene Engine Ihres Browsers in einem abgeschotteten Worker. Syntaxfehler findet acorn 8.18.0, MIT. Lizenz und Quellcode
Abschlussquiz
5 Fragen, ohne Hinweise. Ab 80 % ist die Lektion abgeschlossen.
Erledigen Sie zuerst alle Aufgaben oben, um das Abschlussquiz freizuschalten.