JavaScript-Spickzettel
Eine durchsuchbare, druckbare Referenz für modernes JavaScript — Syntax, Arrays, Strings, Objekte, async/await, DOM und ES2022+-Funktionen. Kostenlos.
Variablen & Typen
10let x = 1;
Blockweite, neu zuweisbare Variable
const PI = 3.14;
Blockweite Konstantenbindung
typeof value
Gibt den Typ als String zurück
Number('42')
String in Zahl umwandeln
String(42)
Wert in String umwandeln
parseInt('42px', 10)
Führende Ganzzahl parsen (Basis 10)
Boolean(0)
Wert zu true/false umwandeln
value ?? 'default'
Nullish-Coalescing (nur null/undefined)
a?.b?.c
Optional Chaining, bricht bei null ab
Array.isArray(x)
Prüfen, ob ein Wert ein Array ist
Funktionen
9function add(a, b) { return a + b; }
Benannte Funktionsdeklaration
const add = (a, b) => a + b;
Arrow-Funktion mit implizitem Return
const f = (a = 1) => a;
Standard-Parameterwert
function f(...args) {}
Rest-Parameter sammeln in ein Array
f(...arr)
Array als Argumente entpacken
const { a, b } = obj;
Objekt-Destrukturierung
const [x, y] = arr;
Array-Destrukturierung
(function(){})()
Sofort ausgeführte Funktion (IIFE)
fn.bind(this)
Festen this-Kontext binden
Strings
10`Hello ${name}`
Template-Literal-Interpolation
str.length
Anzahl der Zeichen
str.includes('a')
Prüfen, ob ein Teilstring existiert
str.slice(0, 3)
Teil eines Strings extrahieren
str.replace(/a/g, 'b')
Treffer ersetzen (regex)
str.split(',')
In ein Array aufteilen
str.trim()
Umgebende Leerzeichen entfernen
str.toUpperCase()
In Großbuchstaben umwandeln
str.padStart(3, '0')
Anfang auf Länge auffüllen
str.at(-1)
Zeichen an Index (auch negativ)
Arrays
11arr.map(x => x * 2)
Jedes Element transformieren
arr.filter(x => x > 0)
Passende Elemente behalten
arr.reduce((a, b) => a + b, 0)
Auf einen Wert reduzieren
arr.find(x => x.id === 1)
Erstes passendes Element
arr.some(x => x > 0)
true, wenn ein Element passt
arr.every(x => x > 0)
true, wenn alle Elemente passen
arr.includes(3)
Auf einen Wert prüfen
arr.sort((a, b) => a - b)
Numerisch aufsteigend sortieren
[...new Set(arr)]
Doppelte Werte entfernen
arr.flat(Infinity)
Verschachtelte Arrays voll abflachen
arr.at(-1)
Letztes Element (negativer Index)
Objekte
9Object.keys(obj)
Array eigener aufzählbarer Schlüssel
Object.values(obj)
Array eigener Werte
Object.entries(obj)
Array von [key, value]-Paaren
{ ...a, ...b }
Objekte zusammenführen (spread)
Object.assign({}, a, b)
In ein Ziel kopieren/mergen
Object.freeze(obj)
Objekt unveränderlich machen
{ [key]: value }
Berechneter Eigenschaftsname
obj.hasOwnProperty('x')
Auf eigene Eigenschaft prüfen
structuredClone(obj)
Objekt tief klonen
Async & Promises
9async function f() {}
async-Funktion deklarieren
await fetch(url)
Warten, bis ein Promise auflöst
Promise.all([p1, p2])
Auf Auflösung aller warten
Promise.allSettled([p1, p2])
Auf Abschluss aller warten
Promise.race([p1, p2])
Mit dem ersten Abschluss auflösen
new Promise((res, rej) => {})
Promise manuell erstellen
try { await f(); } catch (e) {}
Async-Fehler behandeln
setTimeout(fn, 1000)
Nach Verzögerung ausführen (ms)
queueMicrotask(fn)
Microtask planen
Kontrollfluss
9if (a) {} else if (b) {} else {}
Bedingte Verzweigungen
a ? b : c
Ternärer Ausdruck
switch (x) { case 1: break; }
Mehrwegverzweigung
for (const x of arr) {}
Werte iterieren (Iterables)
for (const k in obj) {}
Objektschlüssel iterieren
while (cond) {}
Schleife, solange Bedingung gilt
arr.forEach((x, i) => {})
Callback pro Element ausführen
break / continue
Schleifeniteration beenden/überspringen
label: for (...) { break label; }
Aus verschachtelten Schleifen ausbrechen
DOM & Events
10document.querySelector('.x')
Erstes passendes Element
document.querySelectorAll('.x')
Alle passenden Elemente (NodeList)
el.addEventListener('click', fn)
Event-Listener anhängen
el.classList.toggle('active')
CSS-Klasse umschalten
el.dataset.id
data-id-Attribut lesen
el.textContent = 'hi'
Text sicher setzen (kein HTML)
el.setAttribute('aria-hidden', true)
Attribut setzen
e.preventDefault()
Standardaktion abbrechen
el.closest('.parent')
Nächster passender Vorfahre
document.createElement('div')
Neues Element erstellen
Klassen & Module
9class A extends B {}
Klasse mit Vererbung
constructor() { super(); }
Eltern initialisieren und aufrufen
#private = 1;
Privates Klassenfeld
static create() {}
Statische Methode der Klasse
get value() {}
Getter-Accessor
export default fn;
Standard-Modul-Export
export { a, b };
Benannte Modul-Exporte
import x, { y } from './m.js'
Standard- + benannte Imports
const m = await import('./m.js')
Dynamischer Import
Kein Eintrag passt zu „:q“.
Brauchen Sie Hilfe?
Ein Problem mit diesem Tool gefunden? Sagen Sie es unserem Team.