ES6+ возможности

↑ 1.4 JavaScript: основы · ← Предыдущая · → Следующая

Желательно~3 мин чтенияУровень: junior

Зачем это на собесе

Современный синтаксис: ожидают свободного владения деструктуризацией, spread, ?., ??, модулями.

Объяснение

ВозможностьПример
let/const, стрелкиconst f = (a) => a * 2
Шаблонные строки`Привет, ${name}`
Деструктуризацияconst { a, b: { c = 1 } = {}, ...rest } = obj; const [x, , y = 0] = arr;
Spread / rest[...a, ...b], { ...o, x: 1 }, function f(...args)
Параметры по умолчаниюfunction f(a, b = a * 2)
Короткая запись, вычисляемые ключи{ name, [key]: 1, method() {} }
Классы, #private, static, геттерыclass A { #x = 1; static create() {} }
Модулиimport { a } from "./a.js", export default
Promise, async/awaitасинхронный код
Итераторы, генераторы, for...ofобход коллекций
Map, Set, WeakMap, Symbol, BigIntновые структуры
Optional chaining, nullisha?.b?.[0]?.(), x ?? "default"
Логические присваиванияa ||= 1, a ??= 1, a &&= 1
Array.at, Object.hasOwn, structuredClone, Array.toSortedновые методы
Top-level awaitв модулях
Intl, Temporal (в разработке)локали и даты
const { data: orders = [], error } = await api.get("/orders");
const total = orders.reduce((s, { price, qty = 1 }) => s + price * qty, 0);
user?.address?.street ?? "Не указано";
const merged = { ...defaults, ...options };   // порядок важен: последний побеждает

Нюансы и подводные камни

  • ?. возвращает undefined, а не бросает ошибку: не маскируйте им реальные ошибки.
  • ?? не срабатывает на 0 и "", в отличие от ||.
  • Деструктуризация с null бросает TypeError; значения по умолчанию срабатывают только на undefined.
  • Spread копирует поверхностно.
  • Приватные поля #x недоступны снаружи и в JSON.stringify.

Практика

  1. Перепишите старый ES5-код на современный синтаксис.
  2. Используйте деструктуризацию параметров и значения по умолчанию в API-обёртке.
  3. Проверьте совместимость (browserslist, caniuse) и транспиляцию Babel/esbuild.

Вопросы с ответами

Связанные темы