JavaScript ES6 история развития языка и создания новых версий ECMAScript


Содержание материала:

ECMAScript 6 (2015)

ECMAScript 6 также известен как ES6 и ECMAScript 2015.

Некоторые предпочитают называть его JavaScript 6.

В этой главе мы рассмотрим некоторые новые особенности ES6.

  • Ключевое слово let
  • Ключевое слово const
  • Значения параметров по умолчанию
  • Оператор возведения в степень (**) (ECMAScript 2020)
  • Метод Array.find()
  • Метод Array.findIndex()

Ключевое слово let

Ключевое слово let позволяет декларировать переменные внутри области видимости блока, ограниченной фигурными скобками < >.

Так, повторная декларация переменной при помощи ключевого слова var может привести к проблеме:

Повторная же декларация переменной при помощи ключевого слова let решает эту проблему:

Ключевое слово const

Ключевое слово const используется для декларации переменной с константным значением.

По действию оно похоже на ключевое слово let, только значение такой переменной нельзя изменять.

Константная переменная во время декларирования должна быть инициализирована.

Подробнее о ключевых словах let и const см. главы Ключевое слово let и Ключевое слово const.

Значения параметров по умолчанию

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

Оператор возведения в степень

Оператор возведения в степень (**) возводит первый операнд в степень, заданную вторым операндом:

Выражение x ** y дает тот же результат, что использование метода Math.pow(x,y):

Метод Array.find()

Метод find() возвращает значение первого элемента массива, прошедшего заданную проверку в функции обратного вызова.

В следующем примере происходит поиск (и возврат значения) первого элемента, значение которого больше 18:

Функция обратного вызова принимает 3 параметра:

  • Значение элемента (value)
  • Индекс элемента (index)
  • Сам массив (array)

Метод Array.findIndex()

Метод findIndex() возвращает индекс первого элемента массива, прошедшего заданную проверку в функции обратного вызова.

В следующем примере возвращается индекс первого элемента, значение которого больше 18:

Функция обратного вызова принимает 3 параметра:

  • Значение элемента (value)
  • Индекс элемента (index)
  • Сам массив (array)

Новые свойства объекта Number

В ES6 были добавлены новые свойства объекту Number:

  • EPSILON
  • MIN_SAFE_INTEGER
  • MAX_SAFE_INTEGER

Новые методы объекта Number

В ES6 было добавлено 2 новых метода объекту Number:

Метод Number.isInteger()

Метод Number.isInteger() возвращает true, если его параметр — целое число.

Метод Number.isSafeInteger()

Безопасное целое число — это число, которое может быть представлено в виде числа двойной точности.

Метод Number.isSafeInteger() возвращает true, если его параметр — безопасное целое число.

Безопасными являются все целые числа в диапазоне от (253 — 1) до (253 — 1).
Это число безопасное: 9007199254740991. Это число не безопасное: 9007199254740992.

Новые глобальные методы

В ES6 также было добавлено 2 новых глобальных метода:

Метод isFinite()

Глобальный метод isFinite() возвращает false, если его параметр имеет тип Infinity или NaN. В обратном случае возвращается true:

Метод isNaN()

Глобальный метод isNan() возвращает true, если его параметр имеет тип NaN. В обратном случае возвращается false:

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

«Стрелочные» функции предоставляют короткую запись для выражений-функций.

В выражении-функции больше не нужно использовать ключевые слова function, return и фигурные скобки :

У стрелочных функций нет своего значения this. И они не подходят для определения методов объектов.

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

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

ES6: Вместо введения

Открывая любую книгу, посвященную JavaScript, вы с огромной долей вероятности обнаружите в ней целую главу посвященную истории развития ECMAScript, избыточно описывающую тот долгий путь, пройденный стандартом. Но, на самом деле, ES практически не развивался с момента релиза третьей версии (ES3), который состоялся в декабре 1999 года. Позже, в июне 2011 года, ES5 стал официальным стандартом. Путем нехитрых вычислений вы можете подсчитать, что между релизами двух стандартов прошло чуть менее 12 лет. Что было добавлено в стандарт ES5 в результате 12 лет разработки:

  • Strict mode
  • Аксессоры (геттеры и сеттеры)
  • Небольшие изменения синтаксиса:
    • появилась возможность использовать ключевые слова в качестве свойств объектов
    • строковые литералы теперь можно размещать в несколько строк кода
    • после последнего элемента массива и объекта можно ставить запятую
  • Несколько десятков новых функций в стандартной библиотеке для работы с массивами, объектами (Object.create, Object.defineProperty, Object.keys и так далее), функциями и датами
  • Поддержка JSON

Более подробное описание всех нововведений ES5 можно посмотреть в книге Speaking JavaScript (доступна онлайн).

Список новых возможностей, добавленных в стандарт ES5, можно пересчитать по пальцам одной руки. Из всего вышеперечисленного может сложиться впечатление, что развитие JavaScript и в будущем будет происходить крайне медленно. Это не так. Новый стандарт ES6 принёс с собой огромное количество нововведений, наиболее полный список которых можно посмотреть в этом репозитории (список содержит 350 пунктов).

Все нововведения подразделяются на три группы:

  • Улучшение синтаксиса для уже существующих решений (например, в библиотеках):
    • Классы
    • Модули
  • Новая функциональность в стандартной библиотеке:
    • Новые методы для массивов и строк
    • Promises
    • Maps и Sets
  • Абсолютно новые возможности:
    • Генераторы (Generators)
    • Прокси (Proxies)
    • WeakMaps

ES6 был утвержден в июне 2015 года. Уже сейчас вы можете использовать многие возможности нового стандарта в свежих версиях браузеров и node.js. Подробную таблицу совместимости можно посмотреть здесь.

ES6 или ES2015? Что вообще происходит?

Официальное название нового стандарта − ES2015. Тем не менее, ES6 − название, которое все понимают и используют.

Зачем было менять систему названий версий? Подобное решение связано с новым процессом разработки стандарта. Все предыдущие стандарты разрабатывались крупными компаниями (Google, Microsoft, Yahoo и прочими), связанными с созданием браузеров или других сред, поддерживающих JavaScript. При подобном подходе к разработке стандарта рядовой разработчик практически никак не мог повлиять на развитие языка.

Процесс разработки стандарта ES6 кардинально отличается от предыдущего. Новый процесс выглядит следующим образом:

  1. Создается предложение внести новую возможность, поменять текущую синтаксическую конструкцию или любое другое улучшение.
  2. Создается “черновик” − подробное описание того, как работает предлагаемое изменение.
  3. Изменение становится “кандидатом” на внесение в стандарт. Будучи “кандидатом” изменение рассматривается теми, кто будет создавать имплементации, а также обычными пользователями.
  4. Изменение вносится в стандарт.

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

Стоит ли вообще изучать стандарт ES5 сейчас?

Да, стоит. Вот почему:

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

История ES6-модулей

Владислав Власов, инженер-программист в Developer Soft и преподаватель курса Нетологии, специально для блога написал цикл статей о EcmaScript6. В первой части на примерах рассмотрели динамический анализ кода в EcmaScript с помощью Iroh.js, во второй сосредоточились на реализации отменяемых Promises. В этой статье поговорим об истории ES6-модулей.

