Что и как в ES6: хитрости, лучшие практики и примеры. Часть первая. let/const, блоки, стрелочные функции, строки, деструктуризация, модули, параметры, классы

es6mini

Шпаргалка для повседневного использования, содержащая подборку советов по ES2015 [ES6] с примерами. Делитесь своими советами в комментариях! 

var против let / const

Кроме var нам теперь доступны 2 новых идентификатора для хранения значений — let и const. В отличие от var, let и const обладают блочной областью видимости.

Пример использования var:

А вот что происходит при замене var на let:

Такое изменение в поведении показывает, что нужно быть осторожным при рефакторинге старого кода, в котором используется var. Простая замена var на let может привести к непредсказуемому поведению программы.

Примечание: let и const видимы лишь в своём блоке. Таким образом, попытка вызвать их до объявления приведёт к ReferenceError.

Лучшая практика: Оставьте var в legacy-коде для дальнейшего тщательного рефакторинга. При работе с новым кодом используйте let для переменных, значения которых будут изменяться, и const — для неизменных переменных.

Замена немедленно вызываемых функций (IIFE) на блоки (Blocks)

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

Пример ES6 Blocks:

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

Часто при использовании вложенных функций бывает нужно отделить контекст this от его лексической области видимости. Пример приведён ниже:

Распространённым решением этой проблемы является хранение контекста this в переменной:

Также мы можем передать нужный контекст this:

Или привязать контекст:

Используя стрелочные функции, лексическое значение this не скрыто, и вышеприведённый код можно переписать так:

Лучшая практика: используйте стрелочные функции всегда, когда вам нужно сохранить лексическое значение this.

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

Лучшая практика: используйте стрелочные функции вместо функциональных выражений, когда это уместно.

Строки

С приходом ES6 стандартная библиотека сильно увеличилась. Кроме предыдущих изменений появились строчные методы, такие как .includes() и .repeat().

.includes( )

Вместо проверки возвращаемого значения > -1 для проверки на наличие подстроки можно использовать .includes(), возвращающий логическую величину:

.repeat( )

В ES6 всё намного проще:

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

Используя шаблонные литералы, мы можем спокойно использовать в строках специальные символы.

Шаблонные литералы также поддерживают интерполяцию, что делает задачу конкатенации строк и значений:

Гораздо проще:

В ES5 мы обрабатывали переносы строк так:

Или так:

Шаблонные литералы сохраняют переносы строк:

Шаблонные литералы также могут обрабатывать выражения:

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

Деструктуризация позволяет нам извлекать значения из массивов и объектов (даже вложенных) и помещать их в переменные более удобным способом.

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

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

Модули

До ES6 нам приходилось использовать библиотеки наподобие Browserify для создания модулей на клиентской стороне, и require в Node.js. С ES6 мы можем прямо использовать модули любых типов (AMD и CommonJS).

Экспорт в CommonJS

Экспорт в ES6

В ES6 мы можем использовать разные виды экспорта.

Именованный экспорт:

Экспорт списка объектов:

Также мы можем экспортировать функции, объекты и значения, просто используя ключевое слово export:

И наконец, можно экспортировать связывания по умолчанию:

Лучшая практика: всегда используйте метод export default в конце модуля. Это чётко покажет, что именно экспортируется, и сэкономит время.

Импорт в ES6

ES6 предоставляет различные виды импорта. Мы можем импортировать целый файл:

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

Как и в Python, есть именованный импорт:

Который можно переименовывать:

Кроме того, можно импортировать пространство имён:

И наконец, список значений из модуля:

Импорт из связывания по умолчанию выглядит так:

Экспортирование лучше упрощать, но иногда можно смешивать импорт по умолчанию с чем-то ещё. Когда мы экспортируем так:

Импортировать их можно так:

При импортировании модуля, экспортированного с использованием синтаксиса CommonJS (как в React), можно сделать:

Это можно упростить:

Примечание: экспортируемые значения — это связывания, не ссылки. Поэтому изменение в одном модуле повлечёт за собой изменение в другом.

Параметры

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

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

В ES6 можно просто указать параметры функции по умолчанию:

Остаточные параметры

В ES5 неопределённое количество аргументов обрабатывалось так:

Используя остаточный оператор, можно передавать неопределённое число аргументов:

Именованные параметры

Одним из шаблонов ES5 для работы с именованными параметрами был шаблон options object, взятый из jQuery.

Тоже самое можно получить, используя деструктор в качестве формального параметра функции:

Если мы хотим сделать всё значение опциональным, можно деструктурировать пустой объект:

Оператор расширения

В ES5 можно было найти максимум массива, используя метод apply над Math.max:

В ES6 можно использовать оператор расширения для передачи массива значений в качестве параметров функции:

Также можно интуитивно конкатенировать массивы литералов:

Классы

До ES6 классы нужно было создавать, добавляя к функции-конструктору свойства, расширяя прототип:

А расширенные классы — так:

ES6 предоставляет весьма удобный синтаксический сахар. Классы можно создавать таким образом:

А расширять — используя ключевое слово extends:

Лучшая практика: хотя такой синтаксис и скрывает реализацию, новичкам в нём будет проще разобраться, да и написанный код будет чище.

По материалам es6-cheatsheetИван Бирюков, страж правописания