Какие ключевые возможности появились в ES6 и последующих версиях?
JuniorJavaScript #javascript #es6
Вопрос
Какие важные изменения принёс ES6 (ECMAScript 2015) и более поздние версии стандарта?
Короткий ответ
ES6 — крупнейшее обновление JavaScript за всю историю языка: блочная область видимости (let/const), классы, модули, стрелочные функции, промисы, деструктуризация и многое другое. Последующие ежегодные версии (ES2016+) добавляют более точечные, но полезные улучшения.
Подробный ответ
Главное в ES6 (2015):
let/const— переменные с блочной областью видимости вместоvar.- Стрелочные функции — короткий синтаксис, лексический
this. - Шаблонные строки — интерполяция и многострочные строки.
- Деструктуризация массивов и объектов.
class/extends— синтаксис ООП поверх прототипов.- Модули (
import/export) — стандартная система модулей вместо CommonJS/AMD. Promise— стандартный примитив для асинхронного кода.Map/Set— коллекции для уникальных значений и пар ключ-значение с сохранением порядка вставки и любым типом ключа.
Полезные добавления следующих версий (ES2016+):
Array.prototype.includes()(ES2016) — проверка на вхождение элемента без сравнения индексов.- Оператор возведения в степень
**(ES2016). Object.values()/Object.entries()(ES2017) — получить значения/пары объекта как массив.Object.fromEntries()(ES2019) — обратная операция: массив пар → объект.- Nullish coalescing
??(ES2020) — в отличие от||, подставляет значение по умолчанию только дляnull/undefined, а не для любого falsy (0,''). - Optional chaining
?.(ES2020) — безопасный доступ к вложенным свойствам.
Пример
// Nullish coalescing vs ||
const count = 0
console.log(count || 42) // 42 — 0 это falsy, что не то, что нужно
console.log(count ?? 42) // 0 — 0 не является null/undefined
// Object.entries / fromEntries
const obj = { a: 1, b: 2 }
const doubled = Object.fromEntries(
Object.entries(obj).map(([key, value]) => [key, value * 2])
)
// { a: 2, b: 4 }
// Map с любыми типами ключей
const cache = new Map([
['foo', 'bar'],
[someObject, 'значение по объекту-ключу']
])
Дополнительные вопросы
- Чем
Mapлучше обычного объекта в роли словаря? - В чём разница между
??и||и когда это действительно важно? - Как ES-модули (
import/export) соотносятся с CommonJS (require)?