Возможности JavaScript ES6

ECMAScript 6 (ES6) — это значительное обновление языка JavaScript, которое привнесло множество новых возможностей, сделав JavaScript более мощным и эффективным. В этом руководстве подробно рассматривается ES6: даны развёрнутые объяснения и множество примеров кода, которые помогут освоить эти новые возможности.

Введение в ES6

ES6, также известный как ECMAScript 2015, принёс в JavaScript множество улучшений и новых функций. ECMAScript — это официальный стандарт, который реализует JavaScript, и ES6 стал самой крупной его редакцией с 1999 года. Эти изменения сделали язык более современным и удобным в работе, повысив как читаемость, так и удобство сопровождения кода.

В этом руководстве рассматриваются возможности, которые вы будете использовать чаще всего:

• Объявление переменных — let и const
• Функции — стрелочные функции и параметры по умолчанию
• Строки — шаблонные строки
• Работа с данными — деструктуризация, расширенные объектные литералы, rest/spread
• Асинхронный код — промисы
• Объектно-ориентированный код — классы и модули
• Новые коллекции и примитивы — Map, Set, WeakMap, WeakSet, Symbol, итераторы, генераторы и прокси

Сегодня каждый современный браузер и Node.js поддерживают ES6 нативно, поэтому эти возможности можно использовать без шага сборки. Каждый пример ниже можно запустить — редактируйте его и нажимайте «Запустить», чтобы поэкспериментировать.

Let и Const

Одно из самых заметных изменений в ES6 — появление let и const для объявления переменных. До ES6 единственным вариантом было var, у которого область видимости — функция и который поднимается (hoisting) таким образом, что часто приводит к неожиданным ошибкам. let и const имеют блочную область видимости и ведут себя более предсказуемо, поэтому в современном коде var практически не используется.

Let

Ключевое слово let позволяет объявлять переменные, область видимости которых ограничена блоком, инструкцией или выражением, в котором они используются.

В примере выше x, объявленный внутри блока if, — это отдельная переменная от x, объявленного снаружи. Это демонстрирует блочную область видимости, которую даёт let. С var оба присваивания относились бы к одной и той же переменной, и внешний console.log вывел бы 20.

На let и const также распространяется правило временной мёртвой зоны (temporal dead zone, TDZ): переменная существует с начала блока, но её нельзя прочитать или присвоить ей значение до момента выполнения объявления. Обращение к ней раньше приводит к ошибке ReferenceError, что позволяет отловить опечатки, которые var молча превратил бы в undefined.

Const

Ключевое слово const используется для объявления переменных, значения которых не предполагается изменять. У него блочная область видимости, как и у let.

В этом примере попытка повторно присвоить значение y приводит к ошибке, потому что const объявляет константу, значение которой изменить нельзя.

Распространённая путаница: const запрещает переприсваивание привязки, а не изменение значения. Содержимое объекта или массива, объявленного через const, можно менять — просто нельзя направить переменную на другой объект.

Стрелочные функции

Стрелочные функции предоставляют лаконичный синтаксис для написания функциональных выражений. Они также лексически связывают значение this, что делает их особенно удобными для написания коротких функций.

Здесь стрелочная функция add принимает два параметра и возвращает их сумму. Когда тело функции — это одно выражение, можно опустить фигурные скобки и ключевое слово return — значение выражения возвращается автоматически.

Более важное преимущество в том, что у стрелочных функций нет собственного this; они наследуют его из окружающей области видимости. До появления стрелочных функций колбэки часто теряли ожидаемый this, и разработчики обходили это с помощью const self = this или .bind(this). Стрелочные функции делают этот шаблонный код ненужным:

Шаблонные строки

