Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. News
Code

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

by
Length:LongLanguages:

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:

Версия JavaScript Издание ECMAScript Год
JavaScript 1.1 ECMAScript издание 1 1997
JavaScript 1.5 ECMAScript издание 3 1999
JavaScript 2.0 ECMAScript Harmony Работа еще в процессе

Обзор ES6

Цели

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

  • сложных объектов
  • библиотек
  • генераторов кода

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

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

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

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

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

  1. Область видимости в пределах блока с let [используя Firefox]
  2. Область видимости в предедах блока с const [используя Chrome]
  3. Классы [ используя Traceur ]
  4. Параметры функции по умолчанию [ используя TypeScript ]
  5. Коллекции [ используя NodeJS ]
  6. Деструктуризация [ используя Firefox
  7. Остаточные Параметры и Оператор Расширения [ используя плагин Grunt Traceur
  8. Итераторы [ используя Firefox ]
  9. Понимание массивов [ используя Firefox ]
  10. Модули ( используя ES6 Module Transpiler)

Возможность #1 - Область видимости в пределах блока с let

  • Документация: let
  • Инструмент: Бразуер Firefox 20.0: Меню > Инструменты > Веб-разработка > Веб-консоль

Переменные в JavaScript находятся в пределах видимости функций: Это означает, что даже если есть переменные, которые объявлены во вложенном блоке, то они будут доступны и в исходной функции. Рассмотрим небольшой пример ниже; Мы будем просто использовать веб-консоль в Firefox или Chrome для запуска. Как вы думаете, какое будет значение у переменной jsFuture?

В приведенном выше примере значение jsFuture в операторе console.log будет "es5". Решающим значением для вашего понимания должен быть тот факт, что в JavaScript, объявления переменных поднимаются наверх, но инициализации переменных нет. Следовательно независимо от того, где внутри области функции переменные инициализируются и объявляются, они всегда  будут подняты наверх. Фрагмент ниже такой же - с комментариями, чтобы проиллюстрировать поднятия переменных.

ES6 решает эту проблему с помощью let, который ведет себя как var, за исключением того, что его областью видимости является блок, а не функция. Давайте рассмотрим другой пример с var ниже. Вызов функции es[6]() вернет нам значение i = 10. Обратите внимание что несмотря на то, что выражение var i = 0; было объявлено внутри цикла for, область видимости var i по умолчанию глобальна. Следовательно, когда выполнилась функция es[6](), значением i является 10.

Давайте теперь попробуем использовать let. Для этого, мы будем использовать Firefox и откройте Web-консоль через меню (инструменты > веб-разработчик > веб-консоль). Создание переменной в цикле for, используя let c = i; заключает ее область видимости в пределах блока.

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


Возможность #2 - Область видимости в пределах блока с const

  • Документация: const
  • Инструмент: Браузер Chrome > Просмотр > Разработка > JavaScript консоль

Объявления констант теперь стали возможны с использованием ключевого слово const. let и const ведут себя схоже в том смысле, чтобы оба объявления будут иметь область видимости в пределах блока, но с const, значения переменных становятся доступны только для чтения и не могут быть предопределены в дальнейшем. Рассмотрим простой пример в Chrome:


Возможность #3 - Классы

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

Далее посмотрим, как ES6 реализует классы с минимальным синтаксисом объявления, который является очень важным, чтобы иметь возможность отличать классы и функции. Чтобы написать код для class, используя синтаксис ES6, мы будем использовать Traceur, который является компилятором кода ES6 в ES5. Сперва создадим структуру файла html, внутри которого мы вставим код объявления классов с использованием синтаксиса ES6. Чтобы скомпилировать код Traceur, нам нужен файл traceur.js для компилирования в JavaScript, а так же bootstrap.js, чтобы связать все вместе. В итоге Traceur будет искать теги вида script type="text/traceur", чтобы скомпилировать их содержимое в простой JavaScript.

Затем, внутри тега script type="text/traceur" мы будем использовать ES6 синтаксис для реализации того же класса Language, который мы делали до этого.

Теперь мы можем создавать инстанс class Language открывая HTML файл в Chrome используя выражение var js = new Language. И в консоли мы увидим определения для других свойств языка!

С таким понятным синтаксисом мы можем также перейти к расширению класса для реализации подкласса MetaLanguage, который будет наследовать все свойства из родительского класса Language. Внутри функции constructor, мы вызовем функцию super, которая в свою очередь вызовет конструктор родительского класса, чтобы унаследовать все его свойства. В конце концов мы можем добавить дополнительные свойства, как например version: Давайте рассмотрим синтаксис ES6 и запустим его в браузере Chrome:

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


Возможность #4 - Параметры функции по умолчанию

С параметрами функции по умолчанию мы можем всегда иметь некоторые значения для параметров функции, установив их по умолчанию. Синтаксис этой возможности в ES6 интуитивно понятен. Значения параметров по умолчанию задаются при определении функции. Давайте посмотрим на ES6 синтаксис в новом файле TypeScript с расширением *.ts.

Затем установим TypeScript как модуль npm и выполним файл .*ts и скомпилируем его в простой JavaScript. Вот команды для установки и компиляции из командной строки:

Команда выше создаст файл JavaScript с именем 4-default-params.js, который можно выполнить из HTML файла. Вот простой HTML файл, который вызывает внешний JavaScript файл, созданный компилятором TypeScript:

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

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


Возможность #5 - Коллекции

ES6 предоставляет новые структуры данных, прежде недоступные в JavaScript. Перед тем как мы погрузимся в изучение этих структур данных (Наборы и Таблицы), давайте посмотрим, как мы можем использовать синтаксис ES6 в NodeJS. Устанавливаем NodeJS; с этого момента мы будем работать в командной строке: Сначала проверяем, какая версия NodeJS у нас установлена, а затем проверяем доступны ли возможности ES6 из командной строки node --v8-options | grep harmony.

Далее запускаем NodeJS repl и смотрим, какие свойства доступны для Наборов и Таблиц. Мы запустим NodeJS repl с опцией node --harmony, чтобы задействовать возможности ES6.

Sets (Наборы)

Наборы - это простая структура данных, похожая на массив, но при этом каждый элемент имеет уникальное значение. Создадим новый файл, назовем его 5-sets.js и вставим в него код для операций создания, добавления и удаления из набора, который мы создадим. Кроме того обратите внимание, что несмотря на то, что мы дважды добавили "Hippo", данные будут вставлены только один раз!

Запустим файл с помощью команды node --harmony 5-set.js. Теперь обратите внимание, что несмотря на то, что "Hippo" был добавлен дважды, после его удаления из набора, этих данных больше в нем нет. Это еще раз показывает, что набор — это структура данных, которая может содержать только уникальные значения.

Maps (Таблицы)

Таблицы очень похожи на пары ключ-значение в объектах JavaScript. Используя уникальный ключ, мы можем получить значение. В ES6 ключом может быть любой тип данных JavaScript, а не только строки. Это самое интересное! Создадим новый файл 5-map.js, чтобы потренироваться с таблицами:

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


Возможность #6 - Деструктуризация

В языках программирования термин "деструктуризация" обозначает соответствие шаблону. В ES6 мы можем сделать некоторые довольно интересные совпадения по шаблону в массивах и объектах, которые ранее бы потребовали от нас действий на один шаг больше. Давайте рассмотрим некоторые из них в веб-консоли Firefox .

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

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

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

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

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


Возможность #7 - Остаточные Параметры и Оператор Расширения.

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

В ES6 остаточные параметры позволяет нам легко использовать несколько фиксированных параметров в функции, наряду с остальным переменным количеством параметров. Раньше мы использовали arguments, который представляет собой объект, содержащий параметры, которые были переданы в функцию, но мы не можем использовать функцию для манипулирования этими аргументами. С использованием понятного синтаксиса ES6 мы можем воспользоваться тремя точками ... для обозначения переменного числа аргументов.

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

  1. Устанавливаем утилиту grunt для командной строки:

  2. Создаем файл package.json, в котором определены различные модули, необходимые для запуска Grunt. Обратите внимание, что этот список зависимостей включает в себя плагин traceur:

  3. Создаем файл Gruntfile.js, который будет содержать лишь одну задачу traceur, которая будет конвертировать ES6 синтаксис в сегодняшний JavaScript. И теперь мы может использовать ES6 остаточные параметры.

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

  5. Самое главное - мы создадим файл rest-spread.js, который будет содержать синтаксис остаточных параметров:

  6. Наконец мы будем запускаем команду grunt в командной строке, которая по умолчанию, запустит traceur задачу и создаст файл js/5-rest-spread.js. Далее просто просмотрим файл index.html в браузерной консоли:

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

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

Мы будет использовать тот же файл rest-spread.js, который использовался выше для остаточных параметров, и добавим в него код оператора расширения. В примере ниже, функция требует 6 различных аргументов. При вызове функции данные передаются как массив в оператор расширения. Давайте взглянем как выглядит синтаксис при вызове функции с фиксированным количеством аргументов и с переменным количеством.

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

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

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


Возможность #8 - Итераторы

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

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


Возможность #9 - Array Comprehension

Array comprehensions дают нам сокращенный синтаксис для манипулирования содержимым каждого элементом массива по определенному шаблону. Это очень похоже на то, что делают методы map() или filter(), доступные в объекте Array. Давайте рассмотрим, то как мы используем map()

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


Возможность #10 - Модули

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

  1. Во-первых мы создадим HTML-файл index.html, который будет вызывать основной JavaScript. Мы будем использовать RequireJS как загрузчик AMD; Следовательно мы ссылаемся на CDN копию последней версии файла RequireJS. Далее мы также добавим атрибут data-main тегу script чтобы RequireJS загрузил файл js/init.js.

  2. Теперь мы создадим файл js/init.js, который будет просто вызывать js/main.js:

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

  4. Создаем файл in/main.js, который будет импортировать модуль circle, так чтобы мы могли использовать его функции. Обратите внимание на синтаксис import:

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

  6. Установка компилятора модулей ES6:

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

  8. Взгляните на скомпилированный код в файлах js/circle.js и js/main.js. Теперь открываем файл index.html в браузере, чтобы увидеть модули в действии. Нам потребуется веб-сервер для запуска этого файла. Я использую Python SimpleHTTPServer. Переходим в командной строке в корень файла index.html:


Ресурсы

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

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


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

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.