На одну сторінку
Шпаргалка · JavaScript Essentials
Те, що варто тримати під рукою. Якщо рядок незрозумілий — повернись у відповідний урок, не гугли десять статей поспіль.
Значення
| Що | Як |
|---|
| Оголосити | const total = 0; let count = 0; |
| Перевірити тип | typeof value // "string" | "number" | ... |
| Масив — це масив | Array.isArray(value) |
| Порожньо навмисно | value === null |
| Значення немає | value === undefined |
| Строга рівність | a === b // без зведення типів |
Рядки й числа
| Що | Як |
|---|
| Зібрати текст | `${item}: ${qty} шт.` |
| Обрізати пробіли | raw.trim() |
| Розбити й склеїти | text.split(" ") parts.join(", ") |
| Шматок рядка | text.slice(0, 3) |
| Провідний нуль | String(5).padStart(2, "0") // "05" |
| Рядок у число | Number("42") parseInt("42px", 10) |
| Округлити для виведення | value.toFixed(2) // рядок |
| Упіймати NaN | Number.isNaN(value) |
Масиви
| Що | Як |
|---|
| Останній | items.at(-1) |
| Перетворити | items.map((item) => item.title) |
| Відібрати | items.filter((item) => item.price > 200) |
| Знайти один | items.find((item) => item.id === id) |
| Згорнути в число | items.reduce((sum, n) => sum + n, 0) |
| Копія | [...items] items.slice() |
| Сортування чисел | [...items].sort((a, b) => a - b) |
| Без повторів | [...new Set(items)] |
Об'єкти
| Що | Як |
|---|
| Ключ зі змінної | user[field] |
| Розібрати | const { id, city } = user; |
| У параметрах | function label({ id, city }) {} |
| Копія з правкою | { ...user, city: "Paris" } |
| Ключі й пари | Object.keys(obj) Object.entries(obj) |
| Безпечно вглиб | order.customer?.city ?? "немає" |
DOM, події, проміси
| Що | Як |
|---|
| Знайти | document.querySelector("#total") |
| Знайти всі | document.querySelectorAll(".row") |
| Текст | el.textContent = "1450 ₽" |
| Класи | el.classList.toggle("is-open") |
| Створити й вставити | list.appendChild(document.createElement("li")) |
| Підписатися | btn.addEventListener("click", handler) |
| Форма | event.preventDefault(); field.value.trim() |
| Дочекатися | const data = await load(); |