JavaScript: Nachschlagen: Spickzettel

Kurz: Dieses Kapitel fasst das Wichtigste des Kurses zum schnellen Nachschlagen zusammen.

Teil des Kurses JavaScript

Kapitel 40 von 40 im Kurs JavaScript. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

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.3
• sort() sortiert Text; für Zahlen (a, b) => a - b
• "5" + 1 === "51", "5" - 1 === 4
• const schützt nur die Zuweisung
• fetch wirft nicht bei HTTP-Fehlern
• Date-Monate beginnen bei 0
• forEach 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

Quiz zur Selbstkontrolle

Welche Seite ist die Standardreferenz für JavaScript und Web-APIs?

• MDN Web Docs (richtig)
• Wikipedia
• w3.org nur
• Stack Overflow Jobs

Womit sortierst du Zahlen richtig?

• arr.toSorted((a, b) => a - b) (richtig)
• arr.sort()
• arr.order()
• arr.sortNumbers()

Welcher Operator ersetzt nur null und undefined?

• ?? (richtig)
• ||
• &&
• ?:

Weiter im Kurs

Zurück: Projekt: Eine Aufgabenliste

Alle Kapitel: JavaScript im Überblick