Что такое ecmascript 6
Обзор ECMAScript 6, следующей версии JavaScript
Итак, что же нас ждет в новой версии JavaScript?
Блочная область видимости (block scope)
Значения параметров по умолчанию
В функциях добавилась возможность объявлять у параметров значения по умолчанию:
Именованные параметры функций
В функциях также появилась возможность указывать именованные параметры:
Именованные параметры можно комбинировать с обычным (позиционными параметрами):
Destructuring assignment
ECMAScript 6 позволит деструктуризировать при присваивании:
Кстати, в примере из предыдущего пункта (Именованные параметры) вы видели пример деструктуризации параметров функции.
Деструктуризация по умолчанию является refutable (не имею понятия, как это переводить). Т.е. если в объекте-источнике присваивания соответствующего поля нету, то выбрасывается ошибка:
Либо можно дать переменной значение по умолчанию:
Значение по умолчанию также срабатывает, если соответствующее поле в объекте-источнике является undefined :
С помощью деструктуризации можно одной строчкой кода поменять значение двух переменных (без всяких tmp ):
Классы
В ECMAScript 6 появятся классы:
Теперь можно использовать эти классы:
Всего того же можно было добиться с помощью прототипов:
Как видите, классы в ECMAScript 6 — это просто синтаксический сахар над конструкторами и функциями.
Классы могут иметь статические методы:
Приватных полей и методов не будет (по крайней мере, в ECMAScript 6). Однако некоторое сокрытие данных все же появится. Через модули.
Модули
В JavaScript наконец-то появятся модули:
Модули можно вкладывать друг в друга:
Модули можно подгружать из веба или через файловую систему:
Все глобальные переменные в модули являются глобальными только в этом модуле.
Возможны циклические зависимости между модулями.
Цикл for-of
Как вы знаете, цикл for-in в JavaScript итерирует по всем полям объекта (включая наследованных). Т.е. итерироваться по значениям массива можно, но опасно:
Arrow-функции
В ECMAScript 6 появятся arrow functions:
Код выше эквивалентен этому:
Arrow-функции немножко отличаются от обычных функций. В первую очередь тем, что в arrow-функциях this привязан к вышестоящему контексту. Т.е.
Т.е. по сути своей arrow functions — опять же синтаксический сахар над существующими анонимными функциями:
есть ничто иное как:
В остальном arrow-функции не отличаются от обычных функций. Они поддерживают значения по умолчанию, переменное количество параметров, операторы typeof и instanceof :
Заключение
Я описал далеко не всё, что появится в новом стандарте ECMAScript 6. И очень возможно, что что-то из того, о чем я написал выше, может измениться или вообще не появиться в стандарте. Тем не менее, все, что я описал, — это не слухи. Это вещи, реально обсуждаемые комитетом TC39. И к концу этого (2013) года стандарт должен быть утвержден.
Ссылки
Большая часть информации взята из блога доктора Axel’а Rauschmayer’a, послушать которого и повидать вживую мне посчастливилось на конференции CodeFest в Новосибирске.
PS. Спасибо 2GIS за организацию конференции!
Обзор базовых возможностей 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 по-человечески
От переводчика:
Предлагаю вашему вниманию перевод краткого (действительно краткого) руководства по ES6. В нём можно ознакомиться с основными понятиями стандарта.
Оригинальный текст в некоторых случаях был дополнен или заменён на более подходящий источник. Например, часть определения ключевого слова const является переводом документации с MDN.
Чтобы лучше разобраться в некоторых концепциях (для выполнения качественного перевода) использовалось описание стандарта на сайте MDN, руководство «You Don’t Know JS: ES6 & Beyond» и учебник Ильи Кантора.
Содержание
1. let, const и блочная область видимости
О чём стоит помнить:
2. Стрелочные функции
Заметим, что в примере выше, тело функции представляет собой краткую запись, в которой не требуется явного указания на то, что мы хотим вернуть результат.
А вот пример с использованием блока из фигурных скобок:
Это ещё не всё.
Стрелочные функции не просто делают код короче. Они тесно связаны с ключевым словом this и привязкой контекста.
В ECMAScript 3/5 это поведение стало возможным изменить, присвоив значение this другой переменной.
Как сказано выше, внутри стрелочных функций значение this то же самое, что и снаружи, поэтому следующий код работает так, как от него и ожидается:
3. Параметры по умолчанию
ES6 позволяет установить параметры по умолчанию при объявлении функции. Вот простой пример:
4. Spread / Rest оператор
. оператор называют как spread или rest, в зависимости от того, как и где он используется.
При использовании в любом итерируемом объекте (iterable), данный оператор «разбивает» («spread») его на индивидуальные элементы:
5. Расширение возможностей литералов объекта
ES6 позволяет объявить литералы объекта с помощью короткого синтаксиса для инициализации свойств из переменных и определения функциональных методов. Также, стандарт обеспечивает возможность вычисления свойств непосредственно в литерале объекта.
6. Восьмеричный и двоичный литералы
В ES6 появилась новая поддержка для восьмеричных и двоичных литералов.
Добавление к началу числа 0o или 0O преобразует его в восьмеричную систему счисления (аналогично, 0b или 0B преобразует в двоичную систему счисления). Посмотрим на следующий код:
7. Деструктуризация массивов и объектов
Деструктуризация помогает избежать использования вспомогательных переменных при взаимодействии с объектами и массивами.
8. Ключевое слово super для объектов
ES6 позволяет использовать метод super в (безклассовых) объектах с прототипами. Вот простой пример:
9. Строковые шаблоны и разделители
ES6 предоставяляет более простой способ вставки значения переменной или результата выражения (т.н. «интерполяцию»), которые рассчитываются автоматически.
10. for. of против for. in
11. Map и WeakMap
Классический объект состоит из ключей (всегда в строковом виде) и значений, тогда как в Map для ключа и значения можно использовать любое значение (и объекты, и примитивы). Посмотрим на этот код:
WeakMap
12. Set и WeakSet
Объекты Set это коллекции уникальных значений. Дублированные значения игнорируются, т.к. коллекция должна содержать только уникальные значения. Значения могут быть примитивами или ссылками на объекты.
WeakSet
13. Классы в ES6
В ES6 представили новый синтаксис для классов. Здесь стоит отметить, что класс ES6 не представляет собой новую объектно-ориентированную модель наследования. Это просто синтаксический сахар для существующего в JavaScript прототипного наследования.
Класс в ES6 представляет собой просто новый синтаксис для работы с прототипами и функциями-конструкторами, которые мы привыкли использовать в ES5.
extends и super в классах
Посмотрим на следующий код:
В ES6 ключевое слово extends позволяет классу-потомку наследовать от родительского класса. Важно отметить, что конструктор класса-потомка должен вызывать super().
О чём стоит помнить:
14. Тип данных Symbol
Symbol это уникальный и неизменяемый тип данных, представленный в ES6. Целью Symbol является создание уникального идентификатора, к которому нельзя получить доступ.
Вот как можно создать Symbol :
Заметим, что использовать new вместе с Symbol(…) нельзя.
Если Symbol используется как свойство/ключ объекта, он сохраняется таким специальным образом, что свойство не будет показано при нормальном перечислении свойств объекта.
Чтобы извлечь символьные свойства объекта, нужно использовать Object.getOwnPropertySymbols(o)
15. Итераторы
Посмотрим на массив, который является перебираемым (iterable), и на итератор, который есть у массива для обработки его значений:
Заметим, что можно написать собственный итератор через определение obj[Symbol.iterator]() с описанием объекта.
Подробнее про итераторы:
На сайте MDN
16. Генераторы
Функции-генераторы представляют собой новую особенность ES6, которая позволяет функции создавать много значений в течение некоторого периода времени, возвращая объект (называемый генератором), который может быть итерирован для выброса значений из функции по одному за раз.
Каждый раз при вызове yield возвращённое значение становится следующим значением в последовательности.
Также заметим, что генераторы вычисляют свои возвращённые значения по запросу, что позволяет им эффективно представлять последовательности, затратные с точки зрения вычислений, или даже бесконечные последовательности.
17. Промисы
В ES6 появилась встроенная поддержка промисов. Промис это объект, который ждёт выполнения асинхронной операции, после которого (т.е. после выполнения) промис принимает одно из двух состояний: fulfilled (resolved, успешное выполнение) или rejected (выполнено с ошибкой).
При возвращении промиса, успешно обработанное значение промиса пройдёт к следующему коллбэку, для того, чтобы эффективно соединить их вместе.
Эта простая техника помогает избежать ада с коллбэками («callback hell»).
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 (какие-либо его части).