Курс по ES 6 (EcmaScript 6)

Данный курс по es6 предназначен для тех, кто хочет следовать современным трендам веб-разработки. Речь идет о новой спецификации языка javascript – es6 (ecmascript 6).

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

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

После, мы разберем все функции, которые нам привнес es6, начиная от переменных и классов, и заканчивая промисами и генераторами.

Также мы разберем как преобразуются некоторые фичи es6 в es5 и реализуем несколько из них, чтобы понимать, как оно работает.

Урок 0. Курс по ES 6 (EcmaScript 6) для веб-разработчиков

Урок 1. ES6 (EcmaScript 6). Настройка окружения

От автора: с этого урока мы с вами начнем изучать новый синтаксис языка javascript — es6 (ecmascript 6). Так как еще не все браузеры его поддерживают нативно, то мы начнем с настройки окружения, где разберем как с помощью webpack компилировать es6 в es5.

Из урока вы узнаете, как с помощью webpack и babel-loader можно компилировать синтаксис es6 в es5 для того, чтобы все браузеры понимали, что мы написали.

В результате урока мы настроим webpack таким образом, чтобы он корректно преобразовывал нам es6 в es5.

Урок 2. ES6 (EcmaScript 6). Переменные

От автора: в этом уроке мы поговорим про то, какие появились новые способы создания переменных в es6 (ecmascript 6).

Из урока вы узнаете о новых способах создания переменных в ecmascript 6 (es6) — let и const. Вы увидите наглядное различие между старым способом объявления переменных с помощью ключевого слова var и новым способом, с помощью ключевого слова let на нескольких практических примерах.

Также мы поговорим про то, какие есть тонкости при создания переменных с помощью ключевого слова const.

Урок 3. ES6 (EcmaScript 6). Стрелочные функции

От автора: в этом уроке мы познакомимся с одним из самых главным и часто используемым нововведением в es6 (ecmascript 6) — со стрелочными функциями.

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

Помимо синтаксиса мы разберем особенности работы данных функций с контекстом на практическом примере.

Урок 4. ES6 (EcmaScript 6). Параметры по умолчанию

От автора: в этом уроке мы познакомимся со следующим очень полезным нововведением в es6 (ecmascript 6) — способ передачи параметров по умолчанию в функцию.

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

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

Урок 5. ES6 (EcmaScript 6). Объекты

От автора: в этом уроке мы разберем все новые пункты, которые появились в синтаксисе es6 (EcmaScript 6) для более удобной записи объектов.

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

В результате урока мы напишем функцию, на примере которой рассмотрим все эти возможности.

Урок 6. ES6 (EcmaScript 6). Деструктуризация

От автора: в этом уроке мы разберем такое понятие как деструктуризация в es6 (EcmaScript), которая часто сильно сокращает код.

Из урока вы узнаете, что такое деструктуризация и зачем она нужна.

В результате урока мы разберем 2 ситуации, когда применима деструктуризация — на примере объектов и массивов.

Урок 7. ES6 (EcmaScript 6). Rest и Spread операторы

От автора: в новый синтаксис javascript были введены 2 очень похожих, но при этом разных операторов, которые позволяют удобно работать с массивами. Это операторы rest и spread.

Из урока вы узнаете, что такое rest и spread операторы в es6 (EcmaScript 6). Вы поймете, чем они отличаются и когда стоит тот или иной применять.

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

Урок 8. ES6 (EcmaScript 6). Строки

От автора: новый синтаксис javascript предоставляет нам удобные возможности для работы со строками, например, со встроенной шаблонизацией в es6 (EcmaScript 6).

Из урока вы узнаете новые возможности для работы со строками в es6 синтаксисе.

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

Урок 9. ES6 (EcmaScript 6). Циклы

От автора: в этом уроке мы с вами познакомимся с новым видом циклов, которые появились в es6 (EcmaScript 6).

Из урока вы узнаете, какое ключевое слово появилось в es6 для задания нового цикла, который является более удобной версией цикла for.

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

Урок 10. ES6 (EcmaScript 6). Классы

От автора: в этом уроке мы с вами увидим, как преобразился синтаксис для ООП в es6 (EcmaScript 6).

Из урока вы узнаете, какие ключевые слова и конструкции появились в es6. Для работы с классами, наследованием и в целом ООП.

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

Урок 11. ES6 (EcmaScript 6). Set и WeakSet

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

Из урока вы узнаете, что такое Set и WeakSet в es6.

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

Урок 12. ES6 (EcmaScript 6). Map и WeakMap

От автора: в этом уроке мы продолжим изучение новых структур данных и в этот раз поговорим про объектоподобные структуры map и weakmap в es6 (EcmaScript 6).

Из урока вы узнаете, что такое объектоподобные структуры данных — Map и WeakMap.

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

Урок 13. ES6 (EcmaScript 6). Система модулей.Модули

От автора: в этом уроке мы с вами разберем систему модулей, которая появилась в es6 (EcmaScript). Она предназначена для нативной декомпозиции модулей на javascript, которая сильно облегчает задачу определения зависимостей.

Из урока вы узнаете, как работать с нативными es6 модулями. Вы узнаете все возможные варианты связи модулей и научитесь ими пользоваться. В уроке будут разобраны такие новые ключевые слова как export import as from default.

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

Урок 14. ES6 (EcmaScript 6). Символы

От автора: в этом уроке мы познакомимся с седьмым, новым типом данных в javascript, который привнес es6 (EcmaScript 6) в язык.

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

В результате урока мы с вами разберем, в каких объектах уже есть символы итераторы, как работает цикл for of, напишем свою собственную функцию, которая будет делать тоже самое что и цикл. А в конце урока мы напишем реализацию функции генерации последовательности Фибоначчи, используя символы.

Урок 15. ES6 (EcmaScript 6). Генераторы

От автора: в этом уроке мы познакомимся с новым видом функций, которые появились в es6 (EcmaScript 6) стандарте — с генераторами, которые позволяют очень удобно генерировать данные, или работать с асинхронным кодом.

Из урока вы узнаете, что такое функции-генераторы в es6 и как ими пользоваться. Вы узнаете, как их создавать, их специальный синтаксис и новое ключевое слово yield. На реальном примере вы увидите, как можно создавать генератор внутри генератора для разных типов данных.

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

Урок 16. ES6 (EcmaScript 6). Новые методы

От автора: помимо нового синтаксиса и нового функционала es6 (EcmaScript 6) привнес в язык Javascript новые методы у разных типов данных, основные из которых мы рассмотрим в данном уроке.

Из урока вы узнаете, какие новые методы появились у встроенных типов данных в javascript. Мы разберем некоторые методы строк, массивов и объектов, для более эффективной работы.

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

Урок 17. ES6 (EcmaScript 6). Promise

От автора: в этом заключительном уроке мы разберем новую структуру данных, которой так не хватало в javascript. Речь идет о промисах в es6 (EcmaScript 6) — конструкции, которая очень удобно позволяет работать с асинхронным кодом.

Из урока вы узнаете, что такое Promise, как с ними работать и зачем они нужны. Вы узнаете, почему стоит использовать именно их, а не большое дерево колбэков.

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

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

Ваш адрес email не будет опубликован.