Ściąga JavaScript
Przeszukiwalna, gotowa do druku referencja nowoczesnego JavaScriptu — składnia, tablice, ciągi, obiekty, async/await, DOM i funkcje ES2022+. Za darmo.
Zmienne i typy
10let x = 1;
Zmienna o zasięgu bloku, możliwa do nadpisania
const PI = 3.14;
Stała o zasięgu bloku
typeof value
Zwraca typ jako ciąg znaków
Number('42')
Konwersja ciągu na liczbę
String(42)
Konwersja wartości na ciąg znaków
parseInt('42px', 10)
Parsuje początkową liczbę całkowitą (system 10)
Boolean(0)
Rzutuje wartość na true/false
value ?? 'default'
Operator nullish (tylko null/undefined)
a?.b?.c
Opcjonalne łączenie, przerywa przy null
Array.isArray(x)
Sprawdza, czy wartość jest tablicą
Funkcje
9function add(a, b) { return a + b; }
Deklaracja funkcji nazwanej
const add = (a, b) => a + b;
Funkcja strzałkowa z domyślnym zwrotem
const f = (a = 1) => a;
Domyślna wartość parametru
function f(...args) {}
Parametry rest zbierane do tablicy
f(...arr)
Rozwinięcie tablicy na argumenty
const { a, b } = obj;
Destrukturyzacja obiektu
const [x, y] = arr;
Destrukturyzacja tablicy
(function(){})()
Funkcja wywoływana natychmiast (IIFE)
fn.bind(this)
Wiąże stały kontekst this
Ciągi znaków
10`Hello ${name}`
Interpolacja w literałach szablonowych
str.length
Liczba znaków
str.includes('a')
Sprawdza, czy podciąg istnieje
str.slice(0, 3)
Wyodrębnia część ciągu
str.replace(/a/g, 'b')
Zastępuje dopasowania (regex)
str.split(',')
Dzieli na tablicę
str.trim()
Usuwa otaczające białe znaki
str.toUpperCase()
Zamienia na wielkie litery
str.padStart(3, '0')
Dopełnia początek do długości
str.at(-1)
Znak na indeksie (obsługa ujemnych)
Tablice
11arr.map(x => x * 2)
Przekształca każdy element
arr.filter(x => x > 0)
Zachowuje pasujące elementy
arr.reduce((a, b) => a + b, 0)
Redukuje do jednej wartości
arr.find(x => x.id === 1)
Pierwszy pasujący element
arr.some(x => x > 0)
true, jeśli pasuje dowolny element
arr.every(x => x > 0)
true, jeśli pasują wszystkie elementy
arr.includes(3)
Sprawdza obecność wartości
arr.sort((a, b) => a - b)
Sortowanie liczbowe rosnące
[...new Set(arr)]
Usuwa zduplikowane wartości
arr.flat(Infinity)
W pełni spłaszcza zagnieżdżone tablice
arr.at(-1)
Ostatni element (indeks ujemny)
Obiekty
9Object.keys(obj)
Tablica własnych kluczy wyliczalnych
Object.values(obj)
Tablica własnych wartości
Object.entries(obj)
Tablica par [klucz, wartość]
{ ...a, ...b }
Łączenie obiektów (spread)
Object.assign({}, a, b)
Kopiuje/łączy do celu
Object.freeze(obj)
Czyni obiekt niezmiennym
{ [key]: value }
Obliczana nazwa właściwości
obj.hasOwnProperty('x')
Sprawdza własną właściwość
structuredClone(obj)
Głęboka kopia obiektu
Async i obietnice
9async function f() {}
Deklaruje funkcję async
await fetch(url)
Czeka na spełnienie obietnicy
Promise.all([p1, p2])
Czeka na spełnienie wszystkich
Promise.allSettled([p1, p2])
Czeka na zakończenie wszystkich
Promise.race([p1, p2])
Zwraca pierwszą zakończoną
new Promise((res, rej) => {})
Tworzy obietnicę ręcznie
try { await f(); } catch (e) {}
Obsługa błędów asynchronicznych
setTimeout(fn, 1000)
Uruchamia po opóźnieniu (ms)
queueMicrotask(fn)
Planuje mikrozadanie
Sterowanie przepływem
9if (a) {} else if (b) {} else {}
Gałęzie warunkowe
a ? b : c
Wyrażenie warunkowe (ternary)
switch (x) { case 1: break; }
Rozgałęzienie wielokierunkowe
for (const x of arr) {}
Iteruje wartości (iterowalne)
for (const k in obj) {}
Iteruje klucze obiektu
while (cond) {}
Pętla, gdy warunek jest spełniony
arr.forEach((x, i) => {})
Wywołuje callback dla każdego elementu
break / continue
Wyjście lub pominięcie iteracji pętli
label: for (...) { break label; }
Wyjście z zagnieżdżonych pętli
DOM i zdarzenia
10document.querySelector('.x')
Pierwszy pasujący element
document.querySelectorAll('.x')
Wszystkie pasujące elementy (NodeList)
el.addEventListener('click', fn)
Dodaje nasłuchiwacz zdarzeń
el.classList.toggle('active')
Przełącza klasę CSS
el.dataset.id
Odczytuje atrybut data-id
el.textContent = 'hi'
Bezpiecznie ustawia tekst (bez HTML)
el.setAttribute('aria-hidden', true)
Ustawia atrybut
e.preventDefault()
Anuluje domyślną akcję
el.closest('.parent')
Najbliższy pasujący przodek
document.createElement('div')
Tworzy nowy element
Klasy i moduły
9class A extends B {}
Klasa z dziedziczeniem
constructor() { super(); }
Inicjalizuje i wywołuje rodzica
#private = 1;
Prywatne pole klasy
static create() {}
Metoda statyczna klasy
get value() {}
Akcesor get
export default fn;
Domyślny eksport modułu
export { a, b };
Nazwane eksporty modułu
import x, { y } from './m.js'
Import domyślny + nazwany
const m = await import('./m.js')
Import dynamiczny
Żaden wpis nie pasuje do „:q”.
Potrzebujesz pomocy?
Masz problem z tym narzędziem? Daj nam znać.