История языка EcmaScript простирается от простого языка сценариев в браузере вплоть до современного языка общего назначения, работающего в различных хост-окружениях. Вместе с усложнением языка появилась и необходимость организации модульной структуры и переиспользования кода с помещением его в библиотеки. Первые библиотеки импортировались за счет загрузки соответствующего JS-файла с хоста поставщика или CDN, а взаимодействие производилось, как правило, посредством экспорта функций и классов с заранее известными именами в глобальное пространство — объект window.

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

Сложности начинаются, когда библиотек и взаимосвязей между ними становится слишком много.

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

Вопрос вложенных зависимостей может решаться с помощью

Браузер без поддержки ES6-модулей просто загрузит dist/bundle.js и будет работать по старой схеме. Современный браузер возьмет app/index.js в качестве точки входа и будет загружать зависимые ресурсы автоматически.

О вопросах эффективной настройки webpack-а для рассмотренной выше схемы, асинхронной и отложенной загрузки модулей, кэшировании зависимостей, inline-модулях и CORS-политиках для них можно прочесть более детально: «ES6 modules support lands in browsers: is it time to rethink bundling?» и «ECMAScript modules in browsers».

Итоги

Язык EcmaScript прошел большую историю и продолжает развиваться по сей день. Многие решения были актуальны для своего времени и позволяли решать задачи, в том числе упреждающую поддержку функциональности, еще не встроенной в клиентских агентах. Сейчас браузеры и Node.js-сервер выпускает обновление версий достаточно часто, добавляя в них современную функциональность EcmaScript.

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

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

Таким образом, настраивая сборку веб-приложения, целесообразно предоставлять современным агентам код на современном EcmaScript, включая синтаксические элементы и импорты/экспорты модулей.

Нововведения в ES6 для новичков

Учебник JavaScript

Практика

Работа с DOM

Практика

Некоторые продвинутые вещи

Рекомендованное ES6

Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.

Регулярки

Разное

Работа с канвасом

Практика

  • урок исключен (мало материала), по аяксу скоро будет отдельный учебник (много материала)
    Работа с
    AJAX в JavaScript
    Работа с
    AJAX + PHP

Контекст

Drag-and-Drop

  • Урок №
    Введение
    в ООП в стиле ES6
  • Урок №
    Основы
    работы с ООП
  • Урок №
    Наследование
    классов в JavaScript
    Продвинутая работа
    с классами на JavaScript
  • Урок №
    Применение
    ООП при работе с DOM
  • Урок №
    Практика
    по ООП в JavaScript
  • Тут скоро будут еще уроки
    по функциональному и прототипному
    стилю ООП.

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

Библиотека jQuery

Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.

В 2015 году вышел в свет новый стандарт JavaScript — ECMAScript-2015 (или по-простому ES6). В нем появилось достаточно много нововведений, которые еще не работают во всех браузерах, но работу с ними уже можно изучать, чтобы быть готовым к тому моменту, когда это все заработает.


Кроме того, эти вещи можно использовать уже сейчас, если использовать специальные программы-транспойлеры, которые конвертируют код из нового стандарта в старый.

Команда let вместо var

Кроме команды var для объявления переменных появилась еще и команда let. Эта команда более строгая и нужна для того, чтобы ограничить область видимости переменных фигурными скобками.

Давайте посмотрим разницу между var и let. Посмотрите, как работает var: он не создает область видимости внутри if — если объявить переменную снаружи if, а потом переопределить ее внутри — снаружи эта переменная тоже поменяется:

А теперь посмотрим, как работает let — он создает разные области видимости снаружи и внутри if. И, если объявить переменную снаружи if, а затем попытаться затереть ее внутри — она не изменится:

Команда let создает разные области видимости не только в if, но и в циклах и вообще в любых фигурных скобках.

Константы

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

Константа объявляется командой const вместо команды var:

Если попытаться сменить значение константы — мы получим ошибку:

Константы-объекты

Объекты также можно делать константами. В этом случае значения их свойств разрешено менять, так же, как и добавлять новые свойства:

А вот затереть объект и записать туда что-нибудь другое уже не получится — вы увидите ошибку:

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

Следующее понятие, которое появилось в ES6 называется деструктуризация. Деструктуризация — это разделение массива или объекта в отдельные переменные.

Пусть у нас дан массив [‘Иванов’, ‘Иван’]. Давайте фамилию положим в переменную surname, а имя — в переменную name. Для этого массив присвоим вот такой конструкции: var [surname, name], вот так: var [surname, name] = [‘Иванов’, ‘Иван’].

Эта конструкция [surname, name] и есть деструктуризация. Получится, что первый элемент массива (то есть ‘Иванов’) запишется в переменную surname, а второй — в переменную name.

Давайте посмотрим на примере:

Можно начать записывать в переменные не сначала массива, а пропустить некоторые значения. Давайте, к примеру, пропустим фамилию, а имя и возраст запишем в переменные. Для этого при указании переменных перед первой переменной поставим запятую, вот так: [, name, age].

Посмотрим на примере:

Можно пропустить не одно значение, а несколько:

Если в массиве больше элементов, чем переменных — лишние элементы никуда не запишутся и ничего страшного не произойдет:

Можно сохранить оставшиеся значения массива в отдельный массив. Для этого перед переменной, в которую положится остаток, следует написать троеточие. В следующем примере фамилия и имя запишутся в соответствующие переменные, а остаток массива в переменную rest:

Если в массиве меньше элементов, чем переменных, то в «лишние» переменные запишется undefined:

Для переменных можно указывать значения по умолчанию. В этом случае, если переменной не хватит элемента массива — возьмется значение по умолчанию.

В следующем примере переменной name по умолчанию указано значение ‘Аноним’:

А вот если для переменной name будет значение в массиве — значение по умолчанию будет проигнорировано:

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

Интересный пример применения деструктуризации — поменяем переменные местами:

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

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

Можно сделать так, чтобы имена переменных не совпадали в именами ключей объекта:

Можно также указывать значения по умолчанию. К примеру, укажем для цвета по умолчанию значение ‘black’, закомментируем элемент объекта с ключом color — и теперь в переменную color положится ‘black’:

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

Итераторы

В ES6 появились так называемые итераторы for-of, которые позволяют более удобно перебирать элементы массива, подобно объектам через for-in:

Напоминаю, почему массивы нельзя перебирать через for-in — это вызовет проблемы, если с массивом поработали как с объектом и добавили в него какое-либо свойство: в этом случае это свойство также попадет в перебор (а мы этого не хотели):

Итераторы для строк

Итераторы работают и для строк — в этом случае в цикле строка будет перебираться посимвольно:

Строки

В JavaScipt в строках не должно быть переноса строки — это приведет к ошибке:

Это поправили в ES6 — только строки нужно брать не в обычные кавычки, а в косые:

В косых кавычках можно вставлять выражения в формате $ <имя переменной>— в этом случае туда подставятся значения переменных, а также выполнятся математические операции:

Нововведения в функциях

Достаточно много нововведений коснулось функций. Давайте с ними разбираться.

Значения по умолчанию

