ECMAScript 6 (ES6): что нового в новой версии JavaScript
Вы уже, наверное, слышали о ECMAScript 6 (или ES6). Это новая версия JavaScript, в которую добавлен новый функционал. Эти новые возможности имеют различную степень сложности и могут быть полезны и для простых скриптов, и для сложных приложений. В данной статье мы обсудим некоторые из новых возможностей ES6, которые можно использовать при ежедневном кодировании на JavaScript.
Пожалуйста, обратите внимание, что поддержка этих новых функций ES6 в современных браузерах идет полным ходом, хотя и несколько варьируется. Если вам необходимо поддерживать старые версии браузеров, которые не используют многих возможностей ES6, то в статье будут затронуты решения, которые могут помочь вам начать использовать ES6.
Переменные
Это поможет сделать код более чистым, в результате уменьшения количества висящих переменных в области видимости. Например, классическая итерация массива:
CONST
Существует еще один способ для объявления переменных с областью видимости, ограниченной блоком. С const вы объявляете ссылку на значение, доступную только для чтения. Значение переменной вы должны задать непосредственно при объявлении. Если вы попытаетесь изменить значение переменной или сразу не зададите значение, то получите сообщение об ошибке:
Обратите внимание, что вы все еще можете изменять значения свойств объекта или членов массива:
Стрелочные функции
Стрелочные функции – отличное дополнение к языку JavaScript. Они создают короткий и лаконичный код. В этой статье мы рассказываем о стрелочных функциях пораньше, чтобы позже воспользоваться ими в других примерах. Следующий фрагмент кода показывает стрелочную функцию в сравнении аналогичной функцией, написанной в знакомом стиле ES5:
При нуле или более одном аргументе, вы должны добавить круглые скобки:
Строки
Методы
К прототипу String была добавлена пара удобных методов. Большинство из них служат просто устранения обходных путей с методом indexOf() для получения того же результата:
Просто, но эффективно. Другой удобный метод был добавлен для создания повторяющейся строки:
Шаблонные литералы
Как видно из кода выше, шаблонные литералы просто удобны для конкатенации по сравнению с ES5. Однако шаблонные литералы также можно использовать и для многострочных литералов. Имейте в виду, что пробельные символы (например, символ новой строки) являются частью строки:
Массивы
Во-первых, Array.from создает экземпляры Array из массивоподобных и итерируемых объектов. Примеры массивоподобных объектов включают в себя:
В объект Math была добавлена пара новых методов.
Если вы хотите узнать больше о новых числовых и математических возможностях в ES6, Dr. Axel Rauschmayer расскажет вам.
Оператор распространения
Оператор распространения (. ) – это очень удобный синтаксис для разворачивания элементов массива в определенных местах, например, в качестве аргументов в вызовах функций. Показать несколько примеров – это, вероятно, лучший способ продемонстрировать, насколько они полезны.
Во-первых, посмотрим, как развернуть элементы массива внутри другого массива:
Синтаксис распространения также удобен при вызове функций с аргументами:
Мы применяем оператор распространения к массивам и аргументам. На самом деле, он может быть применен ко всем итерируемым объектам, таким как NodeList :
Деструктурирование
Деструктурирование обеспечивает удобный способ для извлечения данных из объектов или массивов. Для начала, хороший пример может быть показан на массиве:
С этим синтаксисом нескольким переменным могут быть присвоены значения за один раз. Приятный побочный эффект заключается в том, что вы можете легко поменять местами значения переменных:
Деструктурирование также работает и с объектами. Убедитесь в наличии соответствующих ключей:
Также вы можете использовать этот механизм, чтобы изменить имена переменных:
Еще один интересный образец имитации нескольких возвращаемых значений:
Деструктурирование может быть использовано, чтобы задать значения по умолчанию для объектов аргументов. С литералом объекта вы можете имитировать именованные параметры.
Параметры
Значения по умолчанию
Значения по умолчанию для параметров функций доступны в ES6 со следующим синтаксисом:
Выглядит довольно чисто, не так ли? Я уверен, что раньше вы были вынуждены заполнять некоторые аргументы в ES5 похожим способом:
Остаточные параметры
Модули
Модули – это, конечно, долгожданное дополнение к языку JavaScript. Я думаю, что это главное, ради чего стоит копаться в ES6.
Сегодня любой серьезный JavaScript проект использует какой-либо тип модульной системы, возможно что-то вроде шаблона «открытый модуль» или более обширные форматы AMD или CommonJS. Тем не менее, браузеры не располагают каким-либо типом модульной системы. Вам всегда необходим либо этап сборки, либо загрузчик ваших модулей AMD или CommonJS. Инструменты для обработки этого включают в себя RequireJS, Browserify и Webpack.
Спецификация ES6 включает в себя как новый синтаксис, так и механизм загрузчика модулей. Если вы хотите использовать модули и писать на будущее, то должны использовать данный синтаксис. Современные инструменты сборки поддерживают этот формат, возможно через плагин, поэтому всё должно пройти хорошо (не беспокойтесь, мы обсудим это далее в разделе «Транспиляция»).
Выражение import в этом примере использует синтаксис (подобный деструктуризации), чтобы явно определить, что будет импортировано. Чтобы импортировать модуль целиком, должен быть использован символ * в сочетании с ключевым словом, чтобы дать модулю локальное имя:
Пожалуйста, обратите внимание, что выражения import синхронны, но код модуля не выполняется, пока все зависимости не загрузятся.
Классы
Классы – широко обсуждаемая особенность ES6. Некоторые считают, что они идут против природы прототипов JavaScript, в то время как другие думают, что они понижают входной барьер для начинающих и людей, приходящих из других языков, и что они помогают людям писать большие приложения. В любом случае, они являются частью ES6. Далее приведено очень краткое введение в классы JavaScript.
Обратите внимание, что определение класса не является обычным объектом, следовательно, нет запятых между членами класса.
Если вы хотите копать эту тему глубже, я рекомендую «Классы в ECMAScript 6» от Dr. Axel Rauschmayer.
Символы
Символы, естественно, работают с const из-за своего неизменяемого характера:
Вы можете добавить описание к символу. Вы не сможете использовать его для получения доступа к самому символу, но оно может быть полезно при отладке:
Хотите узнать больше о символах? На Mozilla Developer Network есть хорошая статья о них.
Транспиляция
Мы можем писать свой код на ES6 сегодня. Как уже упоминалось во введении, поддержка ES6 браузерами пока не очень обширна и сильно варьируется. Очень вероятно, что не всё из ES6 кода, который вы напишете, будет понято браузерами ваших пользователей. Вот почему мы должны конвертировать его в предыдущие версии JavaScript (ES5), которые хорошо запускаются на любом современном браузере. Это преобразование часто называют «транспиляция». Мы должны выполнять его с нашими приложениями, пока браузеры, которые мы хотим поддерживать, не начнут понимать ES6.
Начнем
Транспилировать код не сложно. Вы можете траспилировать код непосредственно из командной строки или можете включить в качестве плагина планировщик задач, например, Grunt или Gulp. Существует множество решений для транспиляции, в том числе и Babel, Traceur и TypeScript. Взгляните, например, на множество способов начать использовать ES6 с Babel (ранее «6to5»). Большинство возможностей ES6 в вашем распоряжении!
Теперь, когда, надеюсь, вы впечатлены ES6, почему бы не начать использовать его? В зависимости от особенностей, которые вы хотите использовать, и браузеров или оболочек, которые вам необходимо поддерживать (например, Node.js), вы, вероятно, хотите включить транспилятор в ваш рабочий процесс. И если вы готовы к этому, то существуют также наблюдатели за файлами, чтобы сделать ваш процесс разработки бесшовным.
Если вы начинаете с нуля, то возможно просто захотите конвертировать ваш код из командной строки (смотрите, например, документацию Babel CLI). Если вы уже используете планировщик задач (например, Grunt или Gulp), то можете добавить плагин (например, gulp-babel или babel-loader для Webpack). Для Grunt существует grunt-babel и много других плагинов, связанных с ES6. Люди, использующие Browserify, могут попробовать babelify.
Многие возможности могут быть преобразованы в ES5-совместимый код без существенных дополнительных усилий. Другие требуют дополнительных временных костылей (которые могут быть предоставлены транспилятором) и/или ухудшают производительность. А некоторые просто невозможны. Чтобы поэкспериментировать с кодом ES6 и посмотреть, как выглядит транспилированный код, вы можете использовать различные интерактивные инструменты (также известные как REPL):
Итак, что же я могу использовать?
Смотрите таблицу совместимости ES6 от Kangax для полного обзора возможностей ES6, которые поддерживаются транспиляторами и браузерами. Мотивирует то, что на момент написания статьи, последние браузеры уже поддерживают от 55% до более 70% всех возможностей ES6. Microsoft Edge, Google Chrome и Mozilla Firefox здесь действительно конкурируют друг с другом, и это хорошо для веба в целом.
Лично я думаю, что возможность легко использовать новые возможности ES6, такие как модули, стрелочные функции и остаточные параметры, – это облегчение и значительное улучшение процесса кодирования.
Что дальше?
После того, как вы установите транспилятор, вы вероятно захотите начать использовать «маленькие» нововведения, такие как let и стрелочные функции. Имейте в виду, что код, который уже написан для ES5, будет нетронут транспилятором. Как только вы улучшите свои скрипты с ES6 и получите от этого удовольствие, то начнете постепенно добавлять в код всё больше и больше возможностей ES6. Возможность преобразовать какой-либо код в новые модули или синтаксис классов. Я обещаю, что это будет круто!
Заключение
При использовании транспилятора весь ваш код эффективно «заключается» в ES5, пока браузеры будут продолжать добавлять новые возможности. Таким образом, даже если браузер полностью поддерживает определенную возможность ES6, ES5-совместимая версия, которая будет использоваться, возможно будет хуже по производительности. Вы можете рассчитывать на то, что любая возможность ES6, и в конечном счете все из них, будут поддерживаться в определенном месте (в браузерах и средах, которые вам необходимо поддерживать на тот момент). Но до тех пор мы должны выборочно отключать возможности ES6 от транспиляции в ES5, чтобы предотвратить излишнюю нагрузку. Имея это в виду, решите для себя, подходит ли данный момент, чтобы начать использовать ES6 (какие-либо его части).
Обзор базовых возможностей ES6
JavaScript сильно изменился за последние годы. Вот 12 новых возможностей, которые можно начать использовать уже сегодня!
История
Новые добавления в язык называются ECMAScript 6. Или ES6 или ES2015+.
С момента появления в 1995, JavaScript развивался медленно. Новые возможности добавлялись каждые несколько лет. ECMAScript появился в 1997, его целью было направить развитие JavaScript в нужное русло. Выходили новые версии – ES3, ES5, ES6 и так далее.
Как видите, между версиями ES3, ES5 и ES6 есть пропуски длиной в 10 и 6 лет. Новая модель – делать маленькие изменения каждый год. Вместо того, чтобы накопить огромное количество изменений и выпустить их все за раз, как это было с ES6.
Browsers Support
Все современные браузеры и среды исполнения уже поддерживают ES6!
Chrome, MS Edge, Firefox, Safari, Node и многие другие системы имеют встроенную поддержку большинства возможностей JavaScript ES6. Так что, все из этого пособия можно использовать прямо сейчас.
Главные возможности ES6
Все сниппеты можно вставлять в консоль браузера и запускать.
Block scope variables
Проблема var в том, что переменная «протекает» в другие блоки кода, такие как циклы for или блоки условий if :
ES6 спешит на помощь:
Изменив var на let мы откорректировали поведение. Если блок if не вызывается, то переменная x не переопределяется.
IIFE (immediately invoked function expression)
Давайте сначала рассмотрим пример:
Как видите, private протекает наружу. Нужно использовать IIFE (immediately-invoked function expression):
В ES6 не нужно использовать IIFE, достаточно использовать блоки и let :
Const
Можно также использовать const если переменная не должна изменяться.
Template Literals
Не нужно больше делать вложенную конкатенацию, можно использовать шаблоны. Посмотрите:
Multi-line strings
Не нужно больше конкатенировать строки с + \n :
В ES6 можно снова использовать бэктики:
Оба блока кода генерируют одинаковый результат
Destructuring Assignment
ES6 destructing – полезная и лаконичная штука. Посмотрите на примеры:
Получение элемента из массива
Обмен значениями
Деструктуризация нескольких возвращаемых значений
В строке 3 можно вернуть в виде массива:
но вызывающему коду придется знать о порядке данных.
С ES6 вызывающий выбирает только нужные данные (строка 6):
Заметка: В строке 3 содержатся другие возможности ES6. Можно сократить < left: left >до < left >. Смотрите, насколько это лаконичнее по сравнению с версией ES5. Круто же?
Деструктуризация и сопоставление параметров
То же самое (но короче):
Глубокое сопоставление
То же самое (но короче):
Это также называют деструктуризацией объекта (object destructing).
Как видите, деструктуризация может быть очень полезной и может подталкивать к улучшению стиля кодирования.
Классы и объекты
Каждый объект в JavaScript имеет прототип, который является другим объектом. Все объекты в JavaScript наследуют методы и свойства от своего прототипа.
В ES5 объектно-ориентированное программирование достигалось с помощью функций-конструкторов. Они создавали объекты следующим образом:
Оба стиля (ES5/6) дают одинаковый результат.
Наследование
В ES5 придется немного поработать с прототипным наследованием.
Не будем вдаваться в детали, но заметьте несколько деталей:
Посмотрите, насколько лучше выглядит код на ES6 по сравнению с ES5. И они делают одно и то же! Win!
Нативные промисы
Переходим от callback hell к промисам (promises)
Одна функция принимает callback чтобы запустить его после завершения. Нам нужно запустить ее дважды, одну за другой. Поэтому приходится вызывать printAfterTimeout во второй раз в коллбеке.
Все становится совсем плохо когда нужно добавить третий или четвертый коллбек. Давайте посмотрим, что можно сделать с промисами:
С помощью then можно обойтись без вложенных функций.
Стрелочные функции
В ES5 обычные определения функций не исчезли, но был добавлен новый формат – стрелочные функции.
В ES5 есть проблемы с this :
For…of
От for переходим к forEach а потом к for. of :
ES6 for…of позволяет использовать итераторы
Параметры по умолчанию
От проверки параметров переходим к параметрам по умолчанию. Вы делали что-нибудь такое раньше?
Скорее всего да. Это распространенный паттерн проверки наличия значения переменной. Но тут есть некоторые проблемы:
Если параметр по умолчанию это булева переменная или если задать значение 0, то ничего не получится. Почему? Расскажу после этого примера с ES6 😉
В ES6 все получается лучше с меньшим количеством кода:
С проверкой на undefined все работает как нужно.
Rest-параметры
От аргументов к rest-параметрам и операции spread.
В ES5 работать с переменным количеством аргументов неудобно.
Операция Spread
В ES6 используем spread:
Мы также перешли от concat к spread’у:
Заключение
JavaScript сильно изменился. Эта статья покрывает только базовые возможности, о которых должен знать каждый разработчик.
Нововведения в ES6 для новичков
Учебник JavaScript
Практика
Работа с DOM
Практика
Некоторые продвинутые вещи
Рекомендованное ES6
Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.
Регулярки
Разное
Работа с канвасом
Практика
Контекст
Drag-and-Drop
Практика по ООП
Ваша задача: посмотрите, попробуйте повторить.
Практика
Promise ES6
Библиотека jQuery
Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.
Кроме того, эти вещи можно использовать уже сейчас, если использовать специальные программы-транспойлеры, которые конвертируют код из нового стандарта в старый.
Команда let вместо var
Кроме команды var для объявления переменных появилась еще и команда let. Эта команда более строгая и нужна для того, чтобы ограничить область видимости переменных фигурными скобками.
Команда let создает разные области видимости не только в if, но и в циклах и вообще в любых фигурных скобках.
Константы
Константа объявляется командой const вместо команды var:
Константы-объекты
Объекты также можно делать константами. В этом случае значения их свойств разрешено менять, так же, как и добавлять новые свойства:
Деструктуризация
Давайте посмотрим на примере:
Можно начать записывать в переменные не сначала массива, а пропустить некоторые значения. Давайте, к примеру, пропустим фамилию, а имя и возраст запишем в переменные. Для этого при указании переменных перед первой переменной поставим запятую, вот так: [, name, age].
Посмотрим на примере:
Можно пропустить не одно значение, а несколько:
Можно сохранить оставшиеся значения массива в отдельный массив. Для этого перед переменной, в которую положится остаток, следует написать троеточие. В следующем примере фамилия и имя запишутся в соответствующие переменные, а остаток массива в переменную rest:
Если в массиве меньше элементов, чем переменных, то в «лишние» переменные запишется undefined:
В следующем примере переменной name по умолчанию указано значение ‘Аноним’:
В качестве значения по умолчанию можно также указывать функцию:
Деструктуризация объектов
Кроме массивов можно также делать и деструктуризацию объектов. В следующем примере значения объекта разбиваются на соответствующие переменные (имена переменных должны совпадать в ключами объекта, порядок не имеет значения):
Можно сделать так, чтобы имена переменных не совпадали в именами ключей объекта:
Можно также менять названия переменных на свои при этом задавая значения по умолчанию:
Итераторы
В ES6 появились так называемые итераторы for-of, которые позволяют более удобно перебирать элементы массива, подобно объектам через for-in:
Итераторы для строк
Строки
Нововведения в функциях
Достаточно много нововведений коснулось функций. Давайте с ними разбираться.
Значения по умолчанию
Значением по умолчанию также может служить результат работы другой функции:
Деструктуризация в функциях
В параметрах функций также доступна деструктуризация.
Функция также может принимать объект, элементы которого запишутся в разные переменные:
Также можно указывать параметры по умолчанию:
Также можно переименовывать переменные:
Ну, и можно комбинировать параметры по умолчанию и переименование:
Функции через =>
В следующем примере вы видите функцию в новом стиле, а ниже эквивалент в старом стиле:
Стрелочные функции удобно использовать в качестве анонимных:
Доступность this
Пусть у нас дан элемент и массив:
Давайте к этому элементу привяжем функцию, а в этой вызовем другую функцию, например, через forEach:
Чтобы сделать this доступным внутри вложенной функции обычно поступают так: записывают его в какую-либо переменную снаружи вложенной функции (переменную можно назвать как угодно, обычно это that или self). Получается, что внутри вложенной функции наш this будет доступен как that:
Что вам делать дальше:
Приступайте к решению задач по следующей ссылке: задачи к уроку.
JavaScript ES6: пишем меньше — делаем больше
Стандарт ES6 принёс в мир JavaScript-разработки новые синтаксические конструкции и замечательные возможности, которые, кроме прочего, улучшают читаемость текстов программ, позволяют сделать их лаконичнее и выразительнее. Всё это позволяет разработчику решать те же задачи, что и раньше, написав меньше кода. «Пишем меньше — делаем больше», — это идея, которая вдохновила автора материала, перевод которого мы сегодня публикуем, на исследование возможностей ES6. В частности, здесь он сравнивает ES5 и ES6 и рассматривает варианты практического использования новых конструкций.
Ключевые слова const и let
В вышеприведённом примере значение, записанное в константу, изменить нельзя. При попытке записи в неё нового значения мы столкнёмся с сообщением об ошибке.
Стрелочные функции
Стрелочные функции — просто замечательная возможность. Они улучшают читаемость и благотворно влияют на структуру кода, да и попросту делают программы выглядящими современнее. Вот как пользуются функциями в ES5.
А вот — современный вариант.
Шаблонные литералы
Шаблонные литералы, или шаблонные строки — возможность очень интересная. Теперь не нужно использовать оператор + для конкатенации строк, или в тех случаях, когда при сборке строк используются переменные. Вот как это выглядело раньше.
Вот что у нас есть теперь.
По-новому получается гораздо проще. Перед нами — весьма значительное отличие между старым синтаксисом и ES6. Новые возможности ES6 делают работу со строками более организованной и способствуют улучшению структуры соответствующих фрагментов кода.
Параметры функций, задаваемые по умолчанию
Рассмотрим пример, в котором параметры, задаваемые по умолчанию, не используются.
Деструктурирование массивов и объектов
Деструктурирование упрощает операцию присвоения отдельных значений, хранящихся в массивах или объектах, новым переменным. Вот как подобное можно было сделать раньше.
Вот как то же самое делается средствами ES6.
Пользуясь ES5, мы должны были присваивать каждое отдельно взятое значение каждой переменной. Благодаря возможностям ES6 для того, чтобы извлечь отдельные значения объекта, имена переменных достаточно поместить в фигурные скобки.
В случае с массивами используется похожий синтаксис. Только фигурные скобки надо заменить скобками квадратными.
Инструкции import и export
Использование инструкций import и export в JS-приложениях расширяет их возможности. Они позволяют программисту создавать самостоятельные компоненты, подходящие для повторного использования.
Если вы знакомы с любым MVC-фреймворком для JavaScript, вы уже знаете, что они практически всегда используют инструкции import и export для работы с компонентами. Как же всё это устроено? На самом деле — очень просто. Инструкция export позволяет экспортировать модуль, который может быть использован в других JavaScript-компонентах. Инструкция import используется для импорта подобных модулей.
Если нужно импортировать несколько модулей, их можно перечислить в фигурных скобках.
Промисы
Промисы — это одна из новых возможностей ES6. Это — подход к написанию асинхронного кода. Его можно использовать когда, например, нужно загрузить данные из некоего API, или когда у нас имеется функция, на выполнение которой нужно некоторое время. Промисы упрощают решение подобных задач. Вот как с ними работать.
Здесь показано, что попадёт в консоль при попытке логирования промиса.
В данном случае вызов console.log приводит к выводу в консоль массива.
Синтаксис оставшихся параметров и оператор расширения
Синтаксис оставшихся параметров используется для представления неограниченного множества аргументов в виде массива. Вот несколько примеров его использования.
Оператор расширения похож на использование синтаксиса оставшихся параметров, но он позволяет, как показано в следующем примере, работать с массивами, извлекая их значения, которые иначе пришлось бы извлекать, пользуясь циклом for или какими-то другими методами.
Классы
Классы — это одно из базовых понятий объектно-ориентированного программирования. Они позволяют улучшить структуру кода и сделать его безопаснее.
Здесь можно почитать подробности о классах в JavaScript.
Итоги
Надеемся, этот материал помог вам открыть среди возможностей ES6 что-то новое, полезное в вашей практической работе. Кстати, здесь описаны далеко не все новшества ES6. Ознакомиться с гораздо более обширным их списком можно здесь. Кроме того, если вас интересует тема новых возможностей JavaScript, вот, вот и вот — некоторые наши публикации на эту тему.
Уважаемые читатели! Можете ли вы привести примеры из практики, иллюстрирующие идею, в соответствии с которой применение новых возможностей ES6 позволяет решать те же задачи, что и раньше, с помощью меньшего объёма кода, который, к тому же, оказывается проще, понятнее и читабельнее?
