Современный JavaScript с ES6–ES13 (JS-учебник)

Это тебя ждет на этом курсе по JavaScript ES6.

JavaScript существует уже много лет в браузерах. Практически каждый веб-сайт содержит больше или меньше JS-кода. Хотя первые версии были довольно грубыми, работать с текущим стандартом ES5 до сих пор было довольно удобно, по крайней мере, если умело обходить подводные камни и неожиданности. Зачем же учить что-то новое и не оставаться на проверенном пути? В этом уроке я покажу преимущества нового стандарта ES6 и причины, по которым на него действительно нельзя отказаться.

Этот урок представляет собой возможность настроить среду разработки. При этом мы используем в качестве IDE Visual Studio Code от MS и ViteJS в качестве Dev-сервера.

До ES5 ключевое слово var было единственным способом объявления переменных, которое часто приводило к нежелательному поведению или даже ошибкам. ES6 вводит два новых ключевых слова let и const, которые исправляют некоторые недостатки var.

Цикл for знает каждый веб-разработчик. Его также часто используют для перебора массивов. В ES6 существует вариант цикла for, который позволяет делать это намного короче и компактнее.

Функции в JS существенны и до сих пор объявлялись и определялись только с помощью ключевого слова function. ES6 вводит очень изящный и короткий способ написания кода, который делает его не только более читаемым, но также предлагает решение для проблемы с this.

Опциональные параметры можно реализовать несколько громоздко в ES5 и не отображаются вызывающему функцию. В ES6 опциональные параметры со своими стандартными значениями могут быть написаны непосредственно в сигнатуре функции.

Деструктуризация позволяет извлекать элементы из объектов и массивов. При более внимательном рассмотрении открывается множество возможностей применения, которые делают код на JS более элегантным и компактным.

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

Не только при определении функций оператор …- используется для оставшихся параметров, но также можно использовать его и при деструктуризации массива, чтобы захватить «остаток» элементов и предоставить его в виде массива.

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

Противоположностью оператора rest является оператор spread. Он выглядит так же (…), но стоит с другой стороны от присваивания и раскладывает массив на отдельные части.

«Трюк» с оператором распространения работает очень хорошо даже с объектами. Это позволяет добавлять объекты в другие объекты. Однако есть также очень хороший альтернативный метод Object.assign().

Функции в литералах объектов очень громоздко писать с ключевым словом function-. С помощью ES6 их также можно писать гораздо короче и понятнее.

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

Нельзя сказать иначе: Многострочные строковые литералы с встроенными переменными были настоящим мучением до ES6 и также очень неприятночитаемыми. В отличие от этого, новые литералы шаблона ES6 - это синтаксическое благодатное изобретение.

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

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

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

После того, как с помощью обещаний можно избежать ада обратных вызовов, конструкция async/await добавляет еще больше синтаксического сахара. Она основана на обещаниях и позволяет программировать асинхронные операции почти как синхронные. Тот, кто хоть раз программировал с помощью async/await, в дальнейшем избегает прямого использования метода then из обещаний (а тем более использование обратных вызовов).

В Node.js модули используются с самого начала, но изначально оно полагалось только на формат модулей CommonJS с require. С появлением ES6 появились стандартные определения модулей и новые ключевые слова import/export. В настоящее время это формат поддерживается практически всеми (новыми) библиотеками JavaScript, и Node.js также умеет работать с ним в последних версиях.

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

Классическое объектно-ориентированное программирование с классами и наследованием существовало только через прототип при конструкторной функции до ES6. Это было неудобно, выглядело малокомпактно и поэтому также подвержено ошибкам. Новое ключевое слово class теперь позволяет в ES6 определение в компактной форме, также как это принято в других языках программирования, таких как Java, C# и C++. Внутренне это остается прототипным системой, просто с более красивым синтаксисом.

Также наследование по-прежнему основано на прототипах, однако в ES6 оно проще и более наглядно благодаря ключевому слову extends. При использовании его нужно вызвать конструктор базового класса в правильный момент с помощью super. Как это делается, конечно же, будет объяснено в этом уроке.

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

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

С новым ключевым словом class и связанными функциями, такими как наследование и инкапсуляция данных (частные поля), вроде бы все ОО-программисты должны быть удовлетворены, не так ли? В этом уроке я хочу представить альтернативу созданию объектов, которая обходится без классов, прототипов и this, но вместо этого позволяет более гибкий способ "наследования" или же скорее "композицию".

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