5.01. Справочник по JavaScript
Справочник по JavaScript
📚 Типы, операторы, выражения, инструкции
🔹 Типы данных
| Тип | Описание | Проверка (typeof) | Примечания |
|---|---|---|---|
undefined | Значение по умолчанию для неинициализированных переменных и отсутствующих свойств | 'undefined' | Единственное значение этого типа |
null | Преднамеренное отсутствие значения | 'object' (историческая ошибка) | null instanceof Object → false |
boolean | Логический тип: true, false | 'boolean' | Приводится из любого значения через Boolean(x) или !!x |
number | 64-битное число с плавающей точкой по IEEE 754 | 'number' | Включает NaN, +0, -0, Infinity, -Infinity |
bigint | Целое число произвольной точности | 'bigint' | Создаётся суффиксом n, напр.: 123n, BigInt("123") |
string | Последовательность UTF-16 кодовых единиц | 'string' | Неизменяема, индексация — str[i] |
symbol | Уникальный идентификатор | 'symbol' | Symbol(description?), Symbol.for(key), Symbol.keyFor(sym) |
object | Коллекция ключ-значение или экземпляр | 'object' | Включает массивы, функции (typeof fn === 'function'), даты, регэкспы, и т.д. |
function | Вызываемый объект | 'function' | Подтип объекта, имеет [[Call]] и [[Construct]] внутренние слоты |
⚠️
typeof null === 'object'— ошибка спецификации с 1995 г., сохранена для совместимости.
🔹 Операторы (в порядке приоритета, сверху вниз)
| Приоритет | Оператор | Ассоциативность | Описание |
|---|---|---|---|
| 21 | . [] ?. | Лево | Доступ к свойству, опциональная цепочка |
| 20 | new (с аргументами), new.target, import.meta | Право | Создание экземпляра, метаинформация |
| 19 | ++ -- (постфиксные) | Лево | Инкремент/декремент после выражения |
| 18 | ++ -- (префиксные), + - (унарные), ! ~, typeof, void, delete | Право | Унарные операции |
| 17 | ** | Право | Возведение в степень |
| 16 | * / % | Лево | Арифметика |
| 15 | + - (бинарные) | Лево | Сложение/вычитание (конкатенация при строках) |
| 14 | << >> >>> | Лево | Побитовые сдвиги |
| 13 | < <= > >=, in, instanceof | Лево | Сравнения и проверки принадлежности |
| 12 | == != === !== | Лево | Равенство/неравенство (== — с приведением) |
| 11 | & | Лево | Побитовое И |
| 10 | ^ | Лево | Побитовое XOR |
| 9 | | | Лево | Побитовое ИЛИ |
| 8 | && | Лево | Логическое И (short-circuit) |
| 7 | || | Лево | Логическое ИЛИ (short-circuit) |
| 6 | ?? | Лево | Nullish coalescing (a ?? b → b, если a null или undefined) |
| 5 | ? : | Право | Тернарный условный оператор |
| 4 | = += -= *= /= %= **= <<= >>= >>>= &= ^= |= &&= ||= ??= | Право | Присваивания (включая логические и nullish compound) |
| 3 | , | Лево | Последовательное вычисление |
✅ Примеры:
a ??= b; // a = a ?? b
a &&= b; // a = a && b
a \|\|= b; // a = a \|\| b
🔹 Инструкции (statements)
| Инструкция | Синтаксис | Примечания |
|---|---|---|
var, let, const | var x; let y = 1; const z = 2; | var — функциональная область видимости, let/const — блочная; const требует инициализацию |
if / else | if (cond) stmt else stmt | Условие приводится к boolean |
switch | switch (expr) { case val: …; break; default: … } | Сравнение ===, fallthrough без break |
for | for (init; cond; step) stmt | init может быть let/const |
for…in | for (prop in obj) stmt | Перебирает перечислимые собственные и унаследованные строковые ключи |
for…of | for (value of iterable) stmt | Работает с итерируемыми (Array, String, Map, Set, генераторы и др.) |
while, do…while | while (cond) stmt; do stmt while (cond) | do…while гарантированно выполнится 1 раз |
try…catch…finally | try { … } catch (e) { … } finally { … } | catch может быть без параметра (ES2019+) |
throw | throw expr; | Выбрасывает исключение (обычно Error или наследник) |
return | return; / return value; | Только внутри функции (включая стрелочные и методы) |
break, continue | break [label]; / continue [label]; | Может использоваться с метками для выхода из вложенных циклов |
with | with (obj) stmt | Запрещён в strict mode — не используйте |
debugger | debugger; | Останавливает выполнение, если отладчик подключён |
label: | label: for … | Метка для break/continue |
function, class, import, export | Декларативные конструкции | Поднимаются (hoisting), но class и const/let — temporal dead zone |
✅ Блочная область видимости:
{
let x = 1;
const y = 2;
}
// x, y недоступны вне блока
🔹 Выражения (expressions) — основные формы
| Категория | Примеры |
|---|---|
| Литералы | 42, "str", true, null, undefined, /regex/g, [], {}, function(){}, () => {}, class {}, 123n, Symbol() |
| Шаблонные строки | Hello ${name}, text.raw, теггированные: Hello ${x} |
| Деструктуризация | const {a, b: c = 10} = obj;, const [x, ...rest] = arr; |
| Распространение (spread) | [...arr], {...obj}, fn(...args) |
| Остаток (rest) | function f(a, ...rest), const [x, ...tail] = arr |
| Операторы | Все перечисленные выше |
| Вызовы | fn(), obj.method(), new C() |
| Стрелочные функции | x => x * 2, (a, b) => { return a + b } |
| Классы | class C { constructor() {…} method() {…} static s() {…} } |
| Async/await | async function f() { await p; }, const v = await expr; |
Операторы yield, yield* | Внутри генераторов: function* gen() { yield 1; } |
📚 Стандартные встроенные объекты (built-in objects)
🔹 Object
Статические методы
| Метод | Аргументы | Возвращает | Описание | Особенности |
|---|---|---|---|---|
Object.keys(obj) | объект | string[] | Перечислимые собственные строковые ключи | Не включает символы, не включает унаследованные |
Object.values(obj) | объект | any[] | Значения по перечислимым собственным строковым ключам | Порядок как в keys() |
Object.entries(obj) | объект | [string, any][] | Пары [ключ, значение] | Порядок как в keys() |
Object.fromEntries(iterable) | итерируемое (например, entries()) | объект | Создаёт объект из пар | Обратная операция к entries() |
Object.getOwnPropertyNames(obj) | объект | string[] | Все собственные строковые ключи (перечислимые + неперечислимые) | Не включает символы |
Object.getOwnPropertySymbols(obj) | объект | symbol[] | Все собственные символьные ключи | Включает неперечислимые символы |
Object.getOwnPropertyDescriptors(obj) | объект | { [P in keyof obj]: PropertyDescriptor } | Объект с дескрипторами всех собственных свойств | Аналог getOwnPropertyDescriptor для всех свойств |
Object.getOwnPropertyDescriptor(obj, prop) | объект, ключ | PropertyDescriptor | undefined | Дескриптор свойства | Для несуществующего — undefined |
Object.defineProperty(obj, prop, descriptor) | объект, ключ, PropertyDescriptor | объект | Определяет или изменяет одно свойство | Может сделать свойство неперечислимым, незаписываемым и т.д. |
Object.defineProperties(obj, descriptors) | объект, { [key]: PropertyDescriptor } | объект | Массовое определение свойств | |
Object.create(proto, [propertiesObject]) | прототип (null допустим), дескрипторы | объект | Создаёт объект с заданным [[Prototype]] и свойствами | Object.create(null) — полностью «чистый» объект |
Object.getPrototypeOf(obj) | объект | объект | null | [[Prototype]] объекта | Аналог obj.__proto__ (устаревшее) |
Object.setPrototypeOf(obj, proto) | объект, прототип | объект | Устанавливает [[Prototype]] | Избегайте — медленно, нарушает оптимизации |
Object.is(value1, value2) | два значения | boolean | Глубокое равенство без приведения | Object.is(NaN, NaN) → true, Object.is(0, -0) → false |
Object.hasOwn(obj, prop) | объект, ключ | boolean | Проверяет, есть ли собственное свойство с именем prop | Замена Object.prototype.hasOwnProperty.call(obj, prop) |
Object.freeze(obj) | объект | объект | Делает объект незамораживаемым (no-extend, все свойства non-writable, non-configurable) | Поверхностное действие |
Object.seal(obj) | объект | объект | Запрещает добавление/удаление свойств; делает их non-configurable | Запись разрешена, если writable: true |
Object.preventExtensions(obj) | объект | объект | Запрещает добавление новых свойств | Удаление и изменение существующих — разрешено |
Object.isFrozen(obj) | объект | boolean | Проверяет, заморожен ли объект | Все свойства non-writable & non-configurable, и [[Extensible]] === false |
Object.isSealed(obj) | объект | boolean | Проверяет, запечатан ли объект | Все свойства non-configurable, и [[Extensible]] === false |
Object.isExtensible(obj) | объект | boolean | Проверяет, можно ли расширять объект | false после preventExtensions, seal, freeze |
📌
PropertyDescriptor:interface PropertyDescriptor {
configurable?: boolean; // можно ли удалять/менять дескриптор
enumerable?: boolean; // будет ли в for..in / keys()
writable?: boolean; // можно ли перезаписать значение (только для data-свойств)
value?: any; // значение (data-свойство)
get?(): any; // геттер (accessor-свойство)
set?(v: any): void; // сеттер (accessor-свойство)
}⚠️
get/setиvalue/writableвзаимоисключающи.
🔹 Function
Свойства экземпляра (все функции наследуют от Function.prototype)
| Свойство / Метод | Тип | Описание |
|---|---|---|
length | number | Количество формальных параметров (до первого параметра с дефолтом или rest) |
name | string | Имя функции (инферится: function f() {} → 'f', const f = () => {} → 'f', ({ f() {} }).f.name → 'f') |
prototype | объект | Ссылка на объект-прототип для конструкторов (new f() наследует от f.prototype) |
call(thisArg, ...args) | метод | Вызывает функцию с заданным this и аргументами по отдельности |
apply(thisArg, argsArray) | метод | То же, но аргументы — массивоподобный объект |
bind(thisArg, ...args) | метод | Возвращает новую функцию с привязанным this и частично применёнными аргументами (currying) |
toString() | метод | Возвращает исходный код функции как строку (гарантировано только для определённых случаев, напр. function f() {}) |
✅ Примеры:
function f(a, b = 0, ...rest) {}
f.length; // 1 — до первого параметра с дефолтом
const bound = f.bind(null, 1);
bound(2, 3, 4); // f(1, 2, 3, 4)
Конструктор Function
new Function('x', 'y', 'return x + y');
// эквивалентно: function(x, y) { return x + y; }— создаёт функцию из строки кода; избегайте — нарушает scope, проблема безопасности.
🔹 Array
⚠️ Все методы ниже вызываются как
arr.method(...).
📌 Многие методы принимают необязательныйthisArg(2-й/3-й параметр), используемый какthisвнутри callback'а.
🔸 Мутабельные методы (изменяют исходный массив)
| Метод | Аргументы | Возвращает | Поведение |
|---|---|---|---|
push(...items) | элементы | number — новая длина | Добавляет в конец |
pop() | — | элемент | undefined | Удаляет последний |
unshift(...items) | элементы | number — новая длина | Добавляет в начало |
shift() | — | элемент | undefined | Удаляет первый |
splice(start, deleteCount?, ...items) | индекс, сколько удалить, вставить | any[] — удалённые элементы | Удаляет и/или вставляет; start может быть отрицательным |
reverse() | — | this | Инвертирует порядок (in-place) |
sort(compareFn?) | (a, b) => number | this | Сортирует лексикографически по умолчанию; мутирует; compareFn(a, b) < 0 → a до b |
fill(value, start?, end?) | значение, начало, конец | this | Заполняет диапазон значением |
copyWithin(target, start, end?) | куда, откуда, конец | this | Копирует часть массива в другое место (in-place) |
🔸 Немутабельные методы (возвращают новый массив / значение)
| Метод | Аргументы | Возвращает | Примечания |
|---|---|---|---|
concat(...items) | массивы / элементы | any[] | Объединяет; не мутирует |
slice(start?, end?) | начало, конец | any[] | Копия среза; end не включается |
map(callback, thisArg?) | (value, index, arr) => newValue | any[] | Трансформация |
filter(callback, thisArg?) | (value, index, arr) => boolean | any[] | Фильтрация |
flatMap(callback, thisArg?) | (value, index, arr) => any[] | any[] | map + flat(1) |
flat(depth = 1) | глубина (по умолчанию 1) | any[] | Уплощение; Infinity — полностью |
reduce(callback, initialValue?) | (acc, cur, idx, arr) => acc, начальное | any | Свёртка слева направо |
reduceRight(...) | то же | any | Свёртка справа налево |
every(callback, thisArg?) | (value, index, arr) => boolean | boolean | Все ли проходят условие |
some(callback, thisArg?) | (value, index, arr) => boolean | boolean | Есть ли хотя бы один |
find(callback, thisArg?) | (value, index, arr) => boolean | элемент | undefined | Первый, удовлетворяющий условию |
findLast(callback, thisArg?) | — | элемент | undefined | Последний, удовлетворяющий условию (ES2023) |
findIndex(callback, thisArg?) | — | number (индекс) | -1 | Индекс первого подходящего |
findLastIndex(callback, thisArg?) | — | number | -1 | Индекс последнего подходящего (ES2023) |
includes(value, fromIndex?) | значение, с какого индекса | boolean | Проверка наличия (NaN включён корректно) |
indexOf(value, fromIndex?) | значение, с какого индекса | number | -1 | Первое вхождение; ===, NaN не ищется |
lastIndexOf(value, fromIndex?) | — | number | -1 | Последнее вхождение |
at(index) | индекс (может быть отрицательным) | элемент | undefined | Безопасный доступ по индексу (ES2022) |
toReversed() | — | any[] | Немутабельный reverse() (ES2023) |
toSorted(compareFn?) | — | any[] | Немутабельный sort() (ES2023) |
toSpliced(start, deleteCount, ...items) | — | any[] | Немутабельный splice() (ES2023) |
with(index, value) | индекс, новое значение | any[] | Замена элемента без мутации (ES2023) |
🔸 Итераторы и статические методы
| Метод | Аргументы | Возвращает | Описание |
|---|---|---|---|
keys() | — | итератор 0, 1, 2, … | Индексы |
values() | — | итератор значений | То же, что [Symbol.iterator]() |
entries() | — | итератор [i, value] | Пары индекс-значение |
Array.isArray(value) | значение | boolean | Проверка, является ли value массивом |
Array.from(arrayLike, mapFn?, thisArg?) | массивоподобный, функция, this | any[] | Преобразует в массив + опционально маппит |
Array.of(...items) | элементы | any[] | Создаёт массив из аргументов (new Array(3) ≠ Array.of(3)) |
✅
Array.of(3)→[3],new Array(3)→[empty × 3]
🔹 String
Статические методы
| Метод | Аргументы | Возвращает | Описание |
|---|---|---|---|
String.fromCharCode(...codes) | коды (0–65535) | строка | UTF-16 (не поддерживает суррогатные пары напрямую) |
String.fromCodePoint(...codes) | коды (до 0x10FFFF) | строка | Поддерживает полный Unicode (ES2015) |
String.raw(callSite, ...substitutions) | вызов теггированной строки | строка | «Сырая» интерполяция без экранирования (для шаблонов) |
Методы экземпляра
| Метод | Аргументы | Возвращает | Примечания |
|---|---|---|---|
length | — | number | Количество кодовых единиц UTF-16 (не символов!) |
charAt(index) | индекс | string | Пустая строка, если вне диапазона |
charCodeAt(index) | индекс | number (0–65535) | Код UTF-16 единицы |
codePointAt(index) | индекс | number (0–0x10FFFF) | undefined | Полный Unicode code point (ES2015) |
at(index) | индекс (может быть отрицательным) | string | undefined | Безопасный доступ (ES2022) |
concat(...strings) | строки | string | Объединение (редко используется — лучше `a${b}`) |
includes(search, fromIndex?) | подстрока, начало | boolean | Поиск подстроки |
indexOf(search, fromIndex?) | подстрока, начало | number | -1 | Позиция первого вхождения |
lastIndexOf(search, fromIndex?) | — | number | -1 | Последнее вхождение |
startsWith(search, position?) | префикс, начало | boolean | Начинается ли с… |
endsWith(search, length?) | суффикс, длина проверки | boolean | Заканчивается ли на… |
repeat(count) | число ≥0 | string | Повторение строки |
padStart(targetLength, padString?) | длина, заполнитель | string | Дополняет слева до длины |
padEnd(targetLength, padString?) | — | string | Дополняет справа |
trim() | — | string | Удаляет пробелы с обоих концов |
trimStart() / trimLeft() | — | string | Удаляет слева |
trimEnd() / trimRight() | — | string | Удаляет справа |
toLowerCase() / toUpperCase() | — | string | Регистр (по локали, но без указания — «default») |
toLocaleLowerCase(locales?) / toLocaleUpperCase(locales?) | локали (BIC код) | string | Локализованный регистр (например, турецкий I) |
normalize(form = 'NFC') | 'NFC', 'NFD', 'NFKC', 'NFKD' | string | Unicode нормализация |
split(separator?, limit?) | разделитель (строка | RegExp), лимит | string[] | Разбиение |
substring(indexStart, indexEnd?) | начало, конец | string | Без отрицательных индексов; автоматически сортирует аргументы |
slice(start, end?) | начало, конец | string | Поддерживает отрицательные индексы; end не включается |
substr(start, length?) | начало, длина | string | ❗ Устаревший, избегайте — не везде одинаково реализован |
match(regexp) | RegExp | строка | RegExpMatchArray | null | Поиск по регэкспу (без флага g) |
matchAll(regexp) | RegExp (должен иметь флаг g) | итератор RegExpMatchArray | Все совпадения (ES2020) |
search(regexp) | RegExp | строка | number | -1 | Индекс первого совпадения |
replace(search, replaceValue) | подстрока | RegExp, строка | функция | string | Замена первого совпадения (если search — строка) |
replaceAll(search, replaceValue) | то же | string | Замена всех совпадений (ES2021) |
replaceAll требует: если search — строка, replaceValue — строка; если RegExp — не может иметь флаг g (ошибка) | |||
localeCompare(compareString, locales?, options?) | строка, локали, опции | number (-1,0,1) | Локализованное сравнение |
[Symbol.iterator]() | — | итератор строковых символов | Поддержка for..of по символам (не кодовым единицам!) |
✅
for (const ch of "🙂")→ один символ (эмодзи), не два суррогата.
🔹 Number
Константы
| Константа | Значение |
|---|---|
Number.EPSILON | 2⁻⁵² ≈ 2.220446049250313e-16 — машинное эпсилон для number |
Number.MAX_VALUE | ≈ 1.7976931348623157e+308 |
Number.MIN_VALUE | ≈ 5e-324 — наименьшее положительное нормализованное |
Number.MAX_SAFE_INTEGER | 2⁵³ - 1 = 9007199254740991 |
Number.MIN_SAFE_INTEGER | -(2⁵³ - 1) |
Number.POSITIVE_INFINITY | Infinity |
Number.NEGATIVE_INFINITY | -Infinity |
Number.NaN | NaN |
Статические методы
| Метод | Описание |
|---|---|
Number.isFinite(value) | true, если число и не ±Infinity, не NaN |
Number.isInteger(value) | true, если число и целое (в пределах safe integer) |
Number.isSafeInteger(value) | true, если целое и в диапазоне [MIN_SAFE_INTEGER, MAX_SAFE_INTEGER] |
Number.isNaN(value) | true, если value — NaN (без приведения!) |
Number.parseFloat(string) | Аналог глобального parseFloat |
Number.parseInt(string, radix?) | Аналог глобального parseInt |
Методы экземпляра
| Метод | Аргументы | Возвращает | Примечания |
|---|---|---|---|
toExponential(fractionDigits?) | число цифр после точки | строка | Научная запись: 1.23e+2 |
toFixed(fractionDigits = 0) | число цифр после точки | строка | Округление, не экспоненциальная форма |
toPrecision(precision?) | общее число значащих цифр | строка | Автоматически выбирает формат |
toLocaleString(locales?, options?) | локали, опции | строка | Форматирование по локали (деньги, %, дата и т.п. — через Intl.NumberFormat) |
valueOf() | — | number | Возвращает примитив |
🔹 Math
Все методы — статические.
| Метод | Описание |
|---|---|
Math.abs(x) | Модуль |
Math.sign(x) | -1, 0, -0, 1, NaN |
Math.floor(x), Math.ceil(x), Math.round(x), Math.trunc(x) | Округления |
Math.fround(x) | Приведение к 32-битному float |
Math.min(...values), Math.max(...values) | Мин/макс (возвращает -Infinity/Infinity, если аргументов нет) |
Math.clamp(x, min, max) | ❗ Не существует в ES2024 — часто эмулируется как Math.min(Math.max(x, min), max) |
Math.random() | [0, 1) — равномерное распределение |
Math.seedrandom | ❗ Не существует — нет встроенного способа засидить ГПСЧ |
Math.sqrt(x), Math.cbrt(x) | Квадратный, кубический корень |
Math.hypot(...values) | √(x² + y² + …) — избегает переполнения |
Math.pow(base, exponent) | base ** exponent — устаревший, используйте ** |
Math.exp(x), Math.expm1(x) | eˣ, eˣ - 1 |
Math.log(x), Math.log1p(x), Math.log2(x), Math.log10(x) | Логарифмы |
Math.sin(x), cos, tan, asin, acos, atan, atan2(y, x) | Тригонометрия (в радианах) |
Math.sinh(x), cosh, tanh | Гиперболические функции |
Math.imul(a, b) | 32-битное целочисленное умножение (например, для хешей) |
Math.fround(x) | Приведение к float32 |
Math.clz32(x) | Count Leading Zeros в 32-битном представлении |
Math.signbit(x) | ❗ Не существует |
🔹 BigInt
Создание
const a = 123n;
const b = BigInt(123);
const c = BigInt("123456789012345678901234567890");
❗ Нельзя смешивать
numberиbigintв арифметике:1n + 1→TypeError.
✅ Допустимо:1n + BigInt(1),Number(1n).
Операторы
Поддерживают: +, -, *, /, %, **, <<, >>, >>> (но >>> возвращает bigint, не number), &, \|, ^, ~, <, <=, >, >=, ===, !==, ==, != (но 1n == 1 → true, 1n === 1 → false).
Методы
| Метод | Описание |
|---|---|
BigInt.asIntN(bits, bigint) | Обрезает до bits бит со знаком |
BigInt.asUintN(bits, bigint) | Обрезает до bits бит без знака |
bigint.toString(radix?) | Строка в указанной системе счисления (2–36) |
🔹 Boolean, Symbol, Error
Boolean
Boolean(x)— приведение к логическому (falseдля0,"",null,undefined,NaN,false)- Не имеет полезных методов экземпляра.
Symbol
| Метод | Описание |
|---|---|
Symbol(description?) | Уникальный символ; description только для toString() |
Symbol.for(key) | Глобальный реестр символов — возвращает один и тот же символ по key |
Symbol.keyFor(sym) | Возвращает key из глобального реестра или undefined |
Symbol.iterator | Имя метода итератора (obj[Symbol.iterator]) |
Symbol.toStringTag | Имя для Object.prototype.toString.call(obj) → "[object Tag]" |
Symbol.hasInstance | Кастомизация instanceof |
Symbol.isConcatSpreadable | Управляет поведением Array.prototype.concat |
Symbol.species | Кастомизация конструктора для производных (map, slice и др.) |
Symbol.match, Symbol.replace, Symbol.search, Symbol.split | Кастомизация поведения String.prototype.* для объектов |
Error и подклассы
| Конструктор | Применение |
|---|---|
Error(message?) | Общая ошибка |
EvalError | Ошибки eval() — устарело |
RangeError | Выход за пределы (например, Array(-1)) |
ReferenceError | Обращение к несуществующей переменной в strict mode |
SyntaxError | Ошибки разбора кода |
TypeError | Несоответствие типов (например, null.property) |
URIError | Ошибки encodeURI, decodeURI |
AggregateError(errors, message?) (ES2021) | Группа ошибок (например, Promise.any при всех отклонениях) |
Свойства экземпляра:
name: имя конструктора ('TypeError')message: сообщениеstack: стек-трейс (не стандартизирован, но есть везде)
📚 Коллекции, итерабельность, регулярные выражения, дата и время
🔹 Map
Хранит пары ключ–значение, где ключ может быть любого типа (включая объекты и символы). Порядок вставки сохраняется.
Конструктор
new Map(); // пустая коллекция
new Map(iterable); // iterable → [[key1, val1], [key2, val2], …]
new Map([ ['a', 1], [obj, 2] ]);
⚠️ Если
iterableне предоставляет пары —TypeError.
⚠️new Map({ a: 1 })не работает — объект не итерируем по парам.
Методы экземпляра
| Метод | Аргументы | Возвращает | Поведение |
|---|---|---|---|
set(key, value) | ключ, значение | this | Добавляет или обновляет запись |
get(key) | ключ | значение | undefined | Возвращает значение по ключу |
has(key) | ключ | boolean | Есть ли ключ в карте |
delete(key) | ключ | boolean | Удаляет запись; true, если была |
clear() | — | undefined | Удаляет все записи |
size | — | number | Количество записей (геттер) |
keys() | — | итератор ключей | Сохраняет порядок вставки |
values() | — | итератор значений | |
entries() | — | итератор [key, value] | То же, что [Symbol.iterator]() |
forEach(callback, thisArg?) | (value, key, map) => void | undefined | Перебор в порядке вставки |
Сравнение ключей
— использует SameValueZero алгоритм:
0 === -0→trueNaN === NaN→true- Объекты сравниваются по ссылке
+0и-0считаются одинаковыми
✅ Пример:
const m = new Map();
m.set(NaN, 'nan');
m.get(NaN); // 'nan'
m.set(0, 'zero');
m.set(-0, 'minus zero');
m.get(0); // 'minus zero' — перезаписано
Преимущества перед объектом
- Ключи любого типа
- Нет конфликта с наследованием (
hasOwnPropertyне нужен) - Размер известен мгновенно
- Нет проблем с перечислением и
__proto__ - Гарантированный порядок
🔹 Set
Хранит уникальные значения любого типа. Порядок вставки сохраняется.
Конструктор
new Set(); // пусто
new Set(iterable); // дедупликация по SameValueZero
Методы экземпляра
| Метод | Аргументы | Возвращает | Поведение |
|---|---|---|---|
add(value) | значение | this | Добавляет, если ещё нет |
has(value) | значение | boolean | Присутствует ли значение |
delete(value) | значение | boolean | Удаляет; true, если было |
clear() | — | undefined | Очищает |
size | — | number | Количество элементов |
values() | — | итератор значений | То же, что keys() и [Symbol.iterator]() |
entries() | — | итератор [value, value] | Для совместимости с Map |
forEach(callback, thisArg?) | (value, value, set) => void | undefined |
✅ Пример дедупликации:
const unique = [...new Set([1, 2, 2, 3, NaN, NaN])];
// [1, 2, 3, NaN]
🔹 WeakMap
Хранит пары ключ–значение, где ключи должны быть объектами, а значения — любыми.
Ключи хранятся слабо — если на объект нет других ссылок, он может быть удалён GC.
Ограничения
- Нет
size,clear(),keys(),values(),entries(),forEach() - Нельзя итерировать
- Нет не-объектных ключей (
new WeakMap().set('str', 1)→TypeError)
Методы
| Метод | Аргументы | Возвращает |
|---|---|---|
set(key, value) | объект, значение | this |
get(key) | объект | значение | undefined |
has(key) | объект | boolean |
delete(key) | объект | boolean |
Применение
- Привязка данных к DOM-узлам без утечек памяти
- Кэширование, привязанное к жизненному циклу объекта
- Метаданные, не нарушающие инкапсуляцию
✅ Пример:
const privateData = new WeakMap();
class Counter {
constructor() {
privateData.set(this, { count: 0 });
}
increment() {
const data = privateData.get(this);
data.count++;
}
}
🔹 WeakSet
Хранит уникальные объекты, слабо. Аналогично
WeakMap, но только ключи, без значений.
Методы
| Метод | Аргументы | Возвращает |
|---|---|---|
add(value) | объект | this |
has(value) | объект | boolean |
delete(value) | объект | boolean |
Применение
- Отслеживание «посещённых» объектов
- Маркировка объектов без изменения их структуры (
if (seen.has(obj)) …)
🔹 Итерабельность и протоколы
Итерация: [Symbol.iterator]
Объект итерируем, если у него есть метод obj[Symbol.iterator], возвращающий итератор.
Итератор — объект с методом .next(), возвращающим { value: any, done: boolean }.
✅ Встроенные итерируемые объекты:
Array,String,Map,Set,TypedArray,arguments,NodeList, генераторы.
Асинхронная итерация: [Symbol.asyncIterator]
Аналогично, но .next() возвращает Promise<{ value, done }>.
Поддерживается в for await…of.
✅ Пример:
const asyncIterable = {
[Symbol.asyncIterator]() {
let i = 0;
return {
next() {
return Promise.resolve(i < 3 ? { value: i++, done: false } : { done: true });
}
};
}
};
(async () => {
for await (const x of asyncIterable) console.log(x); // 0, 1, 2
})();
for…of vs for…in
| Конструкция | Итерирует | Пример |
|---|---|---|
for (x of iterable) | значения итератора | for (const ch of "ab") → 'a', 'b' |
for (key in obj) | перечислимые строковые ключи (собственные + унаследованные) | for (const k in {a:1}) → 'a' |
⚠️
for…inне гарантирует порядок (хотя в современных движках — порядок вставки для строк).
⚠️for…inможет вернуть методы из прототипа — используйтеObject.hasOwn(obj, key).
🔹 Генераторы (function*)
Генератор — функция, возвращающая итератор и позволяющая приостанавливать выполнение с помощью yield.
Синтаксис
function* gen() {
yield 1;
yield 2;
return 3; // значение в { value: 3, done: true }
}
const g = gen();
g.next(); // { value: 1, done: false }
g.next(); // { value: 2, done: false }
g.next(); // { value: 3, done: true }
g.next(); // { value: undefined, done: true }
yield и yield*
yield expr— приостанавливает и возвращаетexpryield* iterable— делегирует итерацию другому итерируемому (включая другие генераторы)
✅ Пример делегирования:
function* range(start, end) {
for (let i = start; i < end; i++) yield i;
}
function* combined() {
yield* range(1, 3);
yield* range(5, 7);
}
[...combined()]; // [1, 2, 5, 6]
Управление генератором
| Метод | Аргумент | Эффект |
|---|---|---|
next(value?) | значение | Возобновляет выполнение: yield expr возвращает value |
throw(error) | ошибка | Выбрасывает ошибку в точке yield внутри генератора |
return(value?) | значение | Принудительно завершает генератор: возвращает { value, done: true } |
✅ Пример двусторонней связи:
function* echo() {
const x = yield 'start';
yield x.toUpperCase();
}
const g = echo();
g.next(); // { value: 'start', done: false }
g.next('hello'); // { value: 'HELLO', done: false }
Асинхронные генераторы (async function*)
- Возвращают асинхронный итератор
- Могут использовать
awaitиyield yieldприостанавливает до разрешенияawait, ноyieldсам по себе синхронен
✅ Пример:
async function* fetchPages(url) {
let page = 1;
while (true) {
const res = await fetch(`${url}?page=${page}`);
const data = await res.json();
if (data.items.length === 0) return;
yield data.items;
page++;
}
}
(async () => {
for await (const items of fetchPages('/api/data')) {
console.log(items);
}
})();
🔹 RegExp
Синтаксис
/regex/flags
new RegExp('regex', 'flags')
Флаги (ES2024)
| Флаг | Описание |
|---|---|
g | Глобальный поиск (все совпадения) |
i | Игнорировать регистр |
m | Многострочный режим (^ и $ — начало/конец строки, а не всего текста) |
s | DotAll — . совпадает с \n (ES2018) |
u | Unicode — корректная обработка суррогатных пар и классов (например, \p{Letter}) (ES2015) |
y | Sticky — поиск только с текущей позиции (lastIndex) (ES2015) |
d | Indices — включает indices в результат exec() (ES2022) |
⚠️
/./u.test('🙂')→true,/./.test('🙂')→true, но/.+/даст два совпадения безu.
Группы
| Синтаксис | Название | Доступ |
|---|---|---|
(…) | Захватывающая группа | result[1], result.groups (если именованная) |
(?:…) | Незахватывающая | Нет в результатах |
(?<name>…) | Именованная захватывающая | result.groups.name |
(?=…) | Позитивный просмотр вперёд | Не захватывается |
(?!…) | Негативный просмотр вперёд | |
(?<=…) | Позитивный просмотр назад (ES2018) | |
(?<!…) | Негативный просмотр назад (ES2018) |
Методы
| Метод | На что вызывается | Аргументы | Возвращает | Особенности |
|---|---|---|---|---|
test(str) | RegExp | строка | boolean | Обновляет lastIndex, если g/y |
exec(str) | RegExp | строка | RegExpExecArray | null | При g/y — последовательные вызовы дают следующие совпадения; содержит index, input, groups (если есть именованные), indices (если d) |
str.match(regexp) | строка | регэксп | RegExpMatchArray | null | Без g — как exec; с g — массив строк без доп. данных |
str.matchAll(regexp) | строка | регэксп (должен иметь g) | итератор RegExpExecArray | Все совпадения с полными данными (ES2020) |
str.search(regexp) | строка | регэксп | number | -1 | Индекс первого совпадения |
str.replace(search, replace) | строка | регэксп/строка, строка/функция | string | При search = строка — замена только первого вхождения; при регэкспе без g — тоже первое |
str.replaceAll(search, replace) | строка | строка, строка ИЛИ регэксп с g, строка/функция | string | Все вхождения (ES2021) |
✅ Пример с именованными группами:
const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const m = re.exec('2025-11-22');
m.groups; // { year: '2025', month: '11', day: '22' }
✅ Замена с функцией:
'a1b2'.replace(/\d/g, d => (Number(d) * 2).toString());
// 'a2b4'
🔹 Date
Основан на количестве миллисекунд с 1970-01-01T00:00:00.000Z (Unix timestamp × 1000).
Внутренне хранится как UTC, но методы интерпретируют в локальной временной зоне, если не указано иное.
Конструктор
| Вызов | Результат |
|---|---|
new Date() | Текущее время |
new Date(value) | По timestamp (мс) |
new Date(dateString) | По строке (ISO 8601 предпочтительно) |
new Date(year, month, date?, hours?, minutes?, seconds?, ms?) | Локальное время; month от 0 (янв) до 11 |
⚠️
new Date(2025, 11, 22)→ 22 декабря 2025, не ноября.
Методы экземпляра (геттеры/сеттеры)
| Префикс | Локальное время | UTC |
|---|---|---|
| `(get | set)FullYear` | год (4 цифры) |
| `(get | set)Month` | месяц (0–11) |
| `(get | set)Date` | день месяца (1–31) |
| `(get | set)Hours` | часы (0–23) |
| `(get | set)Minutes, Seconds, Milliseconds` | |
getTime() / setTime(ms) | timestamp в мс | — |
getTimezoneOffset() | смещение локальной зоны от UTC в минутах (Москва: -180 зимой, -120 летом) | — |
Форматирование
| Метод | Описание |
|---|---|
toString() | Человекочитаемая строка в локальном времени и зоне |
toDateString(), toTimeString() | Только дата / только время |
toISOString() | Строка в формате ISO 8601 (UTC): YYYY-MM-DDTHH:mm:ss.sssZ |
toUTCString() | Устаревший формат (Fri, 22 Nov 2025 12:00:00 GMT) |
toLocaleDateString(locales?, options?) | Локализованная дата |
toLocaleTimeString(locales?, options?) | Локализованное время |
toLocaleString(locales?, options?) | Дата + время |
toJSON() | То же, что toISOString() — используется JSON.stringify |
✅ Пример:
new Date().toISOString(); // '2025-11-22T12:34:56.789Z'
Статические методы
| Метод | Описание |
|---|---|
Date.now() | Текущий timestamp в мс (рекомендуется вместо new Date().getTime()) |
Date.parse(string) | Парсинг строки → timestamp (не все форматы) |
Date.UTC(year, month, …) | Возвращает timestamp для UTC-времени (аналогично конструктору, но интерпретирует как UTC) |
⚠️
Date.parse('2025-11-22')→ UTC-полдень (12:00:00Z), не полночь.
✅ Для полночи:Date.parse('2025-11-22T00:00:00Z').
📚 Асинхронность, модули, DOM API, глобальные функции, strict mode, Web APIs
🔹 Асинхронность: Promise, async/await, очередь задач
Promise
Объект, представляющий окончательный результат асинхронной операции (выполнен или отклонён).
Конструктор
new Promise((resolve, reject) => {
// Асинхронная логика
if (успех) resolve(value);
else reject(reason); // reason — обычно Error
});
⚠️ Executor вызывается синхронно при создании
Promise.
Статические методы
| Метод | Аргументы | Возвращает | Поведение |
|---|---|---|---|
Promise.resolve(value) | значение | Promise | Если value — Promise, возвращает его; если thenable — оборачивает; иначе — fulfilled с value |
Promise.reject(reason) | причина | Promise | rejected с reason |
Promise.all(iterable) | итерируемое Promise-ов | Promise<value[]> | Выполняется, когда все fulfilled; отклоняется при первом reject |
Promise.allSettled(iterable) | итерируемое | Promise<Array<{ status: 'fulfilled'|'rejected', value|reason }>> | Ждёт всех, возвращает статус каждого (ES2020) |
Promise.race(iterable) | итерируемое | Promise | Результат первого settled (fulfilled или rejected) |
Promise.any(iterable) | итерируемое | Promise | Выполняется при первом fulfilled; отклоняется, только если все rejected → AggregateError (ES2021) |
Promise.withResolvers() | — | { promise: Promise, resolve: fn, reject: fn } | Упрощает создание Promise вне executor’а (ES2024, Stage 4) |
✅ Пример
withResolvers(удобно для кэширования, отмены):function createDeferred() {
const { promise, resolve, reject } = Promise.withResolvers();
return { promise, resolve, reject };
}
Методы экземпляра
| Метод | Аргументы | Возвращает | Описание |
|---|---|---|---|
then(onFulfilled?, onRejected?) | функции | Promise | Цепочка обработки; onRejected ловит ошибки только из предыдущего Promise |
catch(onRejected) | функция | Promise | Эквивалент then(null, onRejected) |
finally(onFinally) | функция | Promise | Вызывается в любом случае (fulfilled/rejected), не меняет результат (ES2018) |
⚠️
returnвнутриthenоборачивается вPromise.resolve(...).
⚠️ Исключение внутриthen/catchпревращается в rejectedPromise.
async / await
Синтаксический сахар над
Promise.
Правила
async functionвсегда возвращаетPromise.awaitможно использовать только внутриasync function(или на верхнем уровне модуля — top-level await, ES2022).await exprприостанавливает выполнение до завершенияexpr(еслиexprнеPromise— оборачивается вPromise.resolve(expr)).
Обработка ошибок
// Вариант 1: try/catch
async function f() {
try {
const res = await fetch('/api');
const data = await res.json();
return data;
} catch (e) {
console.error('Fetch failed', e);
throw e;
}
}
// Вариант 2: .catch на уровне вызова
f().catch(e => { … });
✅ Не пишите
awaitв цепочке без необходимости:// Плохо — последовательно:
const a = await p1;
const b = await p2;
// Хорошо — параллельно:
const [a, b] = await Promise.all([p1, p2]);
Очередь задач
| Тип | Примеры | Когда выполняется |
|---|---|---|
| Микрозадачи (microtask) | Promise.then/catch/finally, queueMicrotask, MutationObserver, process.nextTick (в Node) | После текущего синхронного блока, до следующего макротаска и рендеринга |
| Макротаски (task) | setTimeout, setInterval, setImmediate (Node), requestAnimationFrame, I/O, UI-события | В порядке поступления, после микрозадач и рендеринга |
✅
queueMicrotask(callback)— стандартный способ добавить микрозадачу (ES2020).
📌 Порядок:
Синхронный код
→ микрозадачи (все, в цикле, пока очередь не пуста)
→ рендеринг (если нужно)
→ макротаск (один)
→ микрозадачи (опять все)
→ рендеринг → макротаск → …
🔹 ES Modules (ESM)
Стандартизированная система модулей, основанная на
import/export.
Экспорт
| Синтаксис | Описание |
|---|---|
export const x = 1; | Именованный экспорт |
export { x, y as z }; | Экспорт существующих переменных (можно переименовать) |
export function f() {} | Именованный экспорт функции/класса |
export default expr; | Экспорт по умолчанию (один на модуль) |
export * from './other.js'; | Реэкспорт всех именованных |
export { x } from './other.js'; | Реэкспорт конкретных |
⚠️
export default function() {}— анонимная функция по умолчанию.
⚠️export default 42;— допустимо, но редко используется.
Импорт
| Синтаксис | Описание |
|---|---|
import { x, y as z } from './mod.js'; | Именованный импорт |
import defaultExport from './mod.js'; | Импорт по умолчанию |
import * as mod from './mod.js'; | Пространство имён (объект со всеми именованными) |
import def, { x } from './mod.js'; | Смешанный: дефолт + именованные |
import './side-effect.js'; | Импорт только для side effect’ов |
Динамический импорт
const module = await import('./mod.js');
module.default;
module.x;
— возвращает
Promise, разрешающийся в объект модуля.
— работает в любом контексте (даже не вasync).
— полезен для ленивой загрузки, условного импорта.
Особенности
- Строгий режим включён всегда
- Асинхронная загрузка (в браузере — сетевые запросы; в средах без I/O — мгновенно)
- Hoisting: импорты поднимаются и выполняются до тела модуля
- Иммутабельность импортов:
import { x }— live binding (еслиxизменится в модуле, изменится и здесь)
✅ Пример live binding:
// counter.js
export let count = 0;
export function inc() { count++; }
// main.js
import { count, inc } from './counter.js';
console.log(count); // 0
inc();
console.log(count); // 1 — обновилось
🔹 DOM API (основные интерфейсы и методы)
Все приведённые ниже интерфейсы встроены в глобальный объект в браузере.
Window (глобальный объект в браузере)
| Свойство / Метод | Описание |
|---|---|
document | Корневой объект DOM |
location, history, navigator, screen | API окружения |
addEventListener(type, listener, options?) | Регистрация обработчика события |
setTimeout(handler, timeout, ...args) | Отложенное выполнение (макротаск) |
setInterval(handler, interval, ...args) | Повторяющееся выполнение |
clearTimeout(id), clearInterval(id) | Отмена |
requestAnimationFrame(callback) | Вызов перед следующей перерисовкой (макротаск) |
cancelAnimationFrame(id) | Отмена |
fetch(url, options?) | HTTP-запросы (возвращает Promise<Response>) |
localStorage, sessionStorage | Хранилища (см. ниже) |
alert, confirm, prompt | Диалоги (избегайте в продакшене) |
Document
| Метод | Аргументы | Возвращает | Описание |
|---|---|---|---|
getElementById(id) | строка | Element | null | Быстрый поиск по id |
querySelector(selector) | CSS-селектор | Element | null | Первый элемент |
querySelectorAll(selector) | CSS-селектор | NodeList (статичный) | Все элементы |
createElement(tagName, options?) | имя тега, { is: customElementName } | Element | Создание элемента |
createTextNode(data) | строка | Text | Текстовый узел |
createDocumentFragment() | — | DocumentFragment | Лёгкий контейнер для групповой вставки |
importNode(node, deep) | узел, глубина | клон узла | Без привязки к текущему документу |
adoptNode(node) | узел | узел | Перемещает узел из другого документа |
addEventListener(...) | — | — | Обработка событий на всём документе |
Element
Наследует от Node.
| Свойство / Метод | Описание |
|---|---|
id, className, classList | id, строка классов, объект DOMTokenList с методами add, remove, toggle, contains |
dataset | Объект для data-* атрибутов (data-user-id → dataset.userId) |
style | Объект CSSStyleDeclaration для inline-стилей (el.style.color = 'red') |
getAttribute(name), setAttribute(name, value), removeAttribute(name) | Работа с атрибутами |
hasAttribute(name) | Проверка наличия атрибута |
innerHTML, outerHTML | Чтение/запись HTML-содержимого (опасно при ненадёжных данных — XSS) |
textContent | Текстовое содержимое (без тегов, безопасно для вставки) |
appendChild(node), prepend(node), append(...nodesOrStrings), before(...), after(...), replaceWith(...) | Вставка/замена (современные методы — ES2017+) |
remove() | Удаление себя из родителя |
closest(selector) | Ближайший предок, соответствующий селектору (включая себя) |
matches(selector) | Соответствует ли элемент селектору |
querySelector, querySelectorAll | Поиск внутри элемента |
Node
| Свойство / Метод | Описание |
|---|---|
parentNode, parentElement | Родитель (parentElement — только Element, иначе null) |
childNodes, children | NodeList всех дочерних узлов / только элементов |
firstChild, lastChild, firstElementChild, lastElementChild | Первый/последний узел / элемент |
nextSibling, previousSibling, nextElementSibling, previousElementSibling | Соседи |
nodeType | Тип узла: 1 (Element), 3 (Text), 8 (Comment), 9 (Document), 11 (DocumentFragment) |
nodeName | Имя: 'DIV', '#text', '#comment', '#document' |
cloneNode(deep) | Клонирование узла |
EventTarget
| Метод | Описание |
|---|---|
addEventListener(type, listener, options?) | options: { capture: false, once: false, passive: false, signal: AbortSignal } |
removeEventListener(type, listener, options?) | Должен быть тот же listener и options (кроме signal) |
dispatchEvent(event) | Синтетическое событие |
✅ Используйте
AbortControllerдля массовой отмены:const ac = new AbortController();
el.addEventListener('click', handler, { signal: ac.signal });
ac.abort(); // отменяет все слушатели с этим сигналом
Event
| Свойство | Описание |
|---|---|
type | 'click', 'keydown', и т.д. |
target | Элемент, на котором произошло событие (цель) |
currentTarget | Элемент, на котором зарегистрирован обработчик |
bubbles | Всплывает ли событие |
cancelable | Можно ли отменить (preventDefault) |
defaultPrevented | Был ли вызван preventDefault |
stopPropagation() | Останавливает всплытие |
stopImmediatePropagation() | Останавливает всплытие и другие обработчики на этом элементе |
preventDefault() | Отменяет действие по умолчанию (например, отправку формы) |
🔹 Глобальные функции (не методы)
| Функция | Описание | Особенности |
|---|---|---|
eval(code) | Выполняет строку как код | ❗ Избегайте — нарушает scope, безопасность, оптимизации |
isFinite(value) | true, если число и не ±Infinity, не NaN | Приводит аргумент к числу |
isNaN(value) | true, если Number(value) — NaN | Приводит аргумент к числу |
parseFloat(string) | Парсит число до первого нецифрового символа | Поддерживает Infinity, +/-, .; игнорирует пробелы в начале |
parseInt(string, radix?) | Парсит целое число в системе счисления | radix по умолчанию: 10, но если строка начинается с 0x → 16; 0 → 8 (legacy, избегайте — всегда указывайте radix) |
encodeURI(uri) | Кодирует URI, кроме зарезервированных (:, /, ?, #, [, ], @, !, $, &, ', (, ), *, +, ,, ;, =) | Для всего URI |
decodeURI(encodedURI) | Декодирует encodeURI | |
encodeURIComponent(str) | Кодирует компонент URI (все спецсимволы) | Для параметров, фрагментов и т.п. |
decodeURIComponent(encodedStr) | Декодирует encodeURIComponent |
✅ Пример:
encodeURIComponent('кот+мышка?'); // '%D0%BA%D0%BE%D1%82%2B%D0%BC%D1%8B%D1%88%D0%BA%D0%B0%3F'
encodeURI('https://example.com/путь?п=1'); // 'https://example.com/%D0%BF%D1%83%D1%82%D1%8C?%D0%BF=1'
🔹 Strict mode ("use strict")
Режим с более строгими правилами и запретами.
Активация
- В начале скрипта:
"use strict"; - В начале функции: внутри
function() { "use strict"; … }
Изменения
| Поведение | В non-strict | В strict |
|---|---|---|
| Присваивание необъявленной переменной | Создаёт глобальное свойство | ReferenceError |
| Удаление переменных/функций | true | SyntaxError |
| Дублирование параметров | Допустимо | SyntaxError |
this в несвязанной функции | globalThis (в браузере — window) | undefined |
with | Допустим | SyntaxError |
arguments | Связаны с параметрами (изменение arguments[0] меняет a) | Не связаны (копия при входе) |
eval создаёт переменные в caller scope | Да | Нет — локальная область |
delete неconfigurable свойства | false | TypeError |
Восьмеричные литералы (010) | 8 | SyntaxError (используйте 0o10) |
✅ Модули и классы всегда в strict mode.
🔹 Web APIs (вне DOM, но в браузере)
fetch
fetch(url, {
method: 'GET', // 'POST', 'PUT', …
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data), // для POST/PUT
mode: 'cors', // 'same-origin', 'no-cors'
credentials: 'same-origin', // 'include', 'omit'
cache: 'default', // 'no-store', 'reload', 'force-cache', …
redirect: 'follow', // 'manual', 'error'
signal: ac.signal, // AbortSignal для отмены
integrity: 'sha256-…' // Subresource Integrity
})
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json(); // .text(), .blob(), .arrayBuffer()
});
⚠️
fetchне отклоняется при HTTP-ошибках (4xx/5xx) — только при сетевых сбоях.
URL и URLSearchParams
const url = new URL('https://example.com/path?x=1&y=2#frag');
url.protocol; // 'https:'
url.hostname; // 'example.com'
url.pathname; // '/path'
url.search; // '?x=1&y=2'
url.hash; // '#frag'
const params = new URLSearchParams(url.search);
params.get('x'); // '1'
params.set('z', '3');
params.toString(); // 'x=1&y=2&z=3'
url.search = params.toString();
localStorage / sessionStorage
| Метод | Описание |
|---|---|
setItem(key, value) | Сохраняет строку (value приводится к строке) |
getItem(key) | Возвращает строку или null |
removeItem(key) | Удаляет |
clear() | Очищает всё |
key(index) | Ключ по индексу |
length | Количество записей |
⚠️ Хранит только строки. Для объектов —
JSON.stringify/JSON.parse.
⚠️localStorage— постоянное (до очистки),sessionStorage— на сессию (вкладку).
AbortController / AbortSignal
const ac = new AbortController();
fetch('/long', { signal: ac.signal })
.catch(e => {
if (e.name === 'AbortError') console.log('Отменено');
});
// Где-то позже:
ac.abort(); // вызывает AbortError в fetch
— стандартный механизм отмены асинхронных операций.
📚 Продвинутые и системные механизмы JavaScript
🔹 Proxy
Объект-обёртка, позволяющая перехватывать и кастомизировать основные операции над другим объектом (target).
Конструктор
const proxy = new Proxy(target, handler);
target— любой объект (включая функции, массивы, дажеProxy);handler— объект с ловушками (traps) — методами, переопределяющими поведение.
Ловушки (traps) и их соответствие в Reflect
| Ловушка | Вызывается при | Аргументы | Аналог в Reflect | Значение по умолчанию |
|---|---|---|---|---|
get(target, prop, receiver) | proxy.prop, proxy['prop'] | target, ключ (string/symbol), receiver (обычно proxy) | Reflect.get(target, prop, receiver) | target[prop] |
set(target, prop, value, receiver) | proxy.prop = val | target, ключ, значение, receiver | Reflect.set(target, prop, value, receiver) | target[prop] = value |
has(target, prop) | prop in proxy | target, ключ | Reflect.has(target, prop) | prop in target |
deleteProperty(target, prop) | delete proxy.prop | target, ключ | Reflect.deleteProperty(target, prop) | delete target[prop] |
ownKeys(target) | Object.keys/values/entries(proxy), for…in, getOwnPropertyNames/Symbols | target | Reflect.ownKeys(target) | Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target)) |
getOwnPropertyDescriptor(target, prop) | Object.getOwnPropertyDescriptor(proxy, prop) | target, ключ | Reflect.getOwnPropertyDescriptor(target, prop) | Object.getOwnPropertyDescriptor(target, prop) |
defineProperty(target, prop, descriptor) | Object.defineProperty(proxy, prop, desc) | target, ключ, дескриптор | Reflect.defineProperty(target, prop, descriptor) | Object.defineProperty(target, prop, descriptor) |
preventExtensions(target) | Object.preventExtensions(proxy) | target | Reflect.preventExtensions(target) | Object.preventExtensions(target) |
getPrototypeOf(target) | Object.getPrototypeOf(proxy), proxy.__proto__ | target | Reflect.getPrototypeOf(target) | Object.getPrototypeOf(target) |
setPrototypeOf(target, proto) | Object.setPrototypeOf(proxy, proto) | target, прототип | Reflect.setPrototypeOf(target, proto) | Object.setPrototypeOf(target, proto) |
isExtensible(target) | Object.isExtensible(proxy) | target | Reflect.isExtensible(target) | Object.isExtensible(target) |
apply(target, thisArg, args) | proxy(...args) — если target функция | target, this, массив аргументов | Reflect.apply(target, thisArg, args) | target.apply(thisArg, args) |
construct(target, args, newTarget) | new proxy(...args) | target, аргументы, newTarget (обычно proxy) | Reflect.construct(target, args, newTarget) | new target(...args) |
✅ Пример: валидация присваивания
const validator = {
set(target, prop, value) {
if (prop === 'age' && (typeof value !== 'number' || value < 0)) {
throw new TypeError('age must be non-negative number');
}
return Reflect.set(target, prop, value);
}
};
const person = new Proxy({ age: 0 }, validator);
person.age = 25; // OK
person.age = -1; // TypeError
⚠️
Proxyне может сделать объект «более открытым», чемtarget. Например, если свойство non-configurable вtarget, его нельзя сделать configurable вProxy.
🔹 Reflect
Встроенный объект, предоставляющий методы для перехватываемых операций, аналогичные ловушкам
Proxy, но в виде функций.
Зачем нужен?
- Единообразный API для метапрограммирования
- Безопасные операции (не бросают исключения в случае неудачи — возвращают
false) - Используется в
Proxyпо умолчанию - Позволяет вызывать поведение по умолчанию в обработчиках
Proxy
Методы (все 13 — по одной на ловушку)
| Метод | Аналог в коде | Возвращает |
|---|---|---|
Reflect.get(target, prop, receiver?) | target[prop] | значение |
Reflect.set(target, prop, value, receiver?) | target[prop] = value | boolean (успех) |
Reflect.has(target, prop) | prop in target | boolean |
Reflect.deleteProperty(target, prop) | delete target[prop] | boolean |
Reflect.ownKeys(target) | Object.getOwnPropertyNames + getOwnPropertySymbols | string[] | symbol[] |
Reflect.getOwnPropertyDescriptor(target, prop) | — | PropertyDescriptor | undefined |
Reflect.defineProperty(target, prop, descriptor) | Object.defineProperty | boolean |
Reflect.preventExtensions(target) | Object.preventExtensions | boolean |
Reflect.getPrototypeOf(target) | Object.getPrototypeOf | объект | null |
Reflect.setPrototypeOf(target, proto) | Object.setPrototypeOf | boolean |
Reflect.isExtensible(target) | Object.isExtensible | boolean |
Reflect.apply(target, thisArg, args) | Function.prototype.apply | результат вызова |
Reflect.construct(target, args, newTarget?) | new target(...args) | экземпляр |
✅ Преимущество
Reflect.apply:// Безопасный вызов даже если fn.apply перезаписан:
Reflect.apply(Math.max, null, [1, 2, 3]); // 3
🔹 Symbol — well-known символы и их применение
Well-known символы — встроенные символы, определяющие поведение объектов в языке.
| Символ | Применение | Описание |
|---|---|---|
Symbol.iterator | obj[Symbol.iterator] | Должен возвращать итератор; делает объект итерируемым |
Symbol.asyncIterator | obj[Symbol.asyncIterator] | Для асинхронной итерации (for await…of) |
Symbol.toStringTag | Object.prototype.toString.call(obj) | Возвращаемое имя: '[object ' + tag + ']' |
Symbol.hasInstance | instanceof | Кастомизация проверки: obj[Symbol.hasInstance](value) |
Symbol.isConcatSpreadable | Array.prototype.concat | Если true — элемент раскрывается как массив |
Symbol.species | Array.prototype.map, slice, filter и др. | Конструктор для производных (new this.constructor[Symbol.species](...)) |
Symbol.match | String.prototype.match | Если Symbol.match в объекте — вызывается вместо RegExp.prototype[Symbol.match] |
Symbol.replace, Symbol.search, Symbol.split | String.prototype.replace/search/split | Аналогично match |
Symbol.toPrimitive | При приведении к примитиву (hint: 'number', 'string', 'default') | obj[Symbol.toPrimitive](hint) → примитив |
Symbol.unscopables | with (но with запрещён в strict mode) | Свойства, исключаемые из scope в with |
✅ Пример
Symbol.toStringTag:class Vector {
[Symbol.toStringTag] = 'Vector';
}
Object.prototype.toString.call(new Vector()); // '[object Vector]'
✅ Пример
Symbol.isConcatSpreadable:const arr = [1, 2];
arr[Symbol.isConcatSpreadable] = false;
[0].concat(arr); // [0, [1, 2]] — не раскрылось
🔹 Intl — интернационализация
Пакет API для локализации форматирования.
Intl.DateTimeFormat
new Intl.DateTimeFormat(locales?, options?).format(date);
Важные options:
dateStyle:'full','long','medium','short'timeStyle: аналогичноyear,month,day,hour,minute,second:'numeric','2-digit','long','short','narrow'timeZone:'Europe/Moscow','UTC'и др.hour12:true/false— 12-часовой формат
✅ Пример:
new Intl.DateTimeFormat('ru-RU', {
day: 'numeric',
month: 'long',
year: 'numeric',
timeZone: 'UTC'
}).format(new Date('2025-11-22T00:00:00Z'));
// '22 ноября 2025 г.'
Intl.NumberFormat
new Intl.NumberFormat(locales?, options?).format(number);
Важные options:
style:'decimal'(по умолчанию),'currency','percent','unit'currency:'RUB','USD'и др. (только приstyle: 'currency')currencyDisplay:'symbol','code','name'useGrouping:true/false— разделители тысячminimumIntegerDigits,minimumFractionDigits,maximumFractionDigitsunit:'meter','second','byte'и др. (приstyle: 'unit')
✅ Пример:
new Intl.NumberFormat('ru-RU', {
style: 'currency',
currency: 'RUB',
currencyDisplay: 'symbol'
}).format(1234.5);
// '1 234,50 ₽'
Intl.Collator
Сравнение строк с учётом локали.
const collator = new Intl.Collator('ru', { sensitivity: 'base' });
collator.compare('Ёж', 'Еж'); // 0 — считаются одинаковыми
['Ё', 'Е', 'А'].sort(collator.compare); // ['А', 'Е', 'Ё']
Остальные
| Конструктор | Назначение |
|---|---|
Intl.ListFormat | Форматирование списков: 'А, Б и В' (ES2021) |
Intl.RelativeTimeFormat | Относительное время: 'через 2 дня', '3 часа назад' (ES2021) |
Intl.PluralRules | Определение формы множественного числа по числу (для локализованных сообщений) |
Intl.Segmenter | Сегментация текста на графемы, слова, предложения (ES2022) |
✅ Пример
ListFormat:new Intl.ListFormat('ru', { style: 'long', type: 'conjunction' })
.format(['яблоки', 'груши', 'апельсины']);
// 'яблоки, груши и апельсины'
🔹 structuredClone(value, options?)
Глубокое клонирование со встроенными типами, без использования
JSON.stringify.
Поддерживаемые типы
- Все примитивы
Object,Array,Map,Set,Date,RegExp,Error,Boolean,String,Number,BigIntTypedArray,DataView,ArrayBuffer(по умолчанию — копия буфера; сtransfer— перемещение)Blob,File,CryptoKey(в браузере)- Циклические ссылки
SharedArrayBuffer— только еслиstructuredCloneвызван в том же агенте (thread)
Опции
structuredClone(value, {
transfer: [arrayBuffer1, arrayBuffer2], // передаёт владение (буферы становятся detached)
serializable: true // (опционально, редко) — только сериализуемые типы
});
✅ Пример:
const original = { a: 1, b: new Map([[1, 2]]) };
const copy = structuredClone(original);
copy.b.set(3, 4);
console.log(original.b.has(3)); // false — независимо
⚠️ Не клонирует:
- Функции
Symbol(кроме well-known)WeakMap,WeakSetDOM-узлы- Объекты с
Proxy
🔹 globalThis
Единая ссылка на глобальный объект во всех средах:
| Среда | До globalThis | globalThis |
|---|---|---|
| Браузер | window, self, frames | window |
| Web Worker | self | self |
| Node.js (с v12) | global | global |
✅ Используйте
globalThis, если пишете универсальный код.
🔹 Редкие конструкции и операторы
| Конструкция | Описание | Статус |
|---|---|---|
with (obj) stmt | Расширяет scope на свойства obj | Запрещён в strict mode — не используйте |
label: stmt | Метка для break/continue | Допустим, но редко нужен |
debugger; | Точка останова | Безопасен — игнорируется без отладчика |
void expr | Выполняет expr, возвращает undefined | Полезно в href="javascript:void(0)" или для гарантии undefined |
, (запятая) | Последовательное вычисление, возвращает последнее | Редко — например, в for (i = 0, j = 10; i < j; i++, j--) |
✅ Пример
void:const undef = void 0; // надёжнее, чем `undefined`, если переменная переопределена
🔹 Системные типы и API (низкоуровневые)
SharedArrayBuffer
Буфер памяти, доступный из нескольких потоков (Web Workers).
⚠️ Требует:
- HTTPS
- Отсутствие
Cross-Origin-Opener-Policy: same-originиCross-Origin-Embedder-Policy: require-corp(в современных браузерах — только при явной настройке COOP/COEP)
— иначеSharedArrayBufferне определён.
Atomics
Атомарные операции над
Int32Array/BigInt64Array, созданными наSharedArrayBuffer.
| Метод | Описание |
|---|---|
Atomics.load(typedArray, index) | Атомарное чтение |
Atomics.store(typedArray, index, value) | Атомарная запись |
Atomics.add/sub/and/or/xor/exchange/compareExchange | Операции с возвратом старого значения |
Atomics.wait(typedArray, index, value, timeout?) | Блокировка потока (только в Workers) |
Atomics.notify(typedArray, index, count?) | Пробуждение ожидающих потоков |
✅ Пример синхронизации:
// В основном потоке:
const sab = new SharedArrayBuffer(4);
const ia = new Int32Array(sab);
ia[0] = 0;
worker.postMessage({ sab });
// В Worker:
self.onmessage = e => {
const ia = new Int32Array(e.data.sab);
Atomics.wait(ia, 0, 0); // ждёт, пока ia[0] ≠ 0
console.log('Разрешено');
};
// Позже в основном потоке:
Atomics.store(ia, 0, 1);
Atomics.notify(ia, 0);
WebAssembly
Базовые API для работы с WASM (без деталей модулей).
| Объект / Метод | Назначение |
|---|---|
WebAssembly.compile(bytes) | Компиляция ArrayBuffer в WebAssembly.Module |
WebAssembly.instantiate(module, importObject?) | Создание экземпляра из модуля |
WebAssembly.instantiateStreaming(response, importObject?) | Прямая загрузка из fetch() |
WebAssembly.validate(bytes) | Проверка валидности байткода |
WebAssembly.Module | Скомпилированный модуль (можно кэшировать) |
WebAssembly.Instance | Выполняемый экземпляр (имеет .exports) |
✅ Минимальный пример:
// Простой WASM-модуль, возвращающий 42
const bytes = new Uint8Array([
0x00, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00, 0x01, 0x04, 0x01, 0x60, 0x00, 0x01, 0x7f,
0x03, 0x02, 0x01, 0x00, 0x07, 0x08, 0x01, 0x04, 0x6d, 0x61, 0x69, 0x6e, 0x00, 0x00,
0x0a, 0x05, 0x01, 0x03, 0x00, 0x41, 0x2a, 0x0b
]);
WebAssembly.instantiate(bytes).then(result => {
console.log(result.instance.exports.main()); // 42
});
🔹 Запрещённые, устаревшие и ненадёжные конструкции
| Конструкция | Проблема | Альтернатива |
|---|---|---|
__proto__ | Не стандартизировано как свойство (есть как accessor в аннексе B) | Object.getPrototypeOf, Object.setPrototypeOf |
Function.prototype.arguments, .caller | Устаревшее, отключено в strict mode | Используйте arguments внутри функции напрямую |
escape / unescape | Устаревшие, не соответствуют URI-стандартам | encodeURI, encodeURIComponent |
document.all | Non-standard, falsy, но typeof → 'undefined' | Избегайте — используется в детекции IE |
with | Ломает оптимизации, непредсказуемый scope | Не используйте |
new Array(len) для больших len | Может выделить память неявно | Array.from({ length: n }) или new Array(n).fill(0) при необходимости |