ES6 в деталях: введение

https://hacks.mozilla.org/2015/04/es6-in-depth-an-introduction
  • Перевод
ES6 в деталях
Добро пожаловать в серию «ES6 в деталях»! В этой еженедельной серии статей мы будем изучать ECMAScript 6 — новую готовящуюся к выходу спецификацию языка JavaScript. ES6 имеет множество новых возможностей, которые делают JS мощнее и выразительнее, и каждую неделю мы будем рассматривать эти возможности. Но прежде чем мы приступим, неплохо бы поговорить о том, чем является ES6 и что от него ожидать.

За что отвечает ECMAScript?


Язык JavaScript стандартизирутеся организацией ECMA (наподобие W3C), а сам стандарт носит название ECMAScript. ECMAScript определяет следующее:


Что ECMAScript не определяет, так это всё, что связано с HTML и CSS, а также всевозможные веб-API, например DOM. Всё это определено отдельными стандартами. ECMAScript покрывает те аспекты языка, которые представлены не только в браузерах, но также и в платформах вроде node.js.

Новый стандарт


Пару недель назад итоговый вариант спецификации 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 сделал для языка. У меня нет слов для описания того, какое влияние эти нововведения оказали на то, как я пишу JS-код. Самым важным нововведением для меня оказались новые методы массивов: .map(), .filter() и тому подобные.

А ECMAScript 6 довольно сильно отличается. Это результат долгих лет слаженной работы. И это клад новых возможностей языка. Наиболее значимое обновление JS, которое было когда-либо. Новые возможности варьируются от простых удобств вроде функций-стрелок и интерполяции строк до мозговзрывающих концепций вроде прокси и генераторов.
Цель этой серии — путём рассмотрения новых возможностей показать вам, как ES6 радикально изменит ваш код.
Мы начнём с фич, которые многие ждали долгое время — ES6-итераторы и новый цикл for-of. Увидимся на следующей неделе!
Поделиться публикацией

Похожие публикации

Комментарии 28
    0
    А сейчас ES6 уже поддерживается где-нибудь?
      0
      Лучше всего в Firefox, не хватает лишь некоторых деталей (Reflect например).
      +2
      А зачем ждать пока будут поддерживать?
      babeljs.io
        0
        Насколько удобно использовать babel для node (отладка допустим, как там с сорсмапами)? Для браузера понятно как.
          +1
            0
            Это легко гуглится, меня интересовал личный опыт, удобство, потому что вижу что существуют баги вроде этого github.com/babel/babel/issues/983
              +1
              Из личного опыта проблем с сорсмапами замечено не было
        –1
        Частично, да. В том же io.js. iliakan уже сайт на нём сделал: habrahabr.ru/post/255885
        –7
        А можно начать изучать ES6, не изучая JS до этого?
          +14
          В смысле можно ли начать изучать JS?
          +1
          На тему изучения ES6 — есть неплохой интерактивный курс:
          tagtree.io/courses/expert-es6
          12 последовательных уроков с примерами и практическими заданиями в конце каждого урока. На английском.
            +1
            Какое-то оно тривиальное и скучное.
              0
              Согласен, что простовато. Скорее, знакомство с синтаксисом, нежели практический экскурс.
              Оставлю еще одну ссылочку на github Addy Osmani:
              github.com/addyosmani/es6-equivalents-in-es5
              Куски кода на es6 и их эквиваленты на es5 — быть может, будет поинтереснее.
              0
              Чёт как-то они и сами не знают 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}`);
              });
              
                –1
                Или даже так:

                owners.forEach((name) => console.log(`Owner ${name}`));
                
                  +1
                  Чем не нравится вариант с let? Да и с вар. Анонимные функции имеют свои проблемы
                    0
                    Использованием цикла for, присвоением двух лишней переменных, лишняя грязь.

                    > Анонимные функции имеют свои проблемы
                    Да нельзя выйти из цикла, но если нужно выйти можно всегда вместо for / forEach использовать filter / map и тд, что мне кажется более изысканным решением, чем нежели останавливать цикл.
                      +7
                      А еще forEach в разы медленнее старого доброго for, добавляет накладные расходы на обращение к родительскому скоупу и куча разных мелочей. Собственно как и map, reduce и т.д. Так что не всегда они хороши (хотя скоро будут, тикеты соответствующие есть, ими занимаются...). Если вы работаете с большими объемами данных (например canvas) то forEach вам явно не понравится использовать. Даже реализация forEach на for быстрее forEach…
                        0
                        Действительно, даже и не знал. На ~86-90% медленнее чем for с callback.
                        0
                        А еще проблемы с отладкой: проблемы с бряками, стеком, скоупом
                        Про производительность вам уже сказали и это ПРАВДА серьезная проблема даже без попиксельной работы.
                        Тем более в ес5 еще и контекст теряется без дополнительных действий.
                          0
                          Ни одной из проблем ещё не испытывал, а вот, как написал выше, провёл тесты и да, производительность процентов на 90 проседает. Если что, я ни в коем случае не перечу вам, и в целом согласен со всеми аргументами.
                            –3
                            Самое простое:



                            Где делся из замыканий X?

                              0
                              Ммм?

                              screencloud.net/v/qtRQ

                              В скопе нет, но надо ли?
                                –3
                                Да, если использовать, то он появляется. Я говорю именно про дебаг, а не про код. Это на простом примере я показал, что есть свои нюансы
                  +1

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

                Самое читаемое