Ściąga JavaScript
Przeszukiwalna, gotowa do druku referencja nowoczesnego JavaScriptu: składnia, tablice, ciągi, obiekty, async/await, DOM i funkcje ES2022+. Za darmo.
Variables & types
10let x = 1;
Block-scoped, reassignable variable
const PI = 3.14;
Block-scoped constant binding
typeof value
Returns the type as a string
Number('42')
Convert a string to a number
String(42)
Convert a value to a string
parseInt('42px', 10)
Parse a leading integer (base 10)
Boolean(0)
Coerce a value to true/false
value ?? 'default'
Nullish coalescing (null/undefined only)
a?.b?.c
Optional chaining, short-circuits on null
Array.isArray(x)
Check whether a value is an array
Functions
9function add(a, b) { return a + b; }
Named function declaration
const add = (a, b) => a + b;
Arrow function with implicit return
const f = (a = 1) => a;
Default parameter value
function f(...args) {}
Rest parameters collect into an array
f(...arr)
Spread an array into arguments
const { a, b } = obj;
Object destructuring
const [x, y] = arr;
Array destructuring
(function(){})()
Immediately-invoked function (IIFE)
fn.bind(this)
Bind a fixed this context
Strings
10`Hello ${name}`
Template literal interpolation
str.length
Number of characters
str.includes('a')
Check if a substring exists
str.slice(0, 3)
Extract part of a string
str.replace(/a/g, 'b')
Replace matches (regex)
str.split(',')
Split into an array
str.trim()
Remove surrounding whitespace
str.toUpperCase()
Convert to upper case
str.padStart(3, '0')
Pad the start to a length
str.at(-1)
Character at index (supports negatives)
Arrays
11arr.map(x => x * 2)
Transform each element
arr.filter(x => x > 0)
Keep matching elements
arr.reduce((a, b) => a + b, 0)
Reduce to a single value
arr.find(x => x.id === 1)
First matching element
arr.some(x => x > 0)
True if any element matches
arr.every(x => x > 0)
True if all elements match
arr.includes(3)
Check for a value
arr.sort((a, b) => a - b)
Numeric ascending sort
[...new Set(arr)]
Remove duplicate values
arr.flat(Infinity)
Fully flatten nested arrays
arr.at(-1)
Last element (negative index)
Objects
9Object.keys(obj)
Array of own enumerable keys
Object.values(obj)
Array of own values
Object.entries(obj)
Array of [key, value] pairs
{ ...a, ...b }
Merge objects (spread)
Object.assign({}, a, b)
Copy/merge into a target
Object.freeze(obj)
Make an object immutable
{ [key]: value }
Computed property name
obj.hasOwnProperty('x')
Check for an own property
structuredClone(obj)
Deep clone an object
Async & promises
9async function f() {}
Declare an async function
await fetch(url)
Pause until a promise resolves
Promise.all([p1, p2])
Wait for all to resolve
Promise.allSettled([p1, p2])
Wait for all to settle
Promise.race([p1, p2])
Resolve with the first to settle
new Promise((res, rej) => {})
Create a promise manually
try { await f(); } catch (e) {}
Handle async errors
setTimeout(fn, 1000)
Run after a delay (ms)
queueMicrotask(fn)
Schedule a microtask
Control flow
9if (a) {} else if (b) {} else {}
Conditional branches
a ? b : c
Ternary expression
switch (x) { case 1: break; }
Multi-way branch
for (const x of arr) {}
Iterate values (iterables)
for (const k in obj) {}
Iterate object keys
while (cond) {}
Loop while a condition holds
arr.forEach((x, i) => {})
Run a callback per element
break / continue
Exit or skip a loop iteration
label: for (...) { break label; }
Break out of nested loops
DOM & events
10document.querySelector('.x')
First matching element
document.querySelectorAll('.x')
All matching elements (NodeList)
el.addEventListener('click', fn)
Attach an event listener
el.classList.toggle('active')
Toggle a CSS class
el.dataset.id
Read a data-id attribute
el.textContent = 'hi'
Set text safely (no HTML)
el.setAttribute('aria-hidden', true)
Set an attribute
e.preventDefault()
Cancel the default action
el.closest('.parent')
Nearest matching ancestor
document.createElement('div')
Create a new element
Classes & modules
9class A extends B {}
Class with inheritance
constructor() { super(); }
Initialize and call the parent
#private = 1;
Private class field
static create() {}
Static method on the class
get value() {}
Getter accessor
export default fn;
Default module export
export { a, b };
Named module exports
import x, { y } from './m.js'
Default + named imports
const m = await import('./m.js')
Dynamic import
Żaden wpis nie pasuje do „:q”.
O Ściąga JavaScript
Ta ściągawka JavaScript to przeszukiwalne, jednostronicowe kompendium nowoczesnego języka: zmienne i typy, funkcje, ciągi znaków, tablice, obiekty, funkcje asynchroniczne i obietnice, sterowanie przepływem, DOM i zdarzenia oraz klasy i moduły. Każdy wpis łączy prawdziwy fragment kodu z jednolinijkowym wyjaśnieniem tego, co robi.
Została napisana z myślą o JavaScript, którego ludzie faktycznie używają dzisiaj (let i const, funkcje strzałkowe, destrukturyzacja, spread, opcjonalne łańcuchowanie, literały szablonowe, async/await i moduły ES) dzięki czemu sprawdza się też jako szybkie przypomnienie, gdy wracasz z innego języka.
Cała ściągawka ładuje się po stronie klienta i jest darmowa. Filtruj ją na żywo za pomocą pola wyszukiwania, przeskakuj między sekcjami dzięki przyklejonemu spisowi treści, kliknij dowolny fragment, aby go skopiować, i wydrukuj stronę jako podręczne kompendium JavaScript.
Jak korzystać z Ściąga JavaScript
- Otwórz ściągawkę i przejrzyj listę sekcji: od Zmiennych i typów przez DOM i zdarzenia po Klasy i moduły.
- Wpisz coś w pole wyszukiwania, aby filtrować każdy wiersz na żywo; licznik dopasowań pokazuje, ile fragmentów pasuje.
- Użyj przyklejonego spisu treści, aby przejść bezpośrednio do sekcji takiej jak Async i obietnice.
- Kliknij fragment kodu lub jego ikonę kopiowania, aby skopiować kod do schowka.
- Kliknij Drukuj, aby uzyskać czystą, przyjazną do druku kopię całego kompendium.
Najczęściej zadawane pytania
Dziewięć sekcji: zmienne i typy, funkcje, ciągi znaków, tablice, obiekty, async i obietnice, sterowanie przepływem, DOM i zdarzenia oraz klasy i moduły: każda jako gotowe do skopiowania fragmenty z krótkimi opisami.
Tak. Fragmenty wykorzystują bieżącą składnię (let/const, funkcje strzałkowe, destrukturyzację, opcjonalne łańcuchowanie, async/await, klasy i moduły ES) odzwierciedlając JavaScript ES2022+ zamiast przestarzałych wzorców.
Tak. Kliknięcie dowolnego fragmentu kodu lub ikony kopiowania, która pojawia się po najechaniu na wiersz, natychmiast umieszcza go w schowku z krótkim potwierdzeniem "Skopiowano!".
Tak. Przycisk Drukuj generuje czysty układ z usuniętym paskiem wyszukiwania, nawigacją i przyciskami, więc wydrukowane strony zawierają wyłącznie fragmenty kodu i ich opisy.
Tak. Jest darmowa, ładuje się w całości w Twojej przeglądarce i nie wymaga konta.
Popularne wyszukiwania
ściągawka javascript
ściągawka js
metody tablic javascript
metody tekstowe javascript
promisy i async await javascript
metody obiektów javascript
metody dom js
przewodnik składni javascript
Potrzebujesz pomocy?
Masz problem z tym narzędziem? Daj nam znać.