В функциях наконец-то появились значения по умолчанию. Давайте разберем их на примере: у нас есть функция square, которая возводит число в квадрат. Сделаем так, чтобы, если параметр функции не передан, она возводила в квадрат число 3, а если передан — то переданное число:

Значением по умолчанию также может служить результат работы другой функции:

Деструктуризация в функциях

В параметрах функций также доступна деструктуризация.

Давайте сделаем функцию, принимающую произвольное количество параметров. Пусть в первый параметр запишется фамилия, во второй — имя, а в третий все остальные параметры в виде массива:

Функция также может принимать объект, элементы которого запишутся в разные переменные:

Также можно указывать параметры по умолчанию:

Также можно переименовывать переменные:

Ну, и можно комбинировать параметры по умолчанию и переименование:

Функции через =>

В ES6 появился упрощенный синтаксис функций через =>. Эта стрелка заменяет команду function и, если внутри функции только одна строка, — то return тоже не нужен — функция вернет результат выполнения этой строки.

В следующем примере вы видите функцию в новом стиле, а ниже эквивалент в старом стиле:

Если у функции несколько параметров — их надо брать в скобки:

Если функция вообще без параметров — то нужны пустые круглые скобки:

Если в функции несколько строк — необходим return:

Стрелочные функции удобно использовать в качестве анонимных:

Доступность this

Давайте рассмотрим некоторую проблему с this. Вы уже могли с ней сталкиваться ранее, но если вдруг не сталкивались — самое время про нее узнать.

Пусть у нас дан элемент и массив:

Давайте к этому элементу привяжем функцию, а в этой вызовем другую функцию, например, через forEach:

Все переменные, определенные выше forEach — доступны и в нем:

Однако, это не касается this — снаружи forEach он ссылается на наш элемент, а вот внутри него this будет недоступен или будет ссылаться на объект window (так устроен this — его значение зависит от контекста):

Чтобы сделать this доступным внутри вложенной функции обычно поступают так: записывают его в какую-либо переменную снаружи вложенной функции (переменную можно назвать как угодно, обычно это that или self). Получается, что внутри вложенной функции наш this будет доступен как that:

В вот в стрелочных функциях нет таких проблем нет — контекст выполнения не меняется и this без всяких ухищрений доступен и внутри функции:

Топ-пост этого месяца:  Сортировка данных по возрастанию и убыванию с помощью условия order by SQL

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Когда все решите — переходите к изучению новой темы.

ECMAScript 6 (ES6): что нового в новой версии JavaScript

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

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

Переменные

Вы привыкли к объявлению переменных с помощью var . Теперь вы можете использовать также и let . Тонкое различие заключается в области видимости. В то время как var в качестве области видимости дает в результате тело функции, в которой объявлена переменная, то область видимости переменной, объявленной с помощью let , – это только блок, в котором выполнено объявление.

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

Часто можно было бы использовать, например, переменную j для другой итерации в этой же области видимости. Но с let , вы можете смело объявлять i снова, так как переменные объявлены и доступны только внутри области видимости их собственного блока.

CONST

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

Обратите внимание, что вы все еще можете изменять значения свойств объекта или членов массива:

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

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

Если мы посмотрим на синтаксис стрелочных функций, то не увидим ключевого слова function . Остается только ноль или более аргументов, «жирная стрелка» ( => ) и выражение функции. Возвращаемое выражение добавляется неявно.

При нуле или более одном аргументе, вы должны добавить круглые скобки:

Заключите выражение функции в блок (<. >) , если вам необходима более сложная логика или больше пробельных символов (например, символ новой строки):

Стрелочные функции означают не только меньшее количество напечатанных символов, но их поведение отличается от обычных функций. Выражение стрелочной функции наследует this и аргументы из окружающего контекста. Это означает, что вы можете избавиться от уродливых выражений, подобных var that = this , и вам не нужно связывать функции с правильным контекстом. Пример кода (обратите внимание на this.title в сравнении с that.title в версии ES5):

Строки

Методы

К прототипу String была добавлена пара удобных методов. Большинство из них служат просто устранения обходных путей с методом indexOf() для получения того же результата:

Просто, но эффективно. Другой удобный метод был добавлен для создания повторяющейся строки:

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

Шаблонные литералы обеспечивают чистый способ для создания строк и интерполяции выражений. Возможно, вы уже знакомы с синтаксисом; он основан на знаке доллара и фигурных скобках $ <. >. Шаблонные литералы заключаются в обратные кавычки. Краткий пример:

Как видно из кода выше, шаблонные литералы просто удобны для конкатенации по сравнению с ES5. Однако шаблонные литералы также можно использовать и для многострочных литералов. Имейте в виду, что пробельные символы (например, символ новой строки) являются частью строки:

Массивы

Появилось несколько новых статических методов класса у объекта Array и несколько новых методов у прототипа Array .

Во-первых, Array.from создает экземпляры Array из массивоподобных и итерируемых объектов. Примеры массивоподобных объектов включают в себя:

  • arguments внутри функции;
  • nodeList , возвращенный методом document.getElementsByTageName() ;
  • данные новых структур Map и Set .

В приведенном выше примере, вы можете увидеть, что у массива элементов есть метод forEach , который недоступен в коллекции itemElements .

Интересной особенностью Array.from является второй необязательный аргумент mapFunction , который позволяет создать новый распределяемый массив в одном вызове.

Далее у нас есть Array.of , который ведет себя так же, как конструктор Array . Он исправляет особый случай, когда в качестве аргумента передается одно число. Это делает Array.of более предпочтительным по сравнению с new Array() . Тем не менее, в большинстве случаев вы захотите использовать литералы array.

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

  • find возвращает первый элемент, для которого функция обратного вызова вернет true;
  • findIndex возвращает индекс первого элемента, для которого функция обратного вызова вернет true;
  • fill «перезаписывает» элементы массива переданным аргументом.

В объект Math была добавлена пара новых методов.

  • Math.sign возвращает знак числа как 1 , -1 или 0 ;
  • Math.trunc возвращает переданное число без цифр после запятой;
  • Math.cbrt возвращает кубический корень числа.

Если вы хотите узнать больше о новых числовых и математических возможностях в ES6, Dr. Axel Rauschmayer расскажет вам.

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

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

Во-первых, посмотрим, как развернуть элементы массива внутри другого массива:

Синтаксис распространения также удобен при вызове функций с аргументами:

Как можете видеть, это спасает нас от часто используемого обхода fn.apply() . Синтаксис очень гибок, поэтому оператор распространения может использоваться в любом месте в качестве списка аргументов. Это означает, что следующий вызов дает тот же результат:

Мы применяем оператор распространения к массивам и аргументам. На самом деле, он может быть применен ко всем итерируемым объектам, таким как NodeList :

Теперь allTheThings – это одномерный массив, содержащий элементы и их дочерние элементы и .

Деструктурирование

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

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

Деструктурирование также работает и с объектами. Убедитесь в наличии соответствующих ключей:

Также вы можете использовать этот механизм, чтобы изменить имена переменных:

Еще один интересный образец имитации нескольких возвращаемых значений:

Деструктурирование может быть использовано, чтобы задать значения по умолчанию для объектов аргументов. С литералом объекта вы можете имитировать именованные параметры.

