Шпаргалка по JavaScript

Бесплатно

Удобный для поиска и печати справочник по современному JavaScript: синтаксис, массивы, строки, объекты, async/await, DOM и возможности ES2022+. Бесплатно.

Variables & types

let 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

function 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

`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

arr.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

Object.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

async 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

if (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

document.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

class 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

Нет записей, соответствующих «:q».

О Шпаргалка по JavaScript

Эта шпаргалка по JavaScript: это удобная для поиска справка на одной странице по современному языку: переменные и типы, функции, строки, массивы, объекты, асинхронность и промисы, управление потоком, DOM и события, а также классы и модули. Каждая запись сопровождает реальный фрагмент кода однострочным объяснением того, что он делает.

Она написана с учётом того JavaScript, на котором действительно пишут сегодня (let и const, стрелочные функции, деструктуризация, spread, опциональная цепочка, шаблонные литералы, async/await и модули ES) так что она заодно служит быстрым напоминанием при переключении с другого языка.

Вся шпаргалка загружается на стороне клиента и бесплатна. Фильтруйте её вживую через строку поиска, переходите между разделами через закреплённое оглавление, кликайте по любому фрагменту для копирования и распечатывайте страницу для настольного справочника по JavaScript.

Как использовать Шпаргалка по JavaScript

Откройте шпаргалку и просмотрите список разделов: от «Переменные и типы» через «DOM и события» до «Классы и модули».
Вводите текст в строку поиска, чтобы отфильтровать каждую строку вживую; счётчик совпадений показывает, сколько фрагментов подходит.
Используйте закреплённое оглавление, чтобы перейти прямо к разделу, например «Асинхронность и промисы».
Нажмите на фрагмент или его значок копирования, чтобы скопировать код в буфер обмена.
Нажмите «Печать» для чистой, удобной для бумаги копии всей справки.

Часто задаваемые вопросы

Девять разделов: переменные и типы, функции, строки, массивы, объекты, асинхронность и промисы, управление потоком, DOM и события, а также классы и модули: каждый в виде готовых к копированию фрагментов с краткими описаниями.

Да. Фрагменты используют актуальный синтаксис (let/const, стрелочные функции, деструктуризацию, опциональную цепочку, async/await, классы и модули ES) отражая JavaScript ES2022+, а не устаревшие паттерны.

Да. Клик по любому фрагменту кода или значку копирования, появляющемуся при наведении на строку, мгновенно помещает его в буфер обмена с кратким подтверждением «Скопировано!».

Да. Кнопка «Печать» создаёт чистую верстку без строки поиска, навигации и кнопок, так что на распечатанных страницах остаются только фрагменты и их описания.

Да. Она бесплатна, полностью загружается в вашем браузере и не требует регистрации.

Шпаргалка по JavaScript

Variables & types

Functions

Strings

Arrays

Objects

Async & promises

Control flow

DOM & events

Classes & modules

О Шпаргалка по JavaScript

Как использовать Шпаргалка по JavaScript

Часто задаваемые вопросы

Что охватывает шпаргалка по JavaScript?

Соответствует ли она современному JavaScript?

Можно ли скопировать фрагмент одним кликом?

Можно ли распечатать шпаргалку?

Шпаргалка бесплатная?

Похожие инструменты

Популярные запросы

Встроить этот инструмент