Добро пожаловать в серию «ES6 в деталях»! В этой еженедельной серии статей мы будем изучать ECMAScript 6 — новую готовящуюся к выходу спецификацию языка JavaScript. ES6 имеет множество новых возможностей, которые делают JS мощнее и выразительнее, и каждую неделю мы будем рассматривать эти возможности. Но прежде чем мы приступим, неплохо бы поговорить о том, чем является ES6 и что от него ожидать.
За что отвечает ECMAScript?
Язык JavaScript стандартизирутеся организацией ECMA (наподобие W3C), а сам стандарт носит название ECMAScript. ECMAScript определяет следующее:
- Синтаксис языка — правила парсинга, ключевые слова, операторы, выражения и прочее;
- Типы — числа, строки, объекты и прочее;
- Прототипы и наследование
- Стандартную библиотеку встроенных объектов и функций — JSON, Math, методы массивов, методы объектов и тому подобное.
Что ECMAScript не определяет, так это всё, что связано с HTML и CSS, а также всевозможные
Новый стандарт
Пару недель назад итоговый вариант спецификации ECMAScript в шестой редакции был отправлен на утверждение в Ecma General Assembly. Что это означает?
Это значит, что уже этим летом у нас будет новый стандарт для языка JavaScript.
Это большая новость. Новая спецификация JS не падает с небес каждый день. Последняя спецификация, ES5, была принята в 2009 году. Комитет стандарта ES с тех пор работает над ES6.
ES6 является мажорным релизом новой версии языка. В то же время ваш старый код продолжит работать. ES6 обеспечивает максимальную совместимость с уже написанным кодом. Кстати, многие браузеры уже сейчас поддерживают некоторые возможности ES6, и работа над реализацией других фич продолжается. Это значит, что весь ваш код работает в браузерах с реализованными частями ES6! Если вы ещё не наблюдали проблем с совместимостью (а вы их не наблюдали), то и в будущем они не появятся.
Считаем до 6
Предыдущие редакции стандарта ECMAScript имели номера 1, 2, 3 и 5.
Что случилось с четвёртой редакцией? Редакция ECMAScript 4 была запланирована, и над ней было проведено много работы, но в итоге от неё отказались как от слишком амбициозной. (Например, в ней была изощрённая встроенная статическая типизация).
Четвёртая редакция ECMAScript была весьма спорной. Когда комитет по стандартам окончательно прекратил над ней работу, члены комитета решили опубликовать относительно скромную редакцию ES5. После этого они решили продолжить работу над более важными новыми возможностями. Именно поэтому шестая редакция ECMAScript носит название «Harmony» и содержит в спецификации эти два предложения:
ECMAScript — динамично развивающийся язык, и его эволюция ещё не закончилась. В будущих версиях этой спецификации появятся значительные технические улучшения.
Это утверждение можно считать
Обещания выполнены
В ES5, обновлении 2009 года, были представлены
Object.create(), Object.defineProperty(), геттеры и сеттеры, строгий режим (strict mode) и объект JSON. Я использовал все эти возможности, и мне понравилось то, что ES5 сделал для языка. У меня нет слов для описания того, какое влияние эти нововведения оказали на то, как я пишу .map(), .filter() и тому подобные.А ECMAScript 6 довольно сильно отличается. Это результат долгих лет слаженной работы. И это клад новых возможностей языка. Наиболее значимое обновление JS, которое было
Цель этой серии — путём рассмотрения новых возможностей показать вам, как ES6 радикально изменит ваш код.
Мы начнём с фич, которые многие ждали долгое время —
<nobr>for-of</nobr>. Увидимся на следующей неделе!
Комментарии (28)
stas404
29.04.2015 22:02+1На тему изучения ES6 — есть неплохой интерактивный курс:
tagtree.io/courses/expert-es6
12 последовательных уроков с примерами и практическими заданиями в конце каждого урока. На английском.
grossws
30.04.2015 05:30+1Какое-то оно тривиальное и скучное.
stas404
30.04.2015 09:07Согласен, что простовато. Скорее, знакомство с синтаксисом, нежели практический экскурс.
Оставлю еще одну ссылочку на github Addy Osmani:
github.com/addyosmani/es6-equivalents-in-es5
Куски кода на es6 и их эквиваленты на es5 — быть может, будет поинтереснее.
SerDIDG
30.04.2015 07:12Чёт как-то они и сами не знают JS. Просто шикарный пример архаизма:
for(var i = 0; i < owners.length; i++){ var name = owners[i]; console.log('Owner ' + name); }
И по-этому они предлагают использовать не менее жуткий, забывая всё о чём говорилось в предыдущих уроках:
for(let i = 0; i < owners.length; i++){ let name = owners[i]; console.log('Owner ' + name); }
Что нужно было (если я правильно понял суть):
owners.forEach((name) => { console.log(`Owner ${name}`); });
TheShock
30.04.2015 15:18+1Чем не нравится вариант с let? Да и с вар. Анонимные функции имеют свои проблемы
SerDIDG
30.04.2015 16:21Использованием цикла for, присвоением двух лишней переменных, лишняя грязь.
> Анонимные функции имеют свои проблемы
Да нельзя выйти из цикла, но если нужно выйти можно всегда вместо for / forEach использовать filter / map и тд, что мне кажется более изысканным решением, чем нежели останавливать цикл.
Fesor
30.04.2015 16:54+7А еще forEach в разы медленнее старого доброго for, добавляет накладные расходы на обращение к родительскому скоупу и куча разных мелочей. Собственно как и map, reduce и т.д. Так что не всегда они хороши (хотя скоро будут, тикеты соответствующие есть, ими занимаются...). Если вы работаете с большими объемами данных (например canvas) то forEach вам явно не понравится использовать. Даже реализация forEach на for быстрее forEach…
TheShock
05.05.2015 11:46А еще проблемы с отладкой: проблемы с бряками, стеком, скоупом
Про производительность вам уже сказали и это ПРАВДА серьезная проблема даже без попиксельной работы.
Тем более в ес5 еще и контекст теряется без дополнительных действий.SerDIDG
05.05.2015 16:32Ни одной из проблем ещё не испытывал, а вот, как написал выше, провёл тесты и да, производительность процентов на 90 проседает. Если что, я ни в коем случае не перечу вам, и в целом согласен со всеми аргументами.
TheShock
05.05.2015 17:39-3Самое простое:
Где делся из замыканий X?
SerDIDG
05.05.2015 17:51Ммм?
screencloud.net/v/qtRQ
В скопе нет, но надо ли?TheShock
05.05.2015 17:55-3Да, если использовать, то он появляется. Я говорю именно про дебаг, а не про код. Это на простом примере я показал, что есть свои нюансы
monolithed
30.04.2015 01:35+1ECMAScript 6 переименовали в ECMAScript 2015
Arilas
30.04.2015 02:15И кроме этого уже есть Final Draft, который уже врятли изменится — ES2015 specifications drafts
E_STRICT
А сейчас ES6 уже поддерживается где-нибудь?
a553
Лучше всего в Firefox, не хватает лишь некоторых деталей (Reflect например).
Fesor
kangax.github.io/compat-table/es6 — подробнее.
Fesor
А зачем ждать пока будут поддерживать?
babeljs.io
serf
Насколько удобно использовать babel для node (отладка допустим, как там с сорсмапами)? Для браузера понятно как.
zxcabs
github.com/evanw/node-source-map-support
serf
Это легко гуглится, меня интересовал личный опыт, удобство, потому что вижу что существуют баги вроде этого github.com/babel/babel/issues/983
cryptograf
Из личного опыта проблем с сорсмапами замечено не было
Aingis
Частично, да. В том же io.js. iliakan уже сайт на нём сделал: habrahabr.ru/post/255885