Параметры

Значения по умолчанию

Значения по умолчанию для параметров функций доступны в ES6 со следующим синтаксисом:

Выглядит довольно чисто, не так ли? Я уверен, что раньше вы были вынуждены заполнять некоторые аргументы в ES5 похожим способом:

Значение по умолчанию для аргумента вызывается либо undefined , либо отсутствием аргумента.

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


Ранее мы рассмотрели оператор распространения. Остаточные параметры очень похожи на него. Они также используют синтаксис . и позволяют сохранять оставшиеся аргументы в массив:

Модули

Модули – это, конечно, долгожданное дополнение к языку JavaScript. Я думаю, что это главное, ради чего стоит копаться в ES6.

Сегодня любой серьезный JavaScript проект использует какой-либо тип модульной системы, возможно что-то вроде шаблона «открытый модуль» или более обширные форматы AMD или CommonJS. Тем не менее, браузеры не располагают каким-либо типом модульной системы. Вам всегда необходим либо этап сборки, либо загрузчик ваших модулей AMD или CommonJS. Инструменты для обработки этого включают в себя RequireJS, Browserify и Webpack.

Спецификация ES6 включает в себя как новый синтаксис, так и механизм загрузчика модулей. Если вы хотите использовать модули и писать на будущее, то должны использовать данный синтаксис. Современные инструменты сборки поддерживают этот формат, возможно через плагин, поэтому всё должно пройти хорошо (не беспокойтесь, мы обсудим это далее в разделе «Транспиляция»).

А теперь о синтаксисе модулей ES6. Модули разработаны вокруг ключевых слов export и import . Рассмотрим пример с двумя модулями сразу:

Как можете видеть, возможен экспорт нескольких выражений export . Каждое должно явно указывать тип экспортируемого значения (в этом примере function и var ).

Выражение import в этом примере использует синтаксис (подобный деструктуризации), чтобы явно определить, что будет импортировано. Чтобы импортировать модуль целиком, должен быть использован символ * в сочетании с ключевым словом, чтобы дать модулю локальное имя:

В модульной системе есть экспорт default , который может быть функцией. Чтобы импортировать это значение по умолчанию в модуле, вам необходимо только предоставить локальное имя (т.е. без деструктурирования):

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

Классы

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

Классы построены вокруг ключевых слов class и constructor . Небольшой пример:

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

Чтобы создать экземпляр класса, вы должны использовать ключевое слово new . Для наследования базового класса, используйте extend :

Из любого конструктора или метода производного класса вы можете использовать super , чтобы получить доступ к базовому классу:

  • чтобы вызвать родительский конструктор, используйте super() ;
  • чтобы вызвать другой метод, используйте, например, super.getName() .

Если вы хотите копать эту тему глубже, я рекомендую «Классы в ECMAScript 6» от Dr. Axel Rauschmayer.

Символы

Символы – новый примитивный тип данных, как, например, Number и String . Вы можете использовать символы, чтобы создать уникальные идентификаторы для свойств объекта, или чтобы создать уникальные константы.

Обратите внимание, что набор пар ключ-значение с символами не возвращается методом Object.getOwnPropertyNames() , и они не видны в итерациях for. in , Object.keys() или JSON.stringify() . Этим они отличаются от обычных ключей на основе строк. Вы можете получить массив символов объекта с помощью Object.getOwnPropertySymbols() .

Символы, естественно, работают с 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 могут использоваться практически «свободно», например, модули, стрелочные функции, остаточные параметры и классы. Эти функции могут быть транспилированы в ES5 без больших накладных расходов. Дополнения к объектам и прототипам Array , String и Math (например, Array.from() и «it».startsWith(«you») ) требуют так называемых «заполнителей» (polyfills). Заполнители – временные костыли для функционала, который пока не поддерживается браузером. Вы можете загрузить заполнитель первым, и ваш код будет работать, как если бы браузер поддерживал этот функционал. и Babel, и Traceur предоставляют такие заполнители.

Смотрите таблицу совместимости ES6 от Kangax для полного обзора возможностей ES6, которые поддерживаются транспиляторами и браузерами. Мотивирует то, что на момент написания статьи, последние браузеры уже поддерживают от 55% до более 70% всех возможностей ES6. Microsoft Edge, Google Chrome и Mozilla Firefox здесь действительно конкурируют друг с другом, и это хорошо для веба в целом.

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

Что дальше?

После того, как вы установите транспилятор, вы вероятно захотите начать использовать «маленькие» нововведения, такие как let и стрелочные функции. Имейте в виду, что код, который уже написан для ES5, будет нетронут транспилятором. Как только вы улучшите свои скрипты с ES6 и получите от этого удовольствие, то начнете постепенно добавлять в код всё больше и больше возможностей ES6. Возможность преобразовать какой-либо код в новые модули или синтаксис классов. Я обещаю, что это будет круто!

В ES6 гораздо больше возможностей, чем мы смогли охватить в этой статье. Неохваченные возможности включают в себя Map , Set , тегированные шаблонные строки, генераторы, Proxy и Promise .

Заключение

При использовании транспилятора весь ваш код эффективно «заключается» в ES5, пока браузеры будут продолжать добавлять новые возможности. Таким образом, даже если браузер полностью поддерживает определенную возможность ES6, ES5-совместимая версия, которая будет использоваться, возможно будет хуже по производительности. Вы можете рассчитывать на то, что любая возможность ES6, и в конечном счете все из них, будут поддерживаться в определенном месте (в браузерах и средах, которые вам необходимо поддерживать на тот момент). Но до тех пор мы должны выборочно отключать возможности ES6 от транспиляции в ES5, чтобы предотвратить излишнюю нагрузку. Имея это в виду, решите для себя, подходит ли данный момент, чтобы начать использовать ES6 (какие-либо его части).

Используем 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:

Версия 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

  • Документация: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:

Топ-пост этого месяца:  Сервис Gravatar регистрация, настройка, установка аватара

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

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

В объектно-ориентированных языках 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 — Параметры функции по умолчанию

  • Документация: параметры функции по умолчанию
  • Инструмент: TypeScript 0.8.3

С параметрами функции по умолчанию мы можем всегда иметь некоторые значения для параметров функции, установив их по умолчанию. Синтаксис этой возможности в 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 — Коллекции

  • Документация:Наборы и Таблицы
  • Инструмент:NodeJS v0.10.4

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 — Деструктуризация

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

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

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

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

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

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

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

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

  • Доументация:Остаточные Параметры и Оператор Расширения
  • Инструмент:Grunt плагин Traceur

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Документация:Модули, Примеры модулей, Загрузчики модулей
  • Инструмент:компилятор модулей ES6

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

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

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

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

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

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

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

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

Ресурсы

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

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

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

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

Краткая история JavaScript. Часть 1

Соперничество Netscape и Mosaic, грёзы об интерактивном вебе, язык программирования для не-программистов, переход от классов к прототипам и что общего между JavaScript и ECMAScript (спойлер: всё).

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

Все началось в 90-е