Шаблонные строки упрощают создание строк, особенно при вставке переменных или выражений. Они используют обратные кавычки (```) вместо обычных кавычек.

Этот пример показывает, как шаблонные строки позволяют вставить переменную name прямо в строку, повышая читаемость и удобство. Плейсхолдер ${ ... } может содержать любое выражение, а не только переменную — например, `Total: ${price * qty}`. Шаблонные строки также могут занимать несколько строк без \n, поэтому с их помощью удобно писать форматированный вывод или небольшие фрагменты HTML прямо в коде.

Параметры по умолчанию

Параметры по умолчанию позволяют инициализировать параметры функции значениями по умолчанию, если значения не переданы.

В этом примере функция multiply присваивает b значение по умолчанию 1, если второй аргумент не передан, гарантируя, что функция всегда возвращает корректный результат.

Деструктуризирующее присваивание

Деструктуризирующее присваивание — удобный способ извлечения значений из массивов или объектов в отдельные переменные.

Деструктуризация массивов

Этот пример показывает, как деструктуризация массива позволяет присвоить значения массива numbers отдельным переменным a, b и c.

Деструктуризация объектов

В этом примере деструктуризация объекта извлекает свойства name и age из объекта person в отдельные переменные.

Расширенные объектные литералы

ES6 расширяет объектные литералы, позволяя использовать более лаконичный и читаемый синтаксис.

Здесь объект obj использует сокращённую запись свойств и определение методов, что делает объектный литерал более лаконичным.

Промисы

Промисы предоставляют способ более эффективной работы с асинхронными операциями, позволяя избежать «callback hell» и делая код более читаемым.

В этом примере создаётся промис, который разрешается через 1 секунду с сообщением 'Success!'. Метод then используется для обработки полученного значения.

Классы

ES6 ввёл классы, предоставив более понятный и лаконичный синтаксис для создания объектов и работы с наследованием.

Этот пример демонстрирует, как классы в ES6 предлагают чистый и интуитивно понятный синтаксис для определения объектов и их поведения.

Модули

Модули позволяют разбивать код на отдельные файлы и импортировать/экспортировать функции, объекты или примитивы между файлами.

Экспорт

// math.js
export const add = (a, b) => a + b;

Импорт

// main.js
import { add } from './math.js';
console.log(add(2, 3)); // 5

В этих примерах функция add экспортируется из math.js и импортируется в main.js, что демонстрирует, как модули облегчают организацию и повторное использование кода.

Операторы Rest и Spread

Оператор Rest

Оператор rest (...) позволяет представить неопределённое количество аргументов в виде массива.

В этом примере функция sum использует оператор rest, чтобы собрать все аргументы в массив, что упрощает выполнение операций над ними.

Оператор Spread

Оператор spread (...) позволяет «развернуть» итерируемый объект (например, массив) там, где ожидается ноль или более аргументов или элементов.

Этот пример показывает, как оператор spread можно использовать для объединения массивов в один массив, упрощая код.

Итераторы и генераторы

Итераторы

Итераторы — это объекты, которые позволяют перебирать коллекцию, например массив или строку.

В этом примере итератор предоставляет способ последовательного доступа к каждому элементу массива.

Генераторы

Генераторы — это функции, выполнение которых можно приостанавливать и возобновлять, что даёт мощный способ работы с итерируемыми объектами.

Этот пример показывает, как функция-генератор может отдавать значения по одному, приостанавливая выполнение между каждым yield.

Symbol

Symbol — это новый примитивный тип данных, введённый в ES6. Значения Symbol уникальны и неизменяемы, их часто используют для создания уникальных ключей объектов.

В этом примере symbol1 и symbol2 уникальны, даже несмотря на одинаковое описание.

Map и Set

Map

Map — это коллекции пар «ключ-значение», где ключи могут быть любого типа.

Этот пример демонстрирует, как создать Map, задать пары «ключ-значение» и получить значения.

Set

Set — это коллекции уникальных значений.

В этом примере набор содержит только уникальные значения, несмотря на то что 3 было добавлено дважды.

Прокси

Прокси позволяют создать прокси для другого объекта, что даёт возможность перехватывать и переопределять базовые операции.

Этот пример показывает, как прокси может перехватывать обращение к свойствам, предоставляя собственный ответ, если свойство не найдено.

WeakMap и WeakSet

WeakMap

WeakMap похож на Map, но допускает в качестве ключей только объекты и не препятствует сборке мусора, если на объект-ключ больше нет других ссылок.

WeakSet

WeakSet похож на Set, но допускает в качестве значений только объекты и не препятствует сборке мусора, если на объект больше нет других ссылок.

Заключение

ES6 привносит множество возможностей, которые делают JavaScript более надёжным и эффективным языком. Понимая и используя эти возможности, разработчики могут писать более чистый и удобный в сопровождении код. В этом руководстве подробно рассмотрены самые важные аспекты ES6, снабжённые примерами, которые помогут вам начать работу.

Чтобы углубиться в отдельные темы, продолжайте изучение с помощью статей о стрелочных функциях, деструктуризирующем присваивании, rest-параметрах и spread-синтаксисе, классах, модулях и промисах.

Практика