es5 es6 что это

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

# let/const вместо var

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сноски:
1. ^ я использую слово “трасформация” в статье, чтобы объяснить компиляцию исходного кода в исходный код в JavaScript. Но значение этого термина технически спорно.

Источник

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

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

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

Переменные

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

CONST

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

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

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

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

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

Строки

Методы

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

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

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

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

Массивы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Параметры

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

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

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

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

Модули

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

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

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

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

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

Классы

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

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

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

Символы

Символы, естественно, работают с const из-за своего неизменяемого характера:

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

Хотите узнать больше о символах? На Mozilla Developer Network есть хорошая статья о них.

Транспиляция

Мы можем писать свой код на ES6 сегодня. Как уже упоминалось во введении, поддержка ES6 браузерами пока не очень обширна и сильно варьируется. Очень вероятно, что не всё из ES6 кода, который вы напишете, будет понято браузерами ваших пользователей. Вот почему мы должны конвертировать его в предыдущие версии JavaScript (ES5), которые хорошо запускаются на любом современном браузере. Это преобразование часто называют «транспиляция». Мы должны выполнять его с нашими приложениями, пока браузеры, которые мы хотим поддерживать, не начнут понимать ES6.

Начнем

Транспилировать код не сложно. Вы можете траспилировать код непосредственно из командной строки или можете включить в качестве плагина планировщик задач, например, Grunt или Gulp. Существует множество решений для транспиляции, в том числе и Babel, Traceur и TypeScript. Взгляните, например, на множество способов начать использовать ES6 с Babel (ранее «6to5»). Большинство возможностей ES6 в вашем распоряжении!

Теперь, когда, надеюсь, вы впечатлены ES6, почему бы не начать использовать его? В зависимости от особенностей, которые вы хотите использовать, и браузеров или оболочек, которые вам необходимо поддерживать (например, Node.js), вы, вероятно, хотите включить транспилятор в ваш рабочий процесс. И если вы готовы к этому, то существуют также наблюдатели за файлами, чтобы сделать ваш процесс разработки бесшовным.

Если вы начинаете с нуля, то возможно просто захотите конвертировать ваш код из командной строки (смотрите, например, документацию Babel CLI). Если вы уже используете планировщик задач (например, Grunt или Gulp), то можете добавить плагин (например, gulp-babel или babel-loader для Webpack). Для Grunt существует grunt-babel и много других плагинов, связанных с ES6. Люди, использующие Browserify, могут попробовать babelify.

Многие возможности могут быть преобразованы в ES5-совместимый код без существенных дополнительных усилий. Другие требуют дополнительных временных костылей (которые могут быть предоставлены транспилятором) и/или ухудшают производительность. А некоторые просто невозможны. Чтобы поэкспериментировать с кодом ES6 и посмотреть, как выглядит транспилированный код, вы можете использовать различные интерактивные инструменты (также известные как REPL):

Итак, что же я могу использовать?

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

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

Что дальше?

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

Заключение

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

Источник