События, в результате которых появился JavaScript, разворачивались в течение шести месяцев, с мая по декабрь 1995 года. Компания Netscape Communications уверенно прокладывала себе путь в области веб-технологий. Её браузер Netscape Communicator успешно отвоевывал позиции у NCSA Mosaic, первого популярного веб-браузера. Netscape была создана людьми, принимавшими участие в разработке Mosaic в ранние 90-е. Теперь, с деньгами и независимостью, у них было всё необходимое для поиска способов дальнейшего развития веб-технологий. Именно это послужило толчком для рождения JavaScript.

Основатель Netscape Communications и бывший участник команды Mosaic Марк Андриссен считал, что веб должен стать более динамичным. Анимации, взаимодействие с пользователями и другие виды интерактивности должны стать неотъемлемой частью интернета будущего. Веб нуждался в лёгком скриптовом языке (или языке сценариев — прим.ред.), способном работать с DOM, который в те дни не был стандартизирован. Существовало одно «но», являвшееся на тот момент серьёзным вызовом: этот язык не должен был предназначаться для крупных разработчиков и прочих людей, имевших отношение к инженерной стороне вопроса. Java в те дни уже активно развивалась и твёрдо заняла эту нишу. Таким образом, новый скриптовый язык должен был предназначаться для совершенно иной аудитории — дизайнеров. Очевидно, что веб был статичным, а HTML был достаточно молод и прост в освоении даже для тех, кто не имел ничего общего с программированием. Следовательно, всё, что должно было стать частью браузера и сделать веб более динамичным, должно быть максимально понятным для далёких от программирования людей. Из этого предположения родилась идея Mocha, который должен был стать тем самым простым, динамичным и доступным скриптовым языком.

И тут в нашей истории появляется Брендан Айк, отец JavaScript. Айк должен был разработать для Netscape «Scheme для браузера». Scheme — это динамичный, мощный и функциональный диалект языка программирования Lisp с максимально упрощённым синтаксисом. Вебу требовалось что-то подобное: простое в освоении, динамичное, немногословное и мощное. Айк не стал упускать шанса поработать над тем, что ему нравилось, и присоединился к команде.

Перед командой была поставлена задача подготовить работающий прототип в кратчайшие сроки. Sun Microsystems заканчивала работу над своим языком программирования Java, на тот момент называвшимся Oak, и Netscape Communications была уже готова заключить с компанией контракт, чтобы сделать Java доступным в своем браузере. Так зачем же понадобился Mocha (первое название JavaScript)? Зачем нужно было создавать абсолютно новый язык программирования при наличии готовой альтернативы? Дело в том, что Java не был предназначен для той аудитории, на которую ориентировался Mocha — скриптеры, любители, дизайнеры. Java был слишком большим и навороченным для того, чтобы выполнять эту роль. Основная идея заключалась в том, что Java должен был предназначаться для крупных разработчиков и профессиональных программистов, в то время, как Mocha должен был использоваться для небольших скриптовых задач. Другими словами, Mocha должен был стать скриптовым компаньоном для Java по принципу, аналогичному тому, как взаимодействуют C/C++ и Visual Basic на платформе Windows.

Инженеры Netscape приступили к детальному изучению Java. Они даже начали разрабатывать собственную виртуальную машину Java, однако проект быстро свернули, так как она не могла достичь идеальной совместимости с виртуальной машиной Sun Microsystems.

Проблема скорейшего выбора языка стояла как никогда остро. Возможными кандидатами были Python, Tcl и Scheme. Айк должен был действовать быстро. По сравнению с конкурентами у него были два преимущества: свобода в определении набора необходимых возможностей и прямая связь с заказчиком. К несчастью, имело место и очевидное неудобство: для принятия огромного количества важных решений времени практически не было. JavaScript, a.k.a. Mocha, был рождён именно в таких условиях. В течение нескольких недель был подготовлен рабочий прототип, который затем был интегрирован в Netscape Communicator.

То, что должно было стать аналогом Scheme для браузера, вылилось в нечто совершенно иное. Рукой Айка управляли необходимость закрыть сделку с Sun и сделать Mocha скриптовым компаньоном для Java. Синтаксис должен был быть максимально близким Java. Помимо этого, от Java была унаследована семантика для большого количества устоявшихся идиом. Таким образом, Mocha был совсем не похож на Scheme. Он выглядел, как динамический Java, под оболочкой которого скрывался гибрид Scheme и Self.

Прототип Mocha был интегрирован в Netscape Communicator в мае 1995 года. Через очень короткий промежуток времени он был переименован в LiveScript, так как в тот момент слово live выглядело очень привлекательным с точки зрения маркетологов. В декабре 1995 года сделка между Netscape Communications и Sun была закрыта: Mocha/LiveScript был переименован в JavaScript и преподносился в качестве скриптового языка для выполнения небольших клиентских задач в браузере, в то время, как Java был полноценным профессиональным языком программирования для разработки сложных веб-компонентов.

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

Трудно сказать, как развивались бы события, если бы Айк не успел предоставить рабочий прототип вовремя. Python, Tcl, Scheme, рассматривавшиеся в качестве альтернативы, были совершенно не похожи на Java. Sun было бы трудно принять в качестве языка-компаньона для Java варианты, в корне отличавшиеся от него. С другой стороны, Java долгое время был важной частью веба. Если бы Sun не являлись определяющим фактором, у Netscape было бы намного больше свободы в выборе языка. Но стала бы Netscape разрабатывать собственный язык или воспользовалась одним из существующих? Этого мы никогда не узнаем.

Различные реализации

Когда Sun и Netscape закрыли сделку, и Mocha/LiveScript был переименован в JavaScript, встал ребром очень важный вопрос: что будет с конкурентами? Хоть Netscape и набирал популярность, становясь самым используемым браузером, Microsoft занималась активной разработкой Internet Explorer. С самых первых дней JavaScript показал настолько удивительные возможности в плане взаимодействия с пользователем, что соперничающим браузерам не оставалось ничего иного, кроме как в кратчайшие сроки найти готовые решения, представлявшие собой рабочие реализации JavaScript. В тот момент (и ещё достаточно долго после этого) веб-стандарты оставались достаточно слабыми. Поэтому Microsoft разработала свою реализацию JavaScript, назвав ее JScript. Убрав из названия слово Java, они смогли избежать возможных проблем с владельцами торговой марки. Однако, JScript отличался не только названием. Небольшие различия в реализации — в частности, подход к некоторым DOM функциям — оставили рябь, которая будет ощущаться ещё долгие годы. Бои за JavaScript шли на гораздо большем количестве фронтов, чем названия и таймлайны, и многие причуды этого языка появились благодаря им. Первая версия JScript появилась в Internet Explorer 3.0, увидевшем свет в августе 1996 года.

Реализация JavaScript получила свое собственное название и в Netscape. Версия, выпущенная вместе с Netscape Navigator 2.0, была известна, как Mocha. Осенью 1996 года Айк переписал бóльшую часть Mocha, чтобы разобраться с техническими огрехами и недоработками, возникшими, как следствие спешки при разработке. Новая версия была названа SpiderMonkey. Это название используется по сей день в JavaScript-движке браузера Firefox, внука Netscape Navigator.

В течение нескольких лет JScript и SpiderMonkey были единственными движками JavaScript. Особенности обоих движков, не всегда совместимые, определили вектор развития веба на ближайшие годы.

