Шпаргалка 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'
Nullish-злиття (лише 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)
Розгорнути масив в аргументи (spread)
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)
Глибоке клонування об'єкта
Async та проміси
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”.
Потрібна допомога?
Виникла проблема з цим інструментом? Повідомте нас.