Шпаргалка по JavaScript
Последнее обновление
Переменные (let, const, var)
Объявление значений; предпочитайте const, затем let, и избегайте var.
| Операция | Синтаксис |
|---|---|
| Блочная область, можно переназначать | let count = 0; |
| Блочная область, нельзя переназначать | const name = "Ada"; |
| Функциональная область (устаревшее) | var x = 1; |
| Объявить без значения | let result; |
| Несколько объявлений | let a = 1, b = 2; |
| Константный объект (содержимое изменяемо) | const user = {}; user.id = 1; |
Типы данных
Примитивные и ссылочные типы и способы их проверки.
| Тип | Пример |
|---|---|
| Число | let n = 42; |
| Строка | let s = "hi"; |
| Логический тип | let ok = true; |
| Массив | let arr = [1, 2, 3]; |
| Объект | let obj = { id: 1 }; |
| Null / undefined | let a = null;, let b; |
| Проверить тип | typeof n |
| Преобразовать | Number("7"), String(42), Boolean(0) |
Строки и шаблонные литералы
Создание и обработка текста.
| Операция | Синтаксис |
|---|---|
| Шаблонный литерал | Hi ${name}, age ${age} (оберните в обратные кавычки) |
| Длина | text.length |
| Верхний / нижний регистр | text.toUpperCase(), text.toLowerCase() |
| Убрать пробелы по краям | text.trim() |
| Заменить все вхождения | text.replaceAll("a", "b") |
| Разбить в массив | text.split(",") |
| Содержит | text.includes("js") |
| Срез | text.slice(0, 3) |
Массивы и методы массивов
Упорядоченные коллекции и методы их обхода.
| Операция | Синтаксис |
|---|---|
| Добавить / удалить в конце | arr.push(4), arr.pop() |
| Добавить / удалить в начале | arr.unshift(0), arr.shift() |
| Преобразовать каждый элемент | arr.map(x => x * 2) |
| Оставить подходящие элементы | arr.filter(x => x > 0) |
| Свести к одному значению | arr.reduce((sum, x) => sum + x, 0) |
| Найти элемент | arr.find(x => x.id === 1) |
| Проверка some / every | arr.some(f), arr.every(f) |
| Индекс значения | arr.indexOf(3), arr.includes(3) |
| Объединить в строку | arr.join(", ") |
Объекты
Коллекции ключ-значение.
| Операция | Синтаксис |
|---|---|
| Создать | const user = { id: 1, name: "Ada" }; |
| Доступ к свойству | user.name, user["name"] |
| Добавить / обновить свойство | user.age = 25; |
| Удалить свойство | delete user.age; |
| Получить все ключи / значения | Object.keys(user), Object.values(user) |
| Получить пары | Object.entries(user) |
| Объединить объекты | Object.assign({}, a, b) |
| Поверхностная копия | const copy = { ...user }; |
Управление потоком
Условия и циклы.
| Операция | Синтаксис |
|---|---|
| If / else if / else | if (x > 0) { … } else { … } |
| Тернарный оператор | const y = x > 0 ? 1 : 0; |
| Switch | switch (x) { case 1: … break; } |
| Цикл for | for (let i = 0; i < 5; i++) { … } |
| For-of (значения) | for (const item of arr) { … } |
| For-in (ключи) | for (const key in obj) { … } |
| Цикл while | while (x < 10) { … } |
Функции и стрелочные функции
Определение переиспользуемых вызываемых блоков.
| Операция | Синтаксис |
|---|---|
| Объявление функции | function add(a, b) { return a + b; } |
| Стрелочная функция | const add = (a, b) => a + b; |
| Стрелочная с одним аргументом | const sq = x => x * x; |
| Стрелочная без аргументов | const now = () => Date.now(); |
| Параметр по умолчанию | function f(x = 0) { … } |
| Rest-параметры | function f(...args) { … } |
| Немедленный вызов (IIFE) | (() => { … })(); |
Деструктуризация и spread
Распаковка значений и копирование/слияние структур.
| Операция | Синтаксис |
|---|---|
| Деструктуризация массива | const [a, b] = arr; |
| Деструктуризация объекта | const { id, name } = user; |
| Переименование при распаковке | const { id: userId } = user; |
| Значение по умолчанию | const { age = 0 } = user; |
| Spread массива | const all = [...a, ...b]; |
| Spread объекта | const next = { ...user, age: 25 }; |
| Rest при деструктуризации | const [first, ...rest] = arr; |
Промисы и async/await
Обработка асинхронной работы, например сетевых запросов.
| Операция | Синтаксис |
|---|---|
| Асинхронная функция | async function load() { … } |
| Ожидание промиса | const data = await fetch(url); |
| Then / catch | promise.then(res => …).catch(err => …) |
| Try / catch с await | try { await f(); } catch (e) { … } |
| Resolve / reject | Promise.resolve(1), Promise.reject(err) |
| Дождаться всех | await Promise.all([a, b]) |
| Первый завершившийся | await Promise.race([a, b]) |
Современный синтаксис JavaScript, который нужен чаще всего, на одной странице. Эта шпаргалка по JavaScript - быстрый справочник по повседневному ES6+: объявление переменных, методы строк и массивов, объекты, стрелочные функции, деструктуризация и async/await.
Всё здесь - стандартный JavaScript, который работает в современных браузерах и Node.js. Копируйте нужное или попробуйте любой фрагмент вживую в playground для JS - ничего устанавливать не нужно.
Часто задаваемые вопросы по шпаргалке JavaScript
Эта шпаргалка по JavaScript бесплатна?
Да. Эта шпаргалка по JavaScript полностью бесплатна, регистрация не требуется. Добавьте её в закладки и возвращайтесь, когда нужно посмотреть синтаксис, метод массива или паттерн асинхронного кода.
В чём разница между == и === в JavaScript?
== - это нестрогое равенство: оно приводит операнды к одному типу перед сравнением, поэтому 0 == "0" равно true. === - это строгое равенство: оно сравнивает и значение, и тип без приведения, поэтому 0 === "0" равно false. Почти во всех случаях предпочитайте === (и !==) - это предсказуемо и избавляет от неожиданных приведений типов.В чём разница между let, const и var?
const и let имеют блочную область видимости и появились в ES6; var имеет функциональную область видимости и старше. Используйте const для значений, которые никогда не переназначаете, let - для тех, что переназначаете, и избегайте var, чтобы не сталкиваться с проблемами всплытия (hoisting) и области видимости. Учтите, что содержимое объекта или массива, объявленного через const, всё равно можно менять - константной является только сама привязка.Можно ли практиковать JavaScript онлайн?
Да. Откройте playground для JS, чтобы выполнить любой фрагмент из этой шпаргалки прямо в браузере - ничего устанавливать не нужно. А если нужна структура, бесплатный интерактивный курс JavaScript от Coddy шаг за шагом проведёт вас от переменных и циклов до методов массивов и async/await.
Подходит ли эта шпаргалка для начинающих?
Да. Она построена от основ (переменные, типы данных, строки) к деструктуризации и async/await, так что верхние разделы можно использовать с первого дня и постепенно осваивать современные возможности ES6+.
Связанные ресурсы
Другие шпаргалки