Основные особенности архитектуры

Несмотря на то, что JavaScript был рождён в спешке, некоторые мощные особенности были заложены в нём с самого начала. Эти особенности определяли JavaScript как язык и позволили ему перерасти собственные границы, несмотря на все его причуды.

«Решение использовать готовый язык вместо изобретения своего никаким образом не зависело от меня. Установка, поступившая с самых верхов, звучала так: “Язык должен выглядеть как Java”. Это сразу отбросило Perl, Python и Tcl вместе со Scheme. Позже, в 1996 году, к нам зашёл Джон Оустерхаут, чтобы показать Tk и посокрушаться по поводу упущенной возможности для Tcl. Я не горжусь, но я счастлив, что я выбрал в качестве основных ингредиентов функции первого класса по подобию Scheme и прототипное программирование Self. Влияние Java, особенно баги с датами в 2000 году и чувствительность к регистру, стало досадным недоразумением.» — Brendan Eich’s blog: Popularity

Хотя создание синтаксиса, максимально близкого к Java, не было основной идеей JavaScript, рынок внёс свои коррективы. Возможно, для решения определённых задач больше подошёл бы другой синтаксис, однако благодаря использованию всем знакомого синтаксиса JavaScript с лёгкостью набрал популярность.

Что нового в JavaScript

На этой странице

Эта глава содержит информацию об истории версий JavaScript и статусе их реализаций в основанных на Mozilla/SpiderMonkey JavaScript-приложениях, таких, как Firefox.

Версии ECMAScript

Замечания к выпускам JavaScript

Версии JavaScript

Устарело ( ). Явное версионирование и выбор возможностей языка было особенностью Mozilla и она находится в процессе удаления. Firefox 4 был последней версией, ссылающийся на версию JavaScript (1.8.5). С новыми стандартами ECMA возможности языка JavaScript часто упоминаются вместе с их первоначальным определением в изданиях ECMA-262, например, с 6-м изданием (ES6).

Топ-пост этого месяца:  Турбо-страницы для интернет-магазина подключение и настройка

JavaScript версии 1.0 был выпущен в марте 1996 года в браузерах Netscape Navigator 2.0 и Internet Explorer 2.0.

JavaScript ES6: история развития языка и создания новых версий ECMAScript

Данный раздел содержит описание языка ECMAScript, не являющееся нормативным.

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

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

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

Некоторые возможности языка ECMAScript аналогичны возможностям, используемым в других языках программирования, в частности – языкам Java ™ , Self и Scheme, описание которых содержится в следующей документации:

Gosling, James, Bill Joy and Guy Steele. The Java ™ Language Specification. Addison Wesley Publishing Co., 1996.

Ungar, David, and Smith, Randall B. Self: The Power of Simplicity. OOPSLA ’87 Conference Proceedings, pp. 227–241, Orlando, FL, October 1987.

IEEE Standard for the Scheme Programming Language. IEEE Std 1178-1990.

4.1 Скрипты для Интернет # Ⓣ Ⓔ ① Ⓐ

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

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

Каждый веб-браузер и сервер, поддерживающий ECMAScript, предоставляет свою собственную среду выполнения, дополняя среду выполнения языка ECMAScript.

4.2 Общий обзор языка # Ⓣ Ⓔ ① Ⓐ

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

ECMAScript является объектным языком: базовый язык и средства выполнения представлены объектами, а программа на ECMAScript представляет собой совокупность общающихся объектов. Объект в ECMAScript представляет собой набор свойств, каждое из которых обладает атрибутами в количестве ноль или более, которые определяют, как каждое из свойств может использоваться: например, когда атрибут Writable какого-либо свойства установлен в false, попытка выполняемого кода на ECMAScript изменить значение этого свойства не увенчается успехом. Свойства являются контейнерами, в которых содержатся другие объекты, примитивные значения или функции. Примитивное значение является элементом одного из следующих встроенных типов: Undefined, Null, Boolean, Number, String. Объект является элементом оставшегося из строенных типов – Object, а функция является вызываемым объектом. Функция, связанная с объектом через свойство, называется методом.

Синтаксис ECMAScript схож с синтаксисом языка Java, и это не случайно. Синтаксис ECMAScript не является строгим, что позволяет использовать ECMAScript в качестве легкого и простого языка. Например, для переменной не обязательно объявлять тип, типы не связаны со свойствами, а перед вызовом определяемых функций не обязательно делать их объявление.

4.2.1 Объекты # Ⓣ Ⓔ ① Ⓐ

Язык ECMAScript не содержит классов, подобным классам в языках C++, Smalltalk, или Java. Вместо этого объекты могут создаваться различными способами, в том числе – посредством буквенного обозначения или с помощью конструкторов, которые создают объекты и выполняют код, инициализирующий их полностью или частично путем присвоения их свойствам начальных значений. Каждый конструктор является функцией, которая обладает свойством “ prototype ”, используемым для реализации прототипного наследования и разделяемых свойств. Для создания объектов используются конструкторы в выражениях new, например: new Date(2009,11) создает новый объект Date. Последствия вызова конструктора без использования new зависят от этого конструктора. Например, вызов Date() создает не объект, а строковое представление текущей даты и времени.

Каждый объект, созданный конструктором, содержит неявную ссылку (называемую прототипом объекта) на значение свойства “ prototype ” его конструктора. В свою очередь, прототип может обладать неявной ссылкой (имеющей значение, отличное от null) на свой прототип, и так далее. Это называется цепочкой прототипов . Когда используется ссылка на свойство объекта, она является ссылкой на свойство с таким именем у первого объекта цепочки прототипов, который содержит свойство с таким именем. Иными словами, сначала на наличие этого свойства обследуется непосредственно указанный объект, и, если этот объект содержит свойство с таким именем, значит, ссылка указывает на это свойство. В противном случае указанное свойство ищется в прототипе этого объекта, и так далее.

Рис. 1. Отношение между объектом и прототипом

В целом, в объектно-ориентированных языках, использующих классы, состояние заключено в экземплярах, методы находятся в классах, а наследуется только структура и поведение. В ECMAScript, и состояние и методы находятся в объектах. Структура, поведение, состояние – все это наследуется.

Все объекты, которые прямо не содержат какого-либо конкретного свойства, которое содержит их прототип, разделяют это свойство и его значение. Это проиллюстрировано на Рис. 1:

CF является конструктором, а также – объектом. С использованием выражений new было создано пять объектов: cf1, cf2, cf3, cf4 и cf5, каждый из них содержит свойства с именами q1 и q2 . Пунктирной линией обозначены отношения неявного прототипа. Например, прототипом cf3 является CFp. Сам конструктор CF обладает двумя свойствами – с именами P1 и P2 , которые не видны для CFp, cf1, cf2, cf3, cf4 и cf5. Свойство CFP1 в CFp разделяют cf1, cf2, cf3, cf4 и cf5CF не разделяет этого свойства), как и все свойства в неявной цепочке прототипов CFp с именами, отличными от q1 , q2 или CFP1 . Обратите внимание на отсутствие неявной прототипной связи между CF и CFp.

