Dieses Kapitel fasst das Wichtigste des Kurses zum schnellen Nachschlagen zusammen.
Datentypen und Prüfungen
| Aufgabe | Code |
|---|
| Typ erfragen | typeof x |
| Array prüfen | Array.isArray(x) |
| NaN prüfen | Number.isNaN(x) |
| Ganzzahl prüfen | Number.isInteger(x) |
| Zu Zahl | Number(x), parseInt(x, 10), parseFloat(x), +x |
| Zu Text | String(x), x.toString(), ` ${x} ` |
| Zu Boolean | Boolean(x), !!x |
| Falsy-Werte | false 0 -0 0n "" null undefined NaN |
Strings
| Aufgabe | Code |
|---|
| Länge | s.length |
| Teil | s.slice(a, b), s.at(-1) |
| Suchen | s.includes(x), s.indexOf(x), s.startsWith(x), s.endsWith(x) |
| Ersetzen | s.replace(a, b), s.replaceAll(a, b) |
| Teilen/Verbinden | s.split(","), arr.join(",") |
| Aufräumen | s.trim(), s.toLowerCase(), s.toUpperCase() |
| Auffüllen | s.padStart(3, "0"), s.padEnd(5) |
| Wiederholen | s.repeat(3) |
| Sprachrichtig vergleichen | a.localeCompare(b, "de") |
Arrays
| Aufgabe | Code |
|---|
| Hinten/Vorn hinzufügen | push, unshift |
| Hinten/Vorn entfernen | pop, shift |
| Mitte ändern | splice(i, n, ...neu) |
| Kopie/Teil | [...a], a.slice(i, j) |
| Umwandeln | a.map(f) |
| Auswählen | a.filter(f) |
| Zusammenfassen | a.reduce((akku, x) => ..., start) |
| Finden | find, findIndex, findLast, includes, indexOf |
| Prüfen | some(f), every(f) |
| Sortieren | a.toSorted((x, y) => x - y) |
| Flachmachen | flat(), flatMap(f) |
| Eindeutig | [...new Set(a)] |
| Gruppieren | Object.groupBy(a, f) |
Objekte
| Aufgabe | Code |
|---|
| Schlüssel/Werte/Paare | Object.keys(o), Object.values(o), Object.entries(o) |
| Aus Paaren bauen | Object.fromEntries(paare) |
| Prüfen | "x" in o, Object.hasOwn(o, "x") |
| Kopieren | { ...o }, structuredClone(o) |
| Einfrieren | Object.freeze(o) |
| Zugriff absichern | o?.a?.b, o.a ?? standard |
Funktionen und Klassen
| Aufgabe | Code |
|---|
| Arrow-Funktion | (a, b) => a + b |
| Standardwert | function f(x = 1) {} |
| Rest-Parameter | function f(...args) {} |
| Destructuring | const { a, b } = o, const [x, y] = arr |
| Klasse | class A extends B { constructor() { super(); } } |
| Privates Feld | #feld |
| Getter | get name() {} |
Asynchron
| Aufgabe | Code |
|---|
| Warten | await new Promise(r => setTimeout(r, ms)) |
| Parallel | await Promise.all([a(), b()]) |
| Bester Erfolg | Promise.any, Promise.race, Promise.allSettled |
| fetch + JSON | const r = await fetch(url); if (!r.ok) throw ...; const d = await r.json(); |
| Fehler | try { await ... } catch (e) { ... } finally { ... } |
DOM und Browser
| Aufgabe | Code |
|---|
| Element finden | document.querySelector("#id .klasse"), querySelectorAll |
| Text/HTML | el.textContent = "...", el.innerHTML (vorsichtig) |
| Element erzeugen | document.createElement("li") |
| Einfügen/Entfernen | parent.append(el), el.remove() |
| Klassen | el.classList.add/remove/toggle/contains |
| Attribute | el.setAttribute("x", "y"), el.dataset.name |
| Ereignis | el.addEventListener("click", (e) => {}) |
| Standard verhindern | e.preventDefault() |
| Speichern | localStorage.setItem(k, JSON.stringify(v)), JSON.parse(localStorage.getItem(k)) |
| URL | new URL(adresse).searchParams.get("q") |
Node.js
| Aufgabe | Code |
|---|
| Datei lesen/schreiben | await fs.readFile(p, "utf8"), await fs.writeFile(p, text) |
| Pfad bauen | path.join(a, b) |
| Argumente/Umgebung | process.argv, process.env.NAME |
| Server | http.createServer((req, res) => {...}).listen(3000) |
| Pakete | npm install x, npm run skript, npx werkzeug |
| Tests | node --test |
Operatoren auf einen Blick
| Gruppe | Operatoren |
|---|
| Rechnen | + - * / % ** |
| Vergleichen | === !== < > <= >= |
| Logik | && || ! ?? |
| Zuweisen | = += -= *= /= ??= ||= &&= |
| Sonstiges | ?: ?. ... typeof instanceof in |
Bekannte Fallen in einer Zeile
typeof null === "object", NaN !== NaN, 0.1 + 0.2 !== 0.3sort() sortiert Text; für Zahlen (a, b) => a - b"5" + 1 === "51", "5" - 1 === 4const schützt nur die Zuweisungfetch wirft nicht bei HTTP-FehlernDate-Monate beginnen bei 0forEach wartet nicht auf await
Weiterlernen
- MDN Web Docs (developer.mozilla.org): die beste Referenz für JavaScript, DOM und Web-APIs
- javascript.info: ausführliches Tutorial
- TypeScript: Typen für größere Projekte
- Ein Framework (React, Vue, Svelte) und Node.js-Backend (Express, Fastify)
- Eigene Projekte: ein Spiel mit Canvas, eine Wetter-App mit
fetch, ein Chat mit WebSockets
Merke
- Dieses Kapitel ist zum Nachschlagen gedacht; die Details stehen in den Kapiteln davor
- Im Zweifel: MDN
- Üben mit eigenen kleinen Projekten schlägt Lesen
EMZETT.