es6

ES6: классы изнутри

Перевод статьи ES6 Classes in Depth  с сайта ponyfoo.com, опубликовано на css-live.ru с разрешения автора — Николаса Беваквы.

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

Как и в прошлых статьях, рекомендую вам установить Babel и повторять за мной, копируя примеры с помощью REPL, либо командной строки babel-node и файла. Это поможет гораздо лучше усвоить идеи, обсуждаемые в серии. Если вы не из тех, кто любит устанавливать что-либо на свой компьютер, то вам есть смысл залезть на CodePen и кликнуть иконку с шестерёнкой для JavaScript — у него есть препроцессор Babel, который с лёгкостью позволяет опробовать ES6.

Начнём!

ES6: возможности литерала объекта изнутри

Перевод статьи ES6 Object Literal Features in Depth  с сайта ponyfoo.com, опубликовано на css-live.ru с разрешения автора — Николаса Беваквы.

И снова «ES6 изнутри». Если вы в этом цикле статей впервые, то советую изучить деструктирование, литералы шаблона, стрелочные функции или операторы расширения и оставшиеся параметры. Сегодня предлагаю познакомиться с литералами объекта в ES6. «Ну уж их-то и сейчас можно использовать» — скажете вы — литералы объекта тянутся еще аж с ES3. Эта статья про новинки ES6 для литералов объекта.

Как и в прошлых статьях, рекомендую вам установить Babel и повторять за мной, копируя примеры с помощью REPL, либо командной строки babel-node и файла. Это поможет гораздо лучше усвоить идеи, обсуждаемые в серии. Если вы не из тех, кто любит устанавливать что-либо на свой компьютер, то вам есть смысл залезть на CodePen и кликнуть иконку с шестерёнкой для JavaScript — у него есть препроцессор Babel, который с лёгкостью позволяет опробовать ES6.

Вперёд к неизведанному!

Деструктурирование в JavaScript (ES6) изнутри

Перевод статьи ES6 JavaScript Destructuring in Depth  с сайта ponyfoo.com, опубликовано на css-live.ru с разрешения автора — Николаса Беваквы.

В моей серии статей про React я кратко упомянул несколько фич ES6 (и введение в Babel), а теперь хочу сосредоточиться на самих фичах языка. Я уже много всего читал про ES6 и ES7, и пора уже поговорить об их фичах здесь на Pony Foo.

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

Вкусности ES6: оператор расширения в подробностях

Перевод статьи ES6 Spread and Butter in Depth  с сайта ponyfoo.com, опубликовано на css-live.ru с разрешения автора — Николаса Беваквы.

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

Мы уже рассматривали некоторые из этих фич, когда говорили о деструктировании, которое поддерживает значения по умолчанию, как пример того, как несколько фич в ES6 образуют одну суперфичу, о чем упомянул вчера. Эта статья в итоге может оказаться короче остальных, поскольку рассказывать об этих довольно простых фичах особенно нечего. Однако, как подмечено в начале серии «ES6 изнутри», самые простые фичи, обычно, оказываются наиболее полезными. Так что приступим!

ES6: стрелочные функции изнутри

Перевод статьи ES6 Arrow Functions in Depth  с сайта ponyfoo.com, опубликовано на css-live.ru с разрешения автора — Николаса Беваквы.

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

Раз вы читаете эти статьи, предлагаю установить Babel и babel-node, и повторять за мной, копируя отдельные примеры в файл. Можете затем запустить их при помощи babel-node yourfile в терминале. Самостоятельный запуск этих примеров, и, возможно, небольшая их корректировочка помогут лучше усвоить эти новые фичи — даже если вы просто добавите оператор console.log, чтобы разобраться в происходящем.

Итак, встречайте наших сегодняшних гостей.

ES6: литералы шаблона изнутри

Перевод статьи ES6 Template Literals in Depth  с сайта ponyfoo.com, опубликовано на css-live.ru с разрешения автора — Николаса Беваквы.

Вчера мы рассмотрели «Деструктурирование в JavaScript (ES6) изнутри», и некоторые наиболее распространённые примеры его использования. Сегодня мы познакомимся с литералами шаблона. Что они из себя представляют, как их использовать и для чего.

Литералы шаблона — новая возможность в ES6 для более удобной работы со строками и шаблонами строки. Оберните текст в `обратные кавычки` и получите описанные ниже возможности.

  • В них можно интерполировать переменные
  • На самом деле можно интерполировать строки с любыми выражениями, не только переменные
  • Они могут быть многострочными. Наконец-то!
  • Можно создавать необработанные шаблоны, которые не интерпретируют обратные кавычки

Краткая история инструментария ES6

Перевод статьи A Brief History of ES6 Tooling  с сайта ponyfoo.com, опубликовано на css-live.ru с разрешения автора — Николаса Беваквы.

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

Обзор ES6 в 350 пунктах

Перевод статьи ES6 Overview in 350 Bullet Points  с сайта ponyfoo.com, опубликовано на css-live.ru с разрешения автора — Николаса Беваквы.

Моя серия статей «ES6 изнутри» состоит из 24 статей, охватывающих большинство изменений синтаксиса и возможностей, появившихся в ES6. Цель этой статьи — резюмировать это всё, что даст вам практическое понимание большей части ES6, чтобы можно было быстро начать работать с ним. Я также привёл ссылки на все статьи «ES6 изнутри», чтобы вы легко могли перейти к нужной вам теме.

Я слышал, что вы любите перечисления по пунктам, так что я запилил статью с сотнями этих мерзавцев. Для начала, вот вам оглавление со всеми рассматриваемыми темами. В нем перечисляются пункты — очевидно. Но всё-таки, если хотите, чтобы эти идеи проникли в ваш мозг, вам придётся уделить гораздо больше времени на изучение предмета, проштудировав углубленные серии и экспериментируя со своим собственным кодом ES6.

Как использовать ECMAScript 6 сегодня?

Присказка

Эта статья о новой волне JavaScript, о том, как будут писаться проекты в ближайшие год-полтора в ES5-окружениях.

Сказка. Что нас ждет?

ECMAScript 6 — грядущая версия стандарта, формальное утверждение которого намечено на июнь этого года. Данный стандарт несет в себе существенные изменения:

  • новые глобальные объекты: Map, Set, Symbol и т.д.
  • новые синтаксические конструкции: module, class, const и т.д.
  • новые концепции, которые реализованы преимущественно посредством п.2: модули (импорт/экспорт), итераторы, генераторы и т.д.
  • расширение существующих глобальных объектов и прототипов этих объектов: Array.from(), Array.prototype.find() и т.д.

Описание всех нововведений лежит за рамками данной статьи, но прежде чем перейти к основной ее части, я размещу пару ссылок пройдя по которым вы сможете ознакомится с ними более детально: Поддержка ECMAScript 6 в Mozilla, ECMAScript 6 Features.