В отличие от объектно-ориентированных языков, использующих классы, в языке ECMAScript свойства могут добавляться к объектам динамически путем присвоения им значений. То есть, конструкторы не обязаны указывать имена или присваивать значения всем или некоторым свойствам создаваемого объекта. На схеме, приведенной выше, можно добавить новое разделяемое свойство для cf1, cf2, cf3, cf4 и cf5, присвоив свойству CFp новое значение.

4.2.2 Строгий вариант языка ECMAScript # Ⓣ Ⓔ ① Ⓐ

В языке ECMAScript допускается возможность того, что некоторые пользователи могут захотеть ограничить использование некоторых свойств, доступных в языке. Это может быть сделано в интересах безопасности, во избежание уязвимости для ошибок, для улучшенного контроля ошибок, и просто по личному усмотрению этих пользователей. Чтобы предоставить такую возможность, ECMAScript определяет строгий вариант языка. В строгом варианте языка отсутствуют некоторые специальные синтаксические и семантические свойства, присущие обычному языку ECMAScript, а подробная семантика некоторых функциональностей изменена. Кроме того, в строгом варианте языка описаны дополнительные состояния ошибки, при возникновении которых появляется сообщение об исключении в ситуациях, которые в стандартной (нестрогой) форме языка не считаются ошибками.

Обычно строгий вариант ECMAScript называют строгим режимом («strict mode» — прим. перев.) языка. Выбор строгого режима и использование синтаксиса и семантики строгого режима языка явным образом производится на уровне конкретных единиц кода («code unit», смысл термина здесь не указан — прим. перев.) на ECMAScript. Поскольку выбор строгого режима производится на уровне синтаксической кодовой единицы, этот строгий режим вводит ограничения, действующие только локально внутри такой кодовой единицы. Строгий режим не ограничивает и не изменяет какого-либо аспекта семантики языка, который должен действовать одинаково для множества кодовых единиц. Готовая программа на ECMAScript может быть написана как для кодовых единиц с использованием строгого режима, так и для кодовых единиц с обычным режимом языка. В этом случае строгий режим применяется только при исполнении кода, заданного в рамках кодовых единиц в строгом режиме.

В целях соответствия данной Спецификации, реализация ECMAScript должна обеспечить реализацию как полной (неограниченной) версии языка, так и строгого режима ECMAScript в соответствии с описанием, приведенным в данной Спецификации. Кроме того, реализация должна поддерживать сочетание в одной программе кодовых единиц как в неограниченном, так и в строгом режиме.

4.3 Определения # Ⓣ Ⓔ ① Ⓐ

В настоящем документе используются приведенные ниже термины и определения.

– набор значений данных в соответствии с определением, приведенным в Главе 8 данной Спецификации.

– элемент одного из типов – Undefined, Null, Boolean, Number или String, в соответствии с определением, приведенным в Главе 8.

ПРИМЕЧАНИЕ Примитивное значение – элемент данных, представленный непосредственно на самом нижнем уровне реализации языка.

– элемент типа Object.

ПРИМЕЧАНИЕ Объект представляет собой набор свойств. Он имеет единственный прототип, который может иметь значение null .

– объект функции, который создает и инициализирует объекты.

ПРИМЕЧАНИЕ Значением свойства “ prototype ” конструктора является объект-прототип, используемый для реализации наследования и разделяемых свойств.

– объект, предоставляющий разделяемые свойства для других объектов.

ПРИМЕЧАНИЕ При создании объекта посредством конструктора, этот объект явно ссылается на свойство “ prototype ” конструктора в целях разрешения ссылки на свойство. На свойство “ prototype ” конструктора можно ссылаться посредством программного выражения constructor .prototype , а свойства, добавляемые к прототипу объекта, разделяются (посредством наследования) всеми объектами, которые разделяют данный прототип. Или же, новый объект может быть создан с помощью явно заданного прототипа посредством использования встроенной функции Object.create .

– объект в реализации ECMAScript, семантика которого полностью определяется не средой выполнения, а данной спецификацией.

ПРИМЕЧАНИЕ Данная спецификация определяет стандартные родные объекты. Некоторые родные объекты являются встроенными, а другие могут создаваться в ходе выполнения программы на ECMAScript.

– объект, предоставляемый реализацией ECMAScript независимо от среды. На начало выполнения программы на ECMAScript встроенный объект уже существует.

ПРИМЕЧАНИЕ Данная спецификация определяет стандартные встроенные объекты, а другие объекты могут задаваться и определяться посредством реализации ECMAScript. Все встроенные объекты являются родными объектами. Встроенный конструктор представляет собой встроенный объект, который также является конструктором.

– объект, предоставляемый средой, с целью дополнения среды выполнения языка ECMAScript.

ПРИМЕЧАНИЕ Всякий объект, не являющийся родным, является объектом среды.

– примитивное значение, используемое в том случае, если переменной не было присвоено значения.

– тип, единственное значение которого является неопределенным значением.

– примитивное значение, в котором умышлено отсутствует значение объекта.

– тип, единственное значение которого является пустым значением.

– элемент типа Boolean.

ПРИМЕЧАНИЕ Существует только два булевых значения: true и false.

– тип, который содержит примитивные значения true и false.

– элемент типа Object, являющийся экземпляром стандартного встроенного конструктора Boolean .

ПРИМЕЧАНИЕ Для создания объекта Boolean используется конструктор Boolean в выражении new , при этом в качестве аргумента передается значение Boolean. Полученный объект обладает внутренним свойством, значением которого становится переданное Boolean. Объект Boolean может быть приведен к булевому значению.

– примитивное значение, которое представляет собой конечную упорядоченную последовательность, состоящую из 16-битового беззнакового целого в количестве ноль или более.

ПРИМЕЧАНИЕ Строковое значение является элементом типа String. Каждое целочисленное значение в последовательности, как правило, представляет собой единичный 16-битовый элемент текста в кодировке UTF-16, однако ECMAScript не накладывает ограничений и не предъявляется требований к этим значением, за исключением того, что они должны быть 16-битовыми беззнаковыми целыми.

– множество всех возможных строковых значений.

– элемент типа Object, являющийся экземпляром стандартного встроенного конструктора String .

ПРИМЕЧАНИЕ Для создания объекта String используется конструктор String в выражении new , при этом в качестве аргумента передается строковое значение. Полученный объект обладает внутренним свойством, значением которого становится переданная строка. Объект String может быть приведен к строковому значению посредством вызова конструктора String в качестве функции (15.5.1).

– примитивное значение, соответствующее 64-битовому бинарному значению с двойной точностью в формате IEEE 754.

ПРИМЕЧАНИЕ Числовое значение является элементом типа Number и прямым представлением числа.

– множество всех возможных числовых значений, включая специальные значения NaN («не число»), положительную бесконечность и отрицательную бесконечность.

– элемент типа Object, являющийся экземпляром стандартного встроенного конструктора Number .

ПРИМЕЧАНИЕ Для создания объекта Number используется конструктор Number в выражении new , при этом в качестве аргумента передается числовое значение. Полученный объект обладает внутренним свойством, значением которого становится переданное число. Объект Number может быть приведен к числовому значению посредством вызова конструктора Number в качестве функции (15.7.1).

