JavaScript-fusklapp
En sökbar, utskrivbar referens för modern JavaScript — syntax, arrayer, strängar, objekt, async/await, DOM och ES2022+-funktioner. Gratis.
Variabler och typer
10let x = 1;
Blockomfattad, omtilldelbar variabel
const PI = 3.14;
Blockomfattad konstantbindning
typeof value
Returnerar typen som en sträng
Number('42')
Konvertera en sträng till ett tal
String(42)
Konvertera ett värde till en sträng
parseInt('42px', 10)
Tolka ett inledande heltal (bas 10)
Boolean(0)
Tvinga ett värde till true/false
value ?? 'default'
Nullish-sammanslagning (endast null/undefined)
a?.b?.c
Optional chaining, kortsluter vid null
Array.isArray(x)
Kontrollera om ett värde är en array
Funktioner
9function add(a, b) { return a + b; }
Namngiven funktionsdeklaration
const add = (a, b) => a + b;
Pilfunktion med implicit retur
const f = (a = 1) => a;
Standardvärde för parameter
function f(...args) {}
Rest-parametrar samlas i en array
f(...arr)
Sprid en array till argument
const { a, b } = obj;
Objektdestrukturering
const [x, y] = arr;
Arraydestrukturering
(function(){})()
Omedelbart anropad funktion (IIFE)
fn.bind(this)
Bind en fast this-kontext
Strängar
10`Hello ${name}`
Mall-literalinterpolation
str.length
Antal tecken
str.includes('a')
Kontrollera om en delsträng finns
str.slice(0, 3)
Extrahera del av en sträng
str.replace(/a/g, 'b')
Ersätt träffar (regex)
str.split(',')
Dela upp i en array
str.trim()
Ta bort omgivande blanksteg
str.toUpperCase()
Konvertera till versaler
str.padStart(3, '0')
Fyll ut början till en längd
str.at(-1)
Tecken vid index (stöder negativa)
Arrayer
11arr.map(x => x * 2)
Transformera varje element
arr.filter(x => x > 0)
Behåll matchande element
arr.reduce((a, b) => a + b, 0)
Reducera till ett enda värde
arr.find(x => x.id === 1)
Första matchande elementet
arr.some(x => x > 0)
True om något element matchar
arr.every(x => x > 0)
True om alla element matchar
arr.includes(3)
Kontrollera om ett värde finns
arr.sort((a, b) => a - b)
Numerisk stigande sortering
[...new Set(arr)]
Ta bort dubblettvärden
arr.flat(Infinity)
Platta ut nästlade arrayer helt
arr.at(-1)
Sista elementet (negativt index)
Objekt
9Object.keys(obj)
Array av egna uppräkningsbara nycklar
Object.values(obj)
Array av egna värden
Object.entries(obj)
Array av [key, value]-par
{ ...a, ...b }
Slå samman objekt (spread)
Object.assign({}, a, b)
Kopiera/slå samman till ett mål
Object.freeze(obj)
Gör ett objekt oföränderligt
{ [key]: value }
Beräknat egenskapsnamn
obj.hasOwnProperty('x')
Kontrollera om en egen egenskap finns
structuredClone(obj)
Djupklona ett objekt
Async och promises
9async function f() {}
Deklarera en async-funktion
await fetch(url)
Pausa tills en promise löses
Promise.all([p1, p2])
Vänta tills alla löses
Promise.allSettled([p1, p2])
Vänta tills alla avgörs
Promise.race([p1, p2])
Lös med den första som avgörs
new Promise((res, rej) => {})
Skapa en promise manuellt
try { await f(); } catch (e) {}
Hantera async-fel
setTimeout(fn, 1000)
Kör efter en fördröjning (ms)
queueMicrotask(fn)
Schemalägg en microtask
Kontrollflöde
9if (a) {} else if (b) {} else {}
Villkorsgrenar
a ? b : c
Ternärt uttryck
switch (x) { case 1: break; }
Flervägsgrening
for (const x of arr) {}
Iterera värden (iterables)
for (const k in obj) {}
Iterera objektnycklar
while (cond) {}
Loopa medan ett villkor gäller
arr.forEach((x, i) => {})
Kör en callback per element
break / continue
Avsluta eller hoppa över en loopiteration
label: for (...) { break label; }
Bryt ut ur nästlade loopar
DOM och events
10document.querySelector('.x')
Första matchande elementet
document.querySelectorAll('.x')
Alla matchande element (NodeList)
el.addEventListener('click', fn)
Koppla en event-lyssnare
el.classList.toggle('active')
Växla en CSS-klass
el.dataset.id
Läs ett data-id-attribut
el.textContent = 'hi'
Sätt text säkert (ingen HTML)
el.setAttribute('aria-hidden', true)
Sätt ett attribut
e.preventDefault()
Avbryt standardåtgärden
el.closest('.parent')
Närmaste matchande förfader
document.createElement('div')
Skapa ett nytt element
Klasser och moduler
9class A extends B {}
Klass med arv
constructor() { super(); }
Initiera och anropa föräldern
#private = 1;
Privat klassfält
static create() {}
Statisk metod på klassen
get value() {}
Getter-accessor
export default fn;
Standardmodulexport
export { a, b };
Namngivna modulexporter
import x, { y } from './m.js'
Standard- och namngivna importer
const m = await import('./m.js')
Dynamisk import
Ingen post matchar “:q”.
Behöver du hjälp?
Hittade du ett problem med det här verktyget? Berätta för oss.