ecmascript 6 что это

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

Одним из наиболее распространенных шаблонов, возникших в современном JavaScript коде является использование вариантных объектов.

Такая практика широко используется в новых браузерных API, например в WHATWG fetch (современная замена XMLHttpRequest):

Повсеместное принятие этой модели эффективно препятствует падению экосистемы JavaScript в логическую ловушку.

Если принять, что API принимает обычные аргументы, а не объект с параметрами, то вызов fetch превращается в задачу запоминания порядка аргументов и ввода ключевого слова null в нужное место.

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

Обычно это сопровождается ручной установкой значений по-умолчанию локальным переменным:

И к сожалению для нас, несмотря на свою распространенность, практика использования || фактически привносит трудно выявляемые ошибки. Например, в этом случае мы не допускаем того, что opts.body может быть 0, поэтому надежный код скорее всего будет выглядеть так:

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

Собственно, значение по умолчанию можно применить и ко всему объекту с параметрами:

Вы также можете деструктурировать оператор присваивания:

Это напоминает мне о выразительности, предоставленные with, но без магии или негативных последствий.

# Новые соглашения

Некоторые части языка были полностью заменены лучшими альтернативами, что быстро станет новым стандартом того, как вы пишете JavaScript.

Я расскажу о некоторых из них.

# let/const вместо var

Вместо того, чтобы писать var x = y скорее всего вы будете писать let x = y. let позволяет объявлять переменные с блочной областью видимости:

Это особенно полезно для for или while циклов:

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

# строковые шаблоны вместо конкатенации

В связи с отсутствием sprintf или подобными утилитами в стандартной библиотеки JavaScript, составление строк всегда было более болезненным, чем следовало бы.

Строковые шаблоны сделали встраивание выражений в строки тривиальной операцией, также как и поддержку нескольких линий. Просто замените ‘ на `

# классы вместо прототипов

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

class предлагает синтаксический сахар для определения функции конструктора, методов прототипа и геттеров / сеттеров. Он также реализует прототипное наследование со встроенным синтаксисом (без дополнительных библиотек или модулей).

Я изначально был удивлен, узнав, классы не всплывают (hoisted) (объяснение тут). Поэтому вы должны думать о них, переводя в var A = function()<> в противоположность function A()<>.

# ()=> вместо function

Не только потому что (x, y) => <> короче написать, чем function (x,y) <>, но поведение this в теле функции, скорее всего, будет ссылаться на то, что вы хотите.

Так называемые функции “толстые стрелки” лексически связанны. Рассмотрим пример метода внутри класса, который запускает два таймера:

К ужасу новичков, первый таймер (с использованием function) выведет «undefined». А вот второй правильно выведет name.

# Первоклассная поддержка async I/O

Асинхронное выполнение кода сопровождало нас в течение почти всей истории языка. setTimeout, в конце концов, был введен примерно в то время, когда вышел JavaScript 1.0.

Но, пожалуй, язык не поддерживает асинхронность на самом деле. Возвращаемое значение вызовов функций, которые запланированы “выполниться в будущем” обычно равны undefined или в случае с setTimeout — Number.

Введение Promise позволило заполнить очень большую пропасть в совместимости и композиции.

С одной стороны, вы найдете API более предсказуемым. В качестве теста, рассмотрим новое fetch API. Как это работает за сигнатурой, которую мы только что описали? Вы угадали. Оно возвращает Promise.

Если Вы использовали Node.JS в прошлом, вы знаете, что есть неформальная договоренность о том, что обратные вызовы следуют сигнатуре:

Также неофициально указана идея о том, что обратные вызовы будут вызываться только один раз. И null будет значение в случае отсутствия ошибок (а не undefined или false). За исключением, возможно, это не всегда так.

# Вперед к будущему

ES6 набирает немалые обороты в экосистеме. Chrome и io.js уже добавили некоторый функционал из ES6. Много уже было написано об этом.

Но стоит отметить то, что эта популярность была во многом обусловлена наличием утилит для трансформации, а не фактической поддержкой. Отличные инструменты появились, для того чтобы включить трансформацию и эмуляцию ES6, и браузеры со временем добавили поддержку отладки кода и отлова ошибок (с помощью карт кода).

Эволюция языка и его предполагаемый функционал, опережают реализацию. Как говорилось выше, Promise — по-настоящему интересен как самостоятельный блок, который предлагает решение проблемы callback hell раз и навсегда.

Стандарт ES7 предлагает сделать это путем введения возможности ожидания (async) объекта Promise:

Хотя эта спецификация обсуждается уже давно, тот же инструмент, который компилирует ES6 в ES5 уже реализовал это.

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

Но одно можно сказать точно: мы должны принять это будущее.

Сноски:
1. ^ я использую слово “трасформация” в статье, чтобы объяснить компиляцию исходного кода в исходный код в 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»).

Источник

ES6, ES8, ES2017: что такое ECMAScript и чем это отличается от JavaScript

Авторизуйтесь

ES6, ES8, ES2017: что такое ECMAScript и чем это отличается от JavaScript

Изучение JavaScript может сбить с толку по множеству причин, и одна из них — акронимы. Чтобы не дать сокращениям сбить вас с толку, в этой статье мы разберём их значения и историю возникновения.

Что такое ECMAScript?

Сначала немного истории. JavaScript создавался как скриптовый язык для Netscape. После чего он был отправлен в ECMA International для стандартизации (ECMA — это ассоциация, деятельность которой посвящена стандартизации информационных и коммуникационных технологий). Это привело к появлению нового языкового стандарта, известного как ECMAScript.

Последующие версии JavaScript уже были основаны на стандарте ECMAScript. Проще говоря, ECMAScript — стандарт, а JavaScript — самая популярная реализация этого стандарта.

Что такое ES? История версий

ES — это просто сокращение для ECMAScript. Каждое издание ECMAScript получает аббревиатуру ES с последующим его номером. Всего существует 8 версий ECMAScript. ES1 была выпущена в июне 1997 года, ES2 — в июне 1998 года, ES3 — в декабре 1999 года, а версия ES4 — так и не была принята. Не будем углубляться в эти версии, так как они морально устарели, а рассмотрим только последние четыре.

ES5 был выпущен в декабре 2009 года, спустя 10 лет после выхода третьего издания. Среди изменений можно отметить:

Версия ES6/ES2015 вышла в июне 2015 года. Это также принесло некую путаницу в связи с названием пакета, ведь ES6 и ES2015 — это одно и то же. С выходом этого пакета обновлений комитет принял решение перейти к ежегодным обновлениям. Поэтому издание было переименовано в ES2015, чтобы отражать год релиза. Последующие версии также называются в соответствии с годом их выпуска. В этом обновлении были сделаны следующие изменения:

ES2016 (ES7) вышла в июне 2016 года. Среди изменений в этой версии ECMAScript можно отметить:

Спустя еще год выходит версия ES2017 (ES8). Данный стандарт получил следующие изменения:

Источник

Обзор 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 за организацию конференции!

Источник

Используем ECMAScript 6 Сегодня

Russian (Pусский) translation by Sergey Zhuk (you can also view the original English article)

Сегодня, ECMAScript 6 находится в процессе завершения. ECMAScript — это основа JavaScript, и, следовательно, сегодня изучение его возможностей также значает, что мы может взглянуть на то, то каким будет JavaScript в ближайшем будущем! В этой статье мы рассмотрим десять новых возможностей, и особое внимание уделим различным инструментам, браузерам и средствам компилирования ECMAScript в JavaScript.

Краткая история: ECMA, ECMAScript и JavaScript

JavaScript был первоначально разработан Бренданом Эйхом из компании Netscape и официально выпущен как часть Netscape Navigator 2.0 в 1995 году. Год спустя, JavaScript был передан ECMA International, органу, который способствует стандартизации информационных и коммуникационных технологий и бытовой электроники. ECMAScript, таким образом, стал именем языка сценариев, который был стандартизирован в ECMA-262.

Стандарт ECMAScript является основой многих других производных языков, в том числе ActionScript и JScript. Спустя годы, ECMAScript сменил четыре версии, и сегодня идет дискуссия вокруг шестой версии, у которой также имеется кодовое название ECMAScript Harmony.

Хронология версий

Перед тем как мы углубимся в новые возможности, важно отметить, что стандарт ECMAScript формирует основу JavaScript. Имеется множество различий между каждой из версий JavaScript и соответствующего ей издания ECMAScript. Это означает, что JavaScript совместим со стандартом ECMAScript, предоставляя больше возможностей. Таблица ниже подитоживает связь между JavaScript и ECMAScript:

Обзор ES6

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

Совместимость

Таблица совместимости ES6 является очень полезной, она показывает какие возможности языка поддерживаются конкретным браузером. Она также дает нам удобную ссылку на спецификацию для каждой из перечисленных функций. Обратите внимание, что поддержка некоторых функций в браузерах не означает, что они полностью соответствуют спецификации. Работая в Chrome, убедитесь что включили флаг «Experimental JavaScript» в настройках.

Новые возможности

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

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

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

В объектно-ориентированных языках class служит для представление объекта. Он формирует модель, когда сам объект является инстансом класса. Что касается JavaScript, то это язык программирования без классов, здесь все является объектом. Традиционно мы использовали функции и прототипы для реализации классов. Давайте рассмотрим один общий способ реализации класса в ES5.

Traceur является полезным компилятором, который позволяет нам писать код, используя синтаксис ES6, при этом сам выполняет всю трудоемкую работу по переводу кода в простой JavaScript. Обязательно попробуйте и другие возможности ES6 в Traceur!

Наконец мы открываем HTML-файл в Chrome/Firefox и вызываем функцию history() два раза: с параметрами и без. Обратите внимание, что не передавая параметры в функции, вы используете параметры, определенные по умолчанию.

Проверьте и другие возможности TypeScript, включая class или просмотрите обучающий материал по TypeScript для более глубокого изучения.

Sets (Наборы)

Maps (Таблицы)

Как было показано, вместе с коллекциями ES6, опция harmony у NodeJS также поддерживает и другие возможности, такие как области видимости в пределах блока, прокси и модули. Так же обязательно попробуйте их в действие в NodeJS!

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

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

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

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

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

Давайте попробуем использовать остаточные параметры вместе с gruntjs и его плагином для traceur, который мы использовали в предыдущем разделе.

Создадим простой файл index.html для вызова скомпилированного JavaScript файла, js/rest-spread.js :

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

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

Добавим код оператора расширения в файл rest-spread.js :

Запустим компилятор traceur через задачу Grunt в командной строке и откроем файл index.html в браузере:

Если вы уже используете GruntJS в своем проекте, то будет достаточно просто интегрировать его с ES6 плагинами. Так что непременно попробуйте другие GruntJS ES6 плагины для компиляции ES6 синтаксиса в текущий JavaScript.

JavaScript предлагает конструкцию for-in для итерации, но она имеет некоторые ограничения. Например, в итерации массива результаты for-in цикла дадут нам индексы массива, а не значения. Взглянем на код ниже, чтобы проиллюстрировать это:

Попробуем ту же концепцию, но теперь с конструкцией for-of с массивом, набором и таблицей:

Давайте взглянем нам эту возможность в Firefox, чтобы увидеть сокращенный синтаксис ES6 для создания массивов и три цикла для создания возможных решений игры Cluedo:

В языках программирования модули представляют собой изолированные отдельные функции, которые не зависят друг от друга. Это помогает не только создавать повторно используемые среди проектов компоненты, но и позволяет изолировать ошибки между разными частями проекта. Мы занимались созданием модулей в JavaScript с AMD или CommonJS. Давайте создадим простой модуль, используя синтаксис ES6 и компилятор модулей.

Создадим модуль circle в файле in/circle.js с использованием ES6 синтаксиса. Этот модуль экспортирует две функции:

На данный момент структура папок показана ниже. Мы будем использовать компилятор ES6 для создания ES5 совместимого кода с двумя новыми файлами: js/circle.js и js/main.js

Наконец мы компилируем эти два файла. Переходим в папку in из командной строки:

Ресурсы

Многие из членов нашего сообщества веб-разработки открыто делятся своими знаниями о ES6. Я настоятельно рекомендую просмотреть их блог, связанные с ES6:

Немного для дальнейшего чтения:

Играем с ES6 сегодня

В итоге мы имеем десять особенностей ES6 с инструментами, которые позволяют нам использовать код с новым синтаксисом уже сегодня. Я надеюсь, что статья вам понравилась! Пожалуйста, обратите внимание, что, поскольку работа над стандартизацией еще в процессе, синтаксис может измениться. Тем не менее это конечно же стоит того, чтобы продолжить изучение дальше.

Источник