– числовое значение, которое представляет собой положительное бесконечное числовое значение.

– числовое значение, являющееся значением, которое представляет собой «не-число» в соответствии со стандартом IEEE 754.

– элемент типа Object, являющийся экземпляром стандартного встроенного конструктора Function , который может быть вызван в качестве подпрограммы.

ПРИМЕЧАНИЕ Кроме именованных свойств, функция содержит выполняемый код и состояние, которые определяют ее поведение при вызове. Код функции может быть написан как на ECMAScript, так и на другом языке.

– встроенный объект, который является функцией.

ПРИМЕЧАНИЕ Примеры встроенных функций: parseInt и Math.exp . Реализация может предусмотреть встроенные функции, поведение которых зависит от реализации, которые не описаны в настоящей спецификации.

– связь между именем и значением, которая является частью объекта.

ПРИМЕЧАНИЕ В зависимости от формы свойства, значение может быть представлено либо непосредственным образом в качестве значения данных (примитивное значение, объект или объект функции), либо косвенно посредством пары функций доступа.

– функция, которая представляет собой значение свойства.

ПРИМЕЧАНИЕ При вызове функции в качестве метода объекта этот объект передается этой функции как значение this этой функции.

– метод, который представляет собой встроенную функцию.

ПРИМЕЧАНИЕ Данная спецификация определяет стандартные встроенные методы. Другие дополнительные встроенные методы могут задаваться и определяться посредством реализации ECMAScript.

– внутреннее значение, определяющее некоторые характеристики свойства.

– свойство, которое содержится непосредственно его объектом.

– свойство объекта, которое не является собственным свойством, но является свойством (либо собственным, либо наследуемым) прототипа этого объекта.

Пробуем ES2015/ES6 в действии

Буквально на днях (17 июня) свершилось то, чего ждали почти 6 лет в мире Javascript. Генеральное собрание Ecma International официально одобрило стандарт ECMA-262 6 версии, который является спецификацией языка ECMAScript 6 (ES6), который так же называют ECMAScript 2015. Предыдущий стандарт языка Javascript был одобрен в 2009 году (ES5).

Теперь дело за браузерами, которые начнут усиленно внедрять спецификацию языка в свои движки. Следить за поддержкой ES2015 удобно на сайте kangax.github.io/compat-table/es6.

Некоторые термины:

  • ECMAScript — это официальный стандарт языка JavaScript.
  • TC39 — комитет, развивающий стандарт ECMAScript и принимающий решения по внедрению нового функционала.
  • Внутри самого ECMAScript много стандартов. Самый популярный из них — ECMA-262.

Немного истории

Архив стандарта ECMA-262 можно посмотреть на официальном сайте.

Обзор нововведений в ECMAScript 6:

  • Поддержка классов14.5.
  • Шаблоны строк12.2.9, 12.3.7, предоставляющие удобные средства для форматирования строк.
  • Поддержка лексических объявлений переменных13.2.1 (Lexical Declarations), позволяющих ограничить текущим блоком область видимости ключевых слов, через их повторное определение при помощи оператора let вместо var
  • Оператор const13.2.1 для определения переменных, доступных только для чтения
  • Сокращённый формат задания объектов13.2.1 (запись var a = <'obj1': obj1, 'obj2': obj2>теперь можно сократить до var a = )
  • Модули15.2. Для экспорта и импорта модулей введены операторы export и import, например, import * as mymodule from «lib/mymodule . Предоставляются средства динамической загрузки модулей, пространства имён и изоляция состояния
  • Arrow-функции14.2 (синтаксис => ) для быстрого определения анонимных функций (например, x.map(x => console.log(x * x)); )
  • Добавлен новый тип Symbol19.4, применимый для идентификаторов свойств объектов
  • Генераторы25.2, позволяющие организовать эффективное выполнение функций в асинхронном режиме. Генераторы представляют собой специальные функции, генерирующие итераторы. Использование выражения yield для генератора, позволяет приостановить его выполнение и вернуть управление вызвавшей генератор функции. Особенность генератора состоит в том, что последующие вызовы будут использовать предыдущее состояние и продолжат выполнение кода генератора с того места, где он был приостановлен
  • Объект WeakSet23.4, позволяющий определить множество из объектов, и объект WeakMap23.3, определяет коллекцию пар ключ/значение в которых ключ является объектом, к которому может быть прикреплено произвольное значение. WeakSet и WeakMap отличаются использованием эффективных с точки зрения потребления памяти структур, использующих сборщик мусора для удаления неиспользуемых объектов (объект удаляется, если на него больше не осталось ссылок, кроме ссылки из текущей коллекции) и предотвращающих возникновение утечек памяти;
  • Механизм Promise25.4, предназначенный для получения значений в асинхронном режиме. Позволяет определить значение, которое пока неизвестно, но будут определено через какое-то время
  • Значения по умолчанию для аргументов функций19.2 (например, function myfunc(a=’test’, b=1) )
  • Передача в функцию произвольной группы параметров в форме массива19.2 (например, function myfunc(a, b, . c) )
  • Cтруктуры данных Map и Set23.1, 23.2, упрощающих работу со специфичными типами коллекций. Map позволяет определять коллекции наборов в формате ключ/значение, при том, что в качестве ключа и значения могут выступать любые выражения JavaScript. По аналогии Set позволяет задать множество любых выражений JavaScript;
  • Поддержка абстракции массивов (Array comprehensions), дающих возможность создания нового массива на основе другого массива;

Добавлено множество методов для строк, массивов и математических операций, в том числе:

В дополненение к списку хочу упомянуть хороший сайт es6-features.org, поддерживаемый @engelschall, на котором приводятся обзор и сравнение новых фич из ES6 c ES5.

А пока разработчики браузеров пишут свои движки с поддержкой ES2015, мы можем попробовать новый стандарт в действии уже сейчас. Например, сейчас большинство возможностей ES2015 в Chrome скрыто под флагом chrome://flags/#enable-javascript-harmony. Включив это свойство и перезапустив браузер, можно уже сейчас использовать следующие функции ES2015.

У @addyosmani есть замечательный репозиторий, где он собрал коллекцию es6-tools. Первым в списке стоит Babel. Давайте разберем его подробнее и узнаем, как с помощью него можно уже сейчас писать код на ES6.

Babel

Babel — это JavaScript транскомпилятор. Если кратко, то транскомпилятор отличается от компилятора тем, что он переводит код из новой версии в более старый — стабильный. Подробнее про транскомпиляторы можно почитать тут. Как написано на их сайте:

By default, Babel ships with a set of ES2015 syntax transformers. These allow you to use new syntax, right now without waiting for browser support.

и это то, что нам нужно! Поиграться с этим транскомпилятором, не устанавливая его, можно прямо на сайте babeljs.io/repl/. Если мы хотим написать что-то серьезное, то нам нужно установить и начать использовать этот транскомпилятор.

Пишем свой первый класс на ES2015

Используем сервис codepen.io и включим в настройках поддержку Babel. В своем примере я продемонстрировал новые возможности ES2015: классы, их наследование и шаблоны строк.

See the Pen yNpWYY by Alex Filatov (@greybax) on CodePen.

Добавить комментарий