JavaScript ES6: пишем меньше — делаем больше
Стандарт ES6 принёс в мир JavaScript-разработки новые синтаксические конструкции и замечательные возможности, которые, кроме прочего, улучшают читаемость текстов программ, позволяют сделать их лаконичнее и выразительнее. Всё это позволяет разработчику решать те же задачи, что и раньше, написав меньше кода. «Пишем меньше — делаем больше», — это идея, которая вдохновила автора материала, перевод которого мы сегодня публикуем, на исследование возможностей ES6. В частности, здесь он сравнивает ES5 и ES6 и рассматривает варианты практического использования новых конструкций.
Ключевые слова const и let
В вышеприведённом примере значение, записанное в константу, изменить нельзя. При попытке записи в неё нового значения мы столкнёмся с сообщением об ошибке.
Стрелочные функции
Стрелочные функции — просто замечательная возможность. Они улучшают читаемость и благотворно влияют на структуру кода, да и попросту делают программы выглядящими современнее. Вот как пользуются функциями в ES5.
А вот — современный вариант.
Шаблонные литералы
Шаблонные литералы, или шаблонные строки — возможность очень интересная. Теперь не нужно использовать оператор + для конкатенации строк, или в тех случаях, когда при сборке строк используются переменные. Вот как это выглядело раньше.
Вот что у нас есть теперь.
По-новому получается гораздо проще. Перед нами — весьма значительное отличие между старым синтаксисом и ES6. Новые возможности ES6 делают работу со строками более организованной и способствуют улучшению структуры соответствующих фрагментов кода.
Параметры функций, задаваемые по умолчанию
Рассмотрим пример, в котором параметры, задаваемые по умолчанию, не используются.
Деструктурирование массивов и объектов
Деструктурирование упрощает операцию присвоения отдельных значений, хранящихся в массивах или объектах, новым переменным. Вот как подобное можно было сделать раньше.
Вот как то же самое делается средствами ES6.
Пользуясь ES5, мы должны были присваивать каждое отдельно взятое значение каждой переменной. Благодаря возможностям ES6 для того, чтобы извлечь отдельные значения объекта, имена переменных достаточно поместить в фигурные скобки.
В случае с массивами используется похожий синтаксис. Только фигурные скобки надо заменить скобками квадратными.
Инструкции import и export
Использование инструкций import и export в JS-приложениях расширяет их возможности. Они позволяют программисту создавать самостоятельные компоненты, подходящие для повторного использования.
Если вы знакомы с любым MVC-фреймворком для JavaScript, вы уже знаете, что они практически всегда используют инструкции import и export для работы с компонентами. Как же всё это устроено? На самом деле — очень просто. Инструкция export позволяет экспортировать модуль, который может быть использован в других JavaScript-компонентах. Инструкция import используется для импорта подобных модулей.
Если нужно импортировать несколько модулей, их можно перечислить в фигурных скобках.
Промисы
Промисы — это одна из новых возможностей ES6. Это — подход к написанию асинхронного кода. Его можно использовать когда, например, нужно загрузить данные из некоего API, или когда у нас имеется функция, на выполнение которой нужно некоторое время. Промисы упрощают решение подобных задач. Вот как с ними работать.
Здесь показано, что попадёт в консоль при попытке логирования промиса.
В данном случае вызов console.log приводит к выводу в консоль массива.
Синтаксис оставшихся параметров и оператор расширения
Синтаксис оставшихся параметров используется для представления неограниченного множества аргументов в виде массива. Вот несколько примеров его использования.
Оператор расширения похож на использование синтаксиса оставшихся параметров, но он позволяет, как показано в следующем примере, работать с массивами, извлекая их значения, которые иначе пришлось бы извлекать, пользуясь циклом for или какими-то другими методами.
Классы
Классы — это одно из базовых понятий объектно-ориентированного программирования. Они позволяют улучшить структуру кода и сделать его безопаснее.
Здесь можно почитать подробности о классах в JavaScript.
Итоги
Надеемся, этот материал помог вам открыть среди возможностей ES6 что-то новое, полезное в вашей практической работе. Кстати, здесь описаны далеко не все новшества ES6. Ознакомиться с гораздо более обширным их списком можно здесь. Кроме того, если вас интересует тема новых возможностей JavaScript, вот, вот и вот — некоторые наши публикации на эту тему.
Уважаемые читатели! Можете ли вы привести примеры из практики, иллюстрирующие идею, в соответствии с которой применение новых возможностей ES6 позволяет решать те же задачи, что и раньше, с помощью меньшего объёма кода, который, к тому же, оказывается проще, понятнее и читабельнее?
Руководство по JavaScript, часть 8: обзор возможностей стандарта ES6
Сегодня, в восьмой части перевода руководства по JavaScript, мы сделаем обзор возможностей языка, которые появились в нём после выхода стандарта ES6. Мы, так или иначе, сталкивались со многими из этих возможностей ранее, где-то останавливаясь на них подробнее, где-то принимая как нечто само собой разумеющееся. Этот раздел руководства призван, наряду с раскрытием некоторых тем, которых мы ранее не касались, упорядочить знания начинающего разработчика в области современного JavaScript.
О стандарте ES6
Стандарт ES6, который правильнее было бы называть ES2015 или ECMAScript 2015 (это — его официальные наименования, хотя все называют его ES6), появился через 4 года после выхода предыдущего стандарта — ES5.1. На разработку всего того, что вошло в стандарт ES5.1, ушло около десяти лет. В наши дни всё то, что появилось в этом стандарте, превратилось в привычные инструменты JS-разработчика. Надо отметить, что ES6 внёс в язык серьёзнейшие изменения (сохраняя обратную совместимость с его предыдущими версиями). Для того чтобы оценить масштаб этих изменений, можно отметить, что размер документа, описывающего стандарт ES5, составляет примерно 250 страниц, а стандарт ES6 описывается в документе, состоящем уже из приблизительно 600 страниц.
В перечень наиболее важных новшеств стандарта ES2015 можно включить следующие:
Стрелочные функции
Стрелочные функции изменили внешний вид и особенности работы JavaScript-кода. С точки зрения внешнего вида их использование делает объявления функций короче и проще. Вот объявление обычной функции.
А вот практически такая же (хотя и не полностью аналогичная вышеобъявленной) стрелочная функция.
Если тело стрелочной функции состоит лишь из одной строки, результат выполнения которой нужно из этой функции вернуть, то записывается она ещё короче.
Если стрелочная функция принимает лишь один параметр, записать её можно следующим образом.
Надо отметить, что с появлением стрелочных функций обычные функции никуда не делись, их всё так же можно использовать в коде, работают они так же, как и прежде.
Особенности ключевого слова this в стрелочных функциях
Промисы
JavaScript-разработчики использовали промисы и до появления стандарта ES2015, применяя для этого различные библиотеки (например — jQuery, q, deferred.js, vow). Это говорит о важности и востребованности данного механизма. Разные библиотеки реализуют его по-разному, появление стандарта в этой области можно считать весьма позитивным фактом.
Вот код, написанный с использованием функций обратного вызова (коллбэков).
С использованием промисов это можно переписать следующим образом.
Генераторы
Генераторы — это особые функции, которые могут приостанавливать собственное выполнение и возобновлять его. Это позволяет, пока генератор находится в состоянии ожидания, выполняться другому коду.
Генератор самостоятельно принимает решение о том, что ему нужно приостановиться и позволить другому коду, «ожидающему» своей очереди, выполниться. При этом у генератора есть возможность продолжить своё выполнение после того, как та операция, результатов выполнения которой он ждёт, окажется выполненной.
Рассмотрим пример, иллюстрирующий особенности работы генераторов. Вот сам генератор.
Такой командой мы его инициализируем.
Затем мы обращаемся к его итератору.
Эта команда запускает итератор, она возвращает такой объект.
В ответ на это итератор возвращает нам следующий объект.
В ответ получаем следующий объект.
Ключевые слова let и const
Классы
Сложилось так, что JavaScript был единственным чрезвычайно широко распространённым языком, использующим модель прототипного наследования. Программисты, переходящие на JS с языков, реализующих механизм наследования, основанный на классах, чувствовали себя в такой среде неуютно. Стандарт ES2015 ввёл в JavaScript поддержку классов. Это, по сути, «синтаксический сахар» вокруг внутренних механизмов JS, использующих прототипы. Однако это влияет на то, как именно пишут JS-приложения.
Теперь механизмы наследования в JavaScript выглядят как аналогичные механизмы в других объектно-ориентированных языках.
▍Конструктор класса
▍Ключевое слово super
Ключевое слово super позволяет обращаться к родительскому классу из классов-потомков.
▍Геттеры и сеттеры
Геттер для свойства можно задать следующим образом.
Сеттер можно описать так, как показано ниже.
С геттерами и сеттерами работают так, как будто они представляют собой не функции, а обычные свойства объектов.
Модули
До появления стандарта ES2015 существовало несколько конкурирующих подходов к работе с модулями. В частности, речь идёт о технологиях RequireJS и CommonJS. Такая ситуация приводила к разногласиям в сообществе JS-разработчиков.
В наши дни, благодаря стандартизации модулей в ES2015, ситуация постепенно нормализуется.
▍Импорт модулей
▍Экспорт модулей
▍Шаблонные литералы
Шаблонные литералы представляют собой новый способ описания строк в JavaScript. Вот как это выглядит.
Вот пример посложнее, иллюстрирующий возможность вычисления любых выражений и подстановки их результатов в строку.
Благодаря использованию шаблонных литералов гораздо легче стало объявлять многострочные строки.
Сравните это с тем, что приходилось делать для описания многострочных строк при использовании возможностей, имевшихся в языке до ES2015.
Параметры функций, задаваемые по умолчанию
Теперь функции поддерживают параметры, используемые по умолчанию — в том случае, если при вызове функций им не передаются соответствующие аргументы.
Оператор spread
Вот как на основании этого массива создать новый массив.
Вот как создать копию массива.
Этот оператор работает и с объектами. Например — вот как с его помощью можно клонировать объект.
Применив оператор spread к строке, можно преобразовать её в массив, в каждом элементе которого содержится один символ из этой строки.
Этот оператор, помимо вышеописанных вариантов его применения, удобно использовать при вызове функций, ожидающих обычный список аргументов, с передачей им массива с этими аргументами.
Деструктурирующее присваивание
Техника деструктурирующего присваивания позволяет, например, взять объект, извлечь из него некоторые значения и поместить их в именованные переменные или константы.
Деструктурирующее присваивание подходит и для работы с массивами.
Расширение возможностей объектных литералов
В ES2015 значительно расширены возможности описания объектов с помощью объектных литералов.
▍Упрощение включения в объекты переменных
Раньше, чтобы назначить какую-нибудь переменную свойством объекта, надо было пользоваться следующей конструкцией.
Теперь то же самое можно сделать так.
▍Прототипы
Прототип объекта теперь можно задать с помощью следующей конструкции.
▍Ключевое слово super
С использованием ключевого слова super объекты могут обращаться к объектам-прототипам. Например — для вызова их методов, имеющих такие же имена, как методы самих этих объектов.
▍Вычисляемые имена свойств
Вычисляемые имена свойств формируются на этапе создания объекта.
Цикл for. of
Структуры данных Map и Set
Итоги
Сегодня мы сделали обзор возможностей стандарта ES2015, которые чрезвычайно сильно повлияли на современное состояние языка. Нашей следующей темой будут особенности стандартов ES2016, ES2017 и ES2018.
Уважаемые читатели! Какие новшества стандарта ES6 кажутся вам наиболее полезными?
Обзор базовых возможностей ES6
JavaScript сильно изменился за последние годы. Вот 12 новых возможностей, которые можно начать использовать уже сегодня!
История
Новые добавления в язык называются ECMAScript 6. Или ES6 или ES2015+.
С момента появления в 1995, JavaScript развивался медленно. Новые возможности добавлялись каждые несколько лет. ECMAScript появился в 1997, его целью было направить развитие JavaScript в нужное русло. Выходили новые версии – ES3, ES5, ES6 и так далее.
Как видите, между версиями ES3, ES5 и ES6 есть пропуски длиной в 10 и 6 лет. Новая модель – делать маленькие изменения каждый год. Вместо того, чтобы накопить огромное количество изменений и выпустить их все за раз, как это было с ES6.
Browsers Support
Все современные браузеры и среды исполнения уже поддерживают ES6!
Chrome, MS Edge, Firefox, Safari, Node и многие другие системы имеют встроенную поддержку большинства возможностей JavaScript ES6. Так что, все из этого пособия можно использовать прямо сейчас.
Главные возможности ES6
Все сниппеты можно вставлять в консоль браузера и запускать.
Block scope variables
Проблема var в том, что переменная «протекает» в другие блоки кода, такие как циклы for или блоки условий if :
ES6 спешит на помощь:
Изменив var на let мы откорректировали поведение. Если блок if не вызывается, то переменная x не переопределяется.
IIFE (immediately invoked function expression)
Давайте сначала рассмотрим пример:
Как видите, private протекает наружу. Нужно использовать IIFE (immediately-invoked function expression):
В ES6 не нужно использовать IIFE, достаточно использовать блоки и let :
Const
Можно также использовать const если переменная не должна изменяться.
Template Literals
Не нужно больше делать вложенную конкатенацию, можно использовать шаблоны. Посмотрите:
Multi-line strings
Не нужно больше конкатенировать строки с + \n :
В ES6 можно снова использовать бэктики:
Оба блока кода генерируют одинаковый результат
Destructuring Assignment
ES6 destructing – полезная и лаконичная штука. Посмотрите на примеры:
Получение элемента из массива
Обмен значениями
Деструктуризация нескольких возвращаемых значений
В строке 3 можно вернуть в виде массива:
но вызывающему коду придется знать о порядке данных.
С ES6 вызывающий выбирает только нужные данные (строка 6):
Заметка: В строке 3 содержатся другие возможности ES6. Можно сократить < left: left >до < left >. Смотрите, насколько это лаконичнее по сравнению с версией ES5. Круто же?
Деструктуризация и сопоставление параметров
То же самое (но короче):
Глубокое сопоставление
То же самое (но короче):
Это также называют деструктуризацией объекта (object destructing).
Как видите, деструктуризация может быть очень полезной и может подталкивать к улучшению стиля кодирования.
Классы и объекты
Каждый объект в JavaScript имеет прототип, который является другим объектом. Все объекты в JavaScript наследуют методы и свойства от своего прототипа.
В ES5 объектно-ориентированное программирование достигалось с помощью функций-конструкторов. Они создавали объекты следующим образом:
Оба стиля (ES5/6) дают одинаковый результат.
Наследование
В ES5 придется немного поработать с прототипным наследованием.
Не будем вдаваться в детали, но заметьте несколько деталей:
Посмотрите, насколько лучше выглядит код на ES6 по сравнению с ES5. И они делают одно и то же! Win!
Нативные промисы
Переходим от callback hell к промисам (promises)
Одна функция принимает callback чтобы запустить его после завершения. Нам нужно запустить ее дважды, одну за другой. Поэтому приходится вызывать printAfterTimeout во второй раз в коллбеке.
Все становится совсем плохо когда нужно добавить третий или четвертый коллбек. Давайте посмотрим, что можно сделать с промисами:
С помощью then можно обойтись без вложенных функций.
Стрелочные функции
В ES5 обычные определения функций не исчезли, но был добавлен новый формат – стрелочные функции.
В ES5 есть проблемы с this :
For…of
От for переходим к forEach а потом к for. of :
ES6 for…of позволяет использовать итераторы
Параметры по умолчанию
От проверки параметров переходим к параметрам по умолчанию. Вы делали что-нибудь такое раньше?
Скорее всего да. Это распространенный паттерн проверки наличия значения переменной. Но тут есть некоторые проблемы:
Если параметр по умолчанию это булева переменная или если задать значение 0, то ничего не получится. Почему? Расскажу после этого примера с ES6 😉
В ES6 все получается лучше с меньшим количеством кода:
С проверкой на undefined все работает как нужно.
Rest-параметры
От аргументов к rest-параметрам и операции spread.
В ES5 работать с переменным количеством аргументов неудобно.
Операция Spread
В ES6 используем spread:
Мы также перешли от concat к spread’у:
Заключение
JavaScript сильно изменился. Эта статья покрывает только базовые возможности, о которых должен знать каждый разработчик.
Введение в ECMAScript 6 (ES-2015)
Введение в ES6
Template literals (Template strings)
Шаблонными литералами называются строковые литералы, допускающие использование выражений внутри. С ними вы можете использовать многострочные литералы и строковую интерполяцию.
Шаблонные литералы заключены в обратные кавычки (` `) вместо двойных или одинарных. Они могут содержать подстановки, обозначаемые знаком доллара и фигурными скобками ($<выражение>). Выражения в подстановках и текст между ними передаются в функцию. По умолчанию функция просто объединяет все части в строку. Если перед строкой есть выражение (здесь это tag), то шаблонная строка называется «теговым шаблоном». В этом случае, теговое выражение (обычно функция) вызывается с обработанным шаблонным литералом, который вы можете изменить перед выводом. Для экранирования обратной кавычки в шаблонных литералах указывается обратный слэш \.
Многострочные литералы
Символы новой строки являются частью шаблонных литералов. Используя обычные строки, вставка переноса потребовала бы следующего синтаксиса:
То же с использованием шаблонных литералов:
Интерполяция выражений
Для вставки выражений в обычные строки вам пришлось бы использовать следующий синтаксис:
Теперь, при помощи шаблонных литералов, вам доступен `синтаксический сахар`, делающий подстановки вроде той более читабельными:
В ES2015 с шаблонными литералами без вложения:
В ES2015 с вложенными шаблонными литералами:
Теговые шаблоны
Расширенной формой шаблонных литералов являются теговые шаблоны. Они позволяют разбирать шаблонные литералы с помощью функции. Первый аргумент такой функции содержит массив строковых значений, а остальные содержат выражения из подстановок. В итоге, функция должна вернуть собранную строку (или что-либо совсем иное, как будет показано далее). Имя функции может быть любым.
Функция тега не обязана возвращать строку.
Сырые строки
Специальное свойство raw, доступное для первого аргумента тегового шаблона, позволяет получить строку в том виде, в каком она была введена, без интерпритации.
let and const
Областью видимости переменных, объявленных ключевым словом let и const, является блок, в котором они объявлены, и все его под блоки. В этом работа директивы let схожа с работой директивы var. Основная разница заключается в том, что областью видимости переменной, объявленной директивой var, является вся функция, в которой она объявлена. К тому же переменные, значение констант не может быть изменено новым присваиванием, а также не может быть переопределено. При декларации переменной с ключевым словом const необходимо использовать оператор присваивания для задания значения константе.
Глобальные константы не становятся свойствами объекта window, в отличие от var-переменных.
Инициализация константы обязательна.
Необходимо указать значение одновременно с объявлением (смысл в том, что потом это значение изменить уже нельзя).
Обьевление переменных с ключевым словом const создаёт константу (новую именованную ссылку на область памяти), доступную только для чтения.
Это не означает, что указываемое значение неизменно, но это означает, что идентификатор не может быть переназначен. Например, если константа указывает на объект, то сам объект может быть изменён.
Имена констант не могут совпадать с именами функций или переменных той же области видимости.
Пример отличия глобальной и блочной области видимости:
Arrow function expressions
Выражения стрелочных функций имеют более короткий синтаксис по сравнению с функциональными выражениями и лексически привязаны к значению this (но не привязаны к собственному this, arguments, super, или new.target). Выражение стрелочных функций не позволяют задавать имя, поэтому стрелочные функции анонимны, если их ни к чему не присвоить.
Базовый синтаксис
Больше информации о стрелочных функциях, вы можете наити тут.
For. of
Оператор for. of выполняет цикл обхода итерируемых объектов (включая Array, Map, Set, объект аргументов и подобных), вызывая на каждом шаге итерации операторы для каждого значения из различных свойств объекта.
Почему НЕ СЛЕДУЕТ использовать for. in цикл для итерации? Потому что в зависимости от движка, JavaScript может итерировать в произвольном порядке, что может привести к непредсказуемому результату. Если свойство изменяется за одну итерацию, а затем изменяется снова, его значением в цикле является его последнее значение. Свойство, удаленное до того, как до него дошёл цикл, не будет участвовать в нём. Свойства, добавленные в объекты в цикле, могут быть пропущены. В общем, лучше не добавлять, изменять или удалять свойство из объекта во время итерации, если по нему ещё не прошли. Нет гарантии, что добавленное свойство будет посещено циклом, изменное после проведения изменений, а удалённое после удаления. Кроме того, итерационная переменная представляет собой строку, а не число, а значит, если вы собираетесь производить какие-либо подсчеты с переменной, вам потребуется провести конкатенацию строк вместо добавления. Так что во избежание логических ошибок не следует его использовать!
В отличие от for. of цикла, цикл for. in возвращает все перечисляемые свойства, включая имеющие нецелочисленные имена и наследуемые.
Синтаксис цикла for. of
Примеры:
Каждый объект унаследует метод objCustom и каждый массив Array унаследует метод arrCustom благодаря созданию их в Object.prototype и Array.prototype. Объект iterable унаследует методы objCustom и arrCustom из-за наследования через прототип.
Цикл выводит только перечисляемые свойства объекта iterable, в порядке их создания. Он не выводит значения 3, 5, 7 и hello поскольку они не являются перечисляемыми. Выводятся же имена свойств и методов, например, arrCustom и objCustom.
Цикл аналогичен предыдущему, но использует hasOwnProperty() для проверки того, собственное ли это свойство объекта или унаследовано. Выводятся только собственные свойства. Имена 0, 1, 2 и foo принадлежат только экземпляру объекта (не унаследованы). Методы arrCustom и objCustom не выводятся поскольку они унаследованы.
Этот цикл обходит iterable и выводит те значения итерируемого объекта которые определены в способе его перебора, т.е. не свойства объекта, а значения массива 3, 5, 7.
Computed property names
Синтаксис объявления объектов и их элементов поддерживает вычисляемые имена свойств. Это позволяет добавлять в скобки [] выражение, которое будет вычислено, как имя свойства. Оно напоминает шаблонные литералы.
Пример вычисляемых имён:
Object.assign()
Метод Object.assign() используется для копирования значений всех собственных перечисляемых свойств из одного или более исходных объектов в целевой объект. После копирования он возвращает целевой объект.
Метод Object.assign() копирует из исходных объектов в целевой объект только перечисляемые и собственные свойства. Он использует внутренний метод [[Get]] на исходных объектах и внутренний метод [[Set]] на целевом объекте, так что он также вызывает геттеры и сеттеры. Именно поэтому он присваивает свойства вместо простого копирования или определения новых свойств. Это поведение может сделать метод непригодным для вливания новых свойств в прототип, если вливаемые исходные объекты содержат геттеры. Вместо него для копирования в прототипы определений свойств, включая признак их перечисляемости, следует использовать методы Object.getOwnPropertyDescriptor() и Object.defineProperty().
Копируются свойства типов как String, так и Symbol.
В случае возникновения ошибки, например, когда свойство является незаписываемым, возбуждается исключение TypeError, а целевой объект target остаётся неизменным.
Обратите внимание, что метод Object.assign() не выкидывает исключения, если в качестве исходных значений выступают null или undefined.
Пример: клонирование объекта
Пример: слияние объектов
Rest parameters
Синтаксис оставшихся параметров функции позволяет представлять неограниченное множество аргументов в виде массива.
Пример использования синтаксиса оставшихся параметров:
В этом примере a = 0 b = 1 c[0] = 2 c[1] = 3
Если оставшийся параметр не передан, то он будет пустым массивом (в отличии от обычных параметров он никогда не будет undefined).
Данный синтаксис можно использовать не только в аргументах функции, но и в других местах, например, для копирования и объединения массивов:
Default parameters
Параметры по умолчанию позволяют задавать формальным параметрам функции значения по умолчанию в случае, если функция вызвана без аргументов, или если параметру явным образом передано значение undefined.
В JavaScript параметры функции, которым при ее вызове не передаются значения, принимают по умолчанию значение undefined. Однако в некоторых случаях может быть полезно задать иное значение по умолчанию. Именно для таких случаев предназначены параметры по умолчанию.
Значение по умолчанию присваивается формальному параметру только если при вызове функции значение для данного параметра не было передано или было явным образом передано undefined.
Пример использования параметров по умолчанию:
Destructuring assignment
Синтаксис деструктурирующего присваивания в выражениях JavaScript позволяет извлекать данные из массивов или объектов при помощи синтаксиса, подобного объявлению массива или литералов в объекте.
Выражения объявления объектов или массивов предоставляют простой способ создания пакета однородных данных. При создании такого пакета вы получаете возможность использовать его любым доступным образом. Также вы можете возвращать его в функциях.
Одной из ключевых возможностей использования деструктурирующего присваивания является чтение структуры данных одним оператором, хотя помимо этого вы можете найти множество других применений.
Пример деструктурирующего присваивания:
Больше примеров можете увидеть тут.
Map — Объект, содержащий пары ключ-значение и сохраняющий порядок вставки. Любое значение (как объекты, так и примитивы) могут быть использованы в качестве ключей.
Отличие Map от Object:
Позволяет сохранять уникальные значения любого типа, как примитивы, так и другие типы объектов.
Объекты Set представляют коллекции значений, по которым вы можете выполнить обход в порядке вставки элементов. Значение элемента в Set может присутствовать только в одном экземпляре, что обеспечивает его уникальность в коллекции Set.
Classes
Классы в JavaScript были введены в ECMAScript 2015 и представляют собой синтаксический сахар над существующим в JavaScript механизмом прототипного наследования. Синтаксис классов не вводит новую объектно-ориентированную модель, а предоставляет более простой и понятный способ создания объектов и организации наследования.
На самом деле классы — это «специальные функции», поэтому точно также, как вы определяете функции (function expressions и function declarations), вы можете определять и классы с помощью: class declarations и class expressions.
Разница между объявлением функции (function declaration) и объявлением класса (class declaration) в том, что объявление функции совершает подъём (hoisted), в то время как объявление класса — нет. Поэтому вначале необходимо объявить ваш класс и только затем работать с ним, а иначе будет сгенерировано исключение типа ReferenceError.
Объявление класса
Первый способ определения класса — class declaration (объявление класса). Для этого необходимо воспользоваться ключевым словом class и указать имя класса (в примере — «myClass»).
Второй способ определения класса — class expression (выражение класса). Можно создавать именованные и безымянные выражения. В первом случае имя выражения класса находится в локальной области видимости класса и может быть получено через свойства самого класса, а не его экземпляра.
Выражения класса подвержены тем же проблемам с подъёмом (hoisting), что и объявления класса!
Конструкторы
constructor — специальный метод, служащий для создания и инициализации объектов, созданных с использованием class.
При созданий новых объектов от класса будет запускаться constructor(), который необходим для инициализации объектов.
В классе может быть только один метод с именем «constructor». Если класс содержит более одного конструктора, будет сгенерировано исключение SyntaxError.
В конструкторе может быть использовано ключевое слово super, чтобы вызвать конструктор родительского класса.
Если вы не определили метод constructor, то будет использован конструктор по умолчанию.
Для базовых классов, constructor по умолчанию:
Для производных классов, constructor по умолчанию:
Методы
Синтаксис обьявления методов:
Все определения методов кроме методов-генераторов не могут быть конструкторами и будут выбрасывать TypeError если вы попытаетесь создать их экземпляр.
Вычисляемые имена свойств
Ключевое слово static, определяет статические методы для класса. Статические методы вызываются без инстанцирования их класса, и не могут быть вызваны у экземпляров (instance) класса.
Cинтаксис getter’ов и setter’ов
Наследование
Ключевое слово extends используется в объявлениях классов и выражениях классов для создания класса, дочернего относительно другого класса.
В конструкторе ключевое слово super() используется как функция, вызывающая родительский конструктор. Её необходимо вызвать до первого обращения к ключевому слову this в теле конструктора. Ключевое слово super также может быть использовано для вызова функций родительского объекта.
При переопределение в дочернем классе методов родительского класса, по умолчанию будет вызыватся методы дочернего класса, но можно явно вызвать методы родительского класса используя функцию super().
Расширение встроенных объектов с помощью extends
Этот пример расширяет встроенный объект Date.
Promise
Объект Promise (промис) используется для отложенных и асинхронных вычислений.
Так как методы Promise.prototype.then() и Promise.prototype.catch() сами возвращают промис, их можно вызывать цепочкой, создавая соединения.
Создание обещаний (promise)
Объект Promise создается при помощи ключевого слова new и своего конструктора. Конструктор Promise принимает в качестве аргумента функцию, называемую «исполнитель» (executor function). Эта функция должна принимать две функции-коллбэка в качестве параметров. Первый из них (resolve) вызывается, когда асинхронная операция завершилась успешно и вернула результат своего исполнения в виде значения. Второй коллбэк (reject) вызывается, когда операция не удалась, и возвращает значение, указывающее на причину неудачи, чаще всего объект ошибки.
Объект функции с двумя аргументами resolve и reject вызывает успешное выполнение обещания, второй отклоняет его.
Чтобы снабдить функцию функционалом обещаний, нужно просто вернуть в ней объект Promise.
Cоздание асинхронного http запроса:
Больше примеров и информации о промисах вы можете получить в официальной документации, а тагже документации Mozilla.
Iterators
Обработка каждого элемента коллекции является весьма распространенной операцией. JavaScript предоставляет несколько способов перебора коллекции, от простого цикла for до map(), filter() и array comprehensions. Итераторы и генераторы внедряют концепцию перебора непосредственно в ядро языка и обеспечивают механизм настройки поведения for. of циклов.
Объект является итератором, если он умеет обращаться к элементам коллекции по одному за раз, при этом отслеживая свое текущее положение внутри этой последовательности. В JavaScript итератор — это объект, который предоставляет метод next(), возвращающий следующий элемент последовательности. Этот метод возвращает объект с двумя свойствами: done и value.
После создания, объект-итератор может быть явно использован, с помощью вызовов метода next().
Iterable — Это объект, содержание которого можно перебрать.
Итерируемый объект отличается от не итерируемого тем что имеет специальный метод, который возвращает объект, для доступа к которому используется специальный символ: Symbol.iterator
Обьект возврощяющий этод метод формально называется итератор.
У итератора есть всего лишь один метод next()
Который возвращает объект (назовем его itreratorResult) c двумя свойствами done и value
done указывает есть ли еще значение в перебираемой последовательности, а value содержит следующий элемент последовательности.
После инициализации, метод next() может быть вызван для поочередного доступа к парам ключ-значение в объекте.
Объект является итерируемым, если в нем определен способ перебора значений, то есть, например, как значения перебираются в конструкции for..of. Некоторые встроенные типы, такие как Array или Map, по умолчанию являются итерируемыми, в то время как другие типы, как, например, Object, таковыми не являются.
Чтобы быть итерируемым, объект обязан реализовать метод iterator, что означает, что он (или один из объектов выше по цепочке прототипов) обязан иметь свойство с именем Symbol.iterator.
Так выглядит стандартный итератор:
Generators
Генераторы — это специальный тип функции, который работает как фабрика итераторов. Функция становится генератором, если содержит один или более yield операторов и использует function* синтаксис.
Генераторы — это новый вид функций, которые могут приостанавливать свое выполнение и возвращать промежуточный результат и возобновлять выполнение позже.
Давайте рассмотрим обычную функцию, выполняющую некоторые математические вычисления и возвращающую результат:
Теперь взгляните на аналогичную функцию генератор:
Как говорилось раньше генераторы могут приостанавливать своё выполнение и возвращать промежуточный результат. Из этого примера видно, что на момент первого вызова функция как бы приостанавливает свое выполнение на первом брейкпоинте yield и возвращает результат первого выражения. Во втором вызове функция продолжает с предыдущего брейкпоинта и двигается к следующему, возвращая результат уже следующего выражения.
Функции генераторы предоставляют мощный инструмент для написания сложных последовательных функций.
Генераторы вычисляют результаты своих yield выражений по требованию, что позволяет им эффективно работать с последовательностями с высокой вычислительной сложностью, или даже с бесконечными последовательностями.
Метод next() также принимает значение, которое может использоваться для изменения внутреннего состояния генератора. Значение, переданное в next(), будет рассматриваться как результат последнего yield выражения, которое приостановило генератор.
Можно заставить генератор выбросить исключение, вызвав его метод throw() и передав в качестве параметра значение исключения, которое должно быть выброшено. Это исключение будет выброшено из текущего приостановленного контекста генератора так, будто текущий приостановленный yield оператор являлся throw оператором.
Если yield оператор не встречается во время обработки выброшенного исключения, то исключение передается выше через вызов throw(), и результатом последующих вызовов next() будет свойство done равное true.
У генераторов есть метод return(value), который возвращает заданное значение и останавливает работу генератора.
Symbol
Symbol (Символ) — примитивный тип данных, экземпляры которого уникальны и неизменяемы.
В среде выполнения JavaScript значение «символа» создается путем вызова функции Symbol (), которая динамически создает анонимное и уникальное значение. Единственное разумное использование — сохранить символ, а затем использовать сохраненное значение для создания свойства объекта.
Так вы можете создать символьное свойство:
Для получения массива символьных объектов используйте свойство Object.getOwnPropertySymbols(obj);
Для получения доступа в любом месте вашего кода используйте методы Symbol.for() и Symbol.keyFor()
Для получения дополнительной информации о типе данных Sumbol, загляните в официальную документацию, а тагже в документацию Mozilla.
