Шпаргалка по JavaScript
Удобный для поиска и печати справочник по современному JavaScript — синтаксис, массивы, строки, объекты, async/await, DOM и возможности ES2022+. Бесплатно.
Переменные и типы
10let x = 1;
Переменная с блочной областью, переназначаемая
const PI = 3.14;
Константа с блочной областью
typeof value
Возвращает тип как строку
Number('42')
Преобразовать строку в число
String(42)
Преобразовать значение в строку
parseInt('42px', 10)
Разобрать начальное целое (основание 10)
Boolean(0)
Привести значение к true/false
value ?? 'default'
Слияние с null (только null/undefined)
a?.b?.c
Опциональная цепочка, прерывается на null
Array.isArray(x)
Проверить, является ли значение массивом
Функции
9function add(a, b) { return a + b; }
Объявление именованной функции
const add = (a, b) => a + b;
Стрелочная функция с неявным возвратом
const f = (a = 1) => a;
Значение параметра по умолчанию
function f(...args) {}
Rest-параметры собираются в массив
f(...arr)
Распаковка массива в аргументы
const { a, b } = obj;
Деструктуризация объекта
const [x, y] = arr;
Деструктуризация массива
(function(){})()
Немедленно вызываемая функция (IIFE)
fn.bind(this)
Привязать фиксированный контекст this
Строки
10`Hello ${name}`
Интерполяция в шаблонном литерале
str.length
Количество символов
str.includes('a')
Проверить наличие подстроки
str.slice(0, 3)
Извлечь часть строки
str.replace(/a/g, 'b')
Заменить совпадения (regex)
str.split(',')
Разбить в массив
str.trim()
Убрать пробелы по краям
str.toUpperCase()
Преобразовать в верхний регистр
str.padStart(3, '0')
Дополнить начало до длины
str.at(-1)
Символ по индексу (поддерживает отрицательные)
Массивы
11arr.map(x => x * 2)
Преобразовать каждый элемент
arr.filter(x => x > 0)
Оставить подходящие элементы
arr.reduce((a, b) => a + b, 0)
Свести к одному значению
arr.find(x => x.id === 1)
Первый подходящий элемент
arr.some(x => x > 0)
true, если хотя бы один элемент подходит
arr.every(x => x > 0)
true, если все элементы подходят
arr.includes(3)
Проверить наличие значения
arr.sort((a, b) => a - b)
Числовая сортировка по возрастанию
[...new Set(arr)]
Удалить дубликаты значений
arr.flat(Infinity)
Полностью развернуть вложенные массивы
arr.at(-1)
Последний элемент (отрицательный индекс)
Объекты
9Object.keys(obj)
Массив собственных перечислимых ключей
Object.values(obj)
Массив собственных значений
Object.entries(obj)
Массив пар [ключ, значение]
{ ...a, ...b }
Слияние объектов (spread)
Object.assign({}, a, b)
Скопировать/слить в целевой объект
Object.freeze(obj)
Сделать объект неизменяемым
{ [key]: value }
Вычисляемое имя свойства
obj.hasOwnProperty('x')
Проверить собственное свойство
structuredClone(obj)
Глубокое клонирование объекта
Асинхронность и промисы
9async function f() {}
Объявить async-функцию
await fetch(url)
Ждать разрешения промиса
Promise.all([p1, p2])
Ждать разрешения всех
Promise.allSettled([p1, p2])
Ждать завершения всех
Promise.race([p1, p2])
Разрешить первым завершившимся
new Promise((res, rej) => {})
Создать промис вручную
try { await f(); } catch (e) {}
Обработать асинхронные ошибки
setTimeout(fn, 1000)
Запустить с задержкой (мс)
queueMicrotask(fn)
Запланировать микрозадачу
Управление потоком
9if (a) {} else if (b) {} else {}
Условные ветви
a ? b : c
Тернарное выражение
switch (x) { case 1: break; }
Многовариантное ветвление
for (const x of arr) {}
Перебор значений (итерируемые)
for (const k in obj) {}
Перебор ключей объекта
while (cond) {}
Цикл, пока условие истинно
arr.forEach((x, i) => {})
Запустить колбэк для каждого элемента
break / continue
Выйти или пропустить итерацию цикла
label: for (...) { break label; }
Выйти из вложенных циклов
DOM и события
10document.querySelector('.x')
Первый подходящий элемент
document.querySelectorAll('.x')
Все подходящие элементы (NodeList)
el.addEventListener('click', fn)
Привязать обработчик события
el.classList.toggle('active')
Переключить CSS-класс
el.dataset.id
Прочитать атрибут data-id
el.textContent = 'hi'
Безопасно задать текст (без HTML)
el.setAttribute('aria-hidden', true)
Задать атрибут
e.preventDefault()
Отменить действие по умолчанию
el.closest('.parent')
Ближайший подходящий предок
document.createElement('div')
Создать новый элемент
Классы и модули
9class A extends B {}
Класс с наследованием
constructor() { super(); }
Инициализировать и вызвать родителя
#private = 1;
Приватное поле класса
static create() {}
Статический метод класса
get value() {}
Геттер-аксессор
export default fn;
Экспорт модуля по умолчанию
export { a, b };
Именованные экспорты модуля
import x, { y } from './m.js'
Импорт по умолчанию + именованные
const m = await import('./m.js')
Динамический импорт
Нет записей, соответствующих «:q».
Нужна помощь?
Возникла проблема с этим инструментом? Сообщите нам.