📚Arrays und Objekte

Arrays sind geordnete Listen, Objekte Sammlungen von Schlüssel-Wert-Paaren. Die wichtigsten Array-Methoden bekommen eine Funktion (Callback) und rufen sie für jedes Element auf – hier zum Zuschauen.

🎬map, filter, reduce & Co. animiert

Array (Zahlen, durch Komma getrennt)Callback

1[3, 1, 4, 1, 5, 9].map(x => x * 2)

Schritt 1 / 7 · Tasten ← →

Eingabe

3[0]

1[1]

4[2]

1[3]

5[4]

9[5]

Callback wartet …

Neues Array

–

Drücke „Weiter“ oder „Abspielen“.

🧰Weitere Array-Methoden

Seit ES2023 gibt es zu den verändernden Methoden sort, reverse und splice nicht-verändernde Gegenstücke (toSorted, toReversed, toSpliced, with).

Methode	Beispiel	Ergebnis (live)	verändert Original?	seit
push / pop	const a = [1, 2]; a.push(3); a	…	ja	ES1
slice	[1, 2, 3, 4].slice(1, 3)	…	nein	ES3
splice	const a = [1, 2, 3, 4]; a.splice(1, 2); a	…	ja	ES3
includes	[1, 2, NaN].includes(NaN)	…	nein	ES2016
indexOf	[1, 2, NaN].indexOf(NaN)	…	nein	ES5
flat	[1, [2, [3, [4]]]].flat(Infinity)	…	nein	ES2019
flatMap	["a b", "c"].flatMap(s => s.split(" "))	…	nein	ES2019
at	[10, 20, 30].at(-1)	…	nein	ES2022
findLast	[1, 4, 2, 5].findLast(x => x % 2 === 0)	…	nein	ES2023
sort (Achtung!)	[10, 9, 1].sort()	…	ja	ES1
toSorted	[10, 9, 1].toSorted((a, b) => a - b)	…	nein	ES2023
toReversed	[1, 2, 3].toReversed()	…	nein	ES2023
with	[1, 2, 3].with(1, 99)	…	nein	ES2023
Object.groupBy	Object.groupBy([1, 2, 3, 4], x => x % 2 ? "ungerade" : "gerade")	…	nein	ES2024

⚠️ sort() ohne Vergleichsfunktion sortiert als Text

[10, 9, 1].sort() ergibt [1, 10, 9], weil die Elemente als Strings verglichen werden. Für Zahlen: sort((a, b) => a - b).

🗃️Objekte, Referenzen, JSON, Map und Set

Objekte anlegen und lesen

1const key = "farbe";
2const auto = {
3  marke: "Beispiel",
4  [key]: "blau",        // berechneter Schlüssel
5  hupen() { return "Tut!"; },
6};
7console.log(auto.marke, auto["farbe"], auto.hupen());
8console.log(Object.keys(auto));
9console.log("marke" in auto, auto.ps);

Konsole (echt ausgeführt)

wird ausgeführt …

Referenzen, nicht Kopien

1const a = { n: 1 };
2const b = a;           // gleiche Referenz
3b.n = 99;
4console.log(a.n, a === b);
5console.log({ n: 1 } === { n: 1 });
6const tief = structuredClone({ x: { y: 1 } });
7console.log(tief);

Konsole (echt ausgeführt)

wird ausgeführt …

Variablen enthalten bei Objekten nur einen Verweis auf den Heap. === vergleicht Verweise.

JSON

1const text = JSON.stringify({ name: "Ada", tags: ["x"], nichts: undefined });
2console.log(text);
3const obj = JSON.parse(text);
4console.log(obj.tags[0]);

Konsole (echt ausgeführt)

wird ausgeführt …

Eigenschaften mit undefined (und Funktionen) lässt JSON.stringify weg.

Map und Set

1const m = new Map([["a", 1]]);
2m.set({ id: 1 }, "Objekt als Schlüssel");
3console.log(m.size, m.get("a"));
4const s = new Set([1, 2, 2, 3]);
5console.log(s.size, s.has(2), [...s]);

Konsole (echt ausgeführt)

wird ausgeführt …