ES6, ES8, ES2017: что такое ECMAScript и чем это отличается от JavaScript
Авторизуйтесь
ES6, ES8, ES2017: что такое ECMAScript и чем это отличается от JavaScript
Изучение JavaScript может сбить с толку по множеству причин, и одна из них — акронимы. Чтобы не дать сокращениям сбить вас с толку, в этой статье мы разберём их значения и историю возникновения.
Что такое ECMAScript?
Сначала немного истории. JavaScript создавался как скриптовый язык для Netscape. После чего он был отправлен в ECMA International для стандартизации (ECMA — это ассоциация, деятельность которой посвящена стандартизации информационных и коммуникационных технологий). Это привело к появлению нового языкового стандарта, известного как ECMAScript.
Последующие версии JavaScript уже были основаны на стандарте ECMAScript. Проще говоря, ECMAScript — стандарт, а JavaScript — самая популярная реализация этого стандарта.
Что такое ES? История версий
ES — это просто сокращение для ECMAScript. Каждое издание ECMAScript получает аббревиатуру ES с последующим его номером. Всего существует 8 версий ECMAScript. ES1 была выпущена в июне 1997 года, ES2 — в июне 1998 года, ES3 — в декабре 1999 года, а версия ES4 — так и не была принята. Не будем углубляться в эти версии, так как они морально устарели, а рассмотрим только последние четыре.
ES5 был выпущен в декабре 2009 года, спустя 10 лет после выхода третьего издания. Среди изменений можно отметить:
Версия ES6/ES2015 вышла в июне 2015 года. Это также принесло некую путаницу в связи с названием пакета, ведь ES6 и ES2015 — это одно и то же. С выходом этого пакета обновлений комитет принял решение перейти к ежегодным обновлениям. Поэтому издание было переименовано в ES2015, чтобы отражать год релиза. Последующие версии также называются в соответствии с годом их выпуска. В этом обновлении были сделаны следующие изменения:
25–27 ноября, Онлайн, Беcплатно
ES2016 (ES7) вышла в июне 2016 года. Среди изменений в этой версии ECMAScript можно отметить:
Спустя еще год выходит версия ES2017 (ES8). Данный стандарт получил следующие изменения:
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 позволяет решать те же задачи, что и раньше, с помощью меньшего объёма кода, который, к тому же, оказывается проще, понятнее и читабельнее?
ES5 ES6 и т.д. что это все за ху**я?
Читая статьи про Javascript новички (да и я собственно) часто сталкиваются c аббревиатурами такими как эти:
Что это все значит?
Все это относится к описанию стандарта, который называется ECMAScript По сути, ECMAScript — это стандарт на котором базируется язык JavaScript, и часто для сокращения его обозначают как ES.
История стандартизации JavaScript
Дело в том что JavaScript был выпущен в компании NetScape Navigator в 1995 году, но его изначальное название было другим — LiveScript. Лишь через год, в попытках придать ему больший охват и популярность его переименовали в JavaScript, пытаясь сыграть на популярном в то время языке Java.
в 1996 году NetScape попросил ECMA International стандартизировать JavaScript. Это привело к появлению официального стандарта ECMAScript.
С тех самых пор термин JavaScript применяется в контексте упоминания самого языка программирования, а ECMAScript — когда говорят о стандарте языка или версии этого стандарта.
До начала 21 века было выпущено 3 версии стандарта ECMAScript и затем на целое десятилетие все затихло…
ECMAScript 3 стала наиболее популярной версией JavaScript и именно ее традиционно использовали веб-разработчики по всему миру при создании сайтов.
Для разработчиков браузеров стандарт ECMAScript по сути является руководством: какие функции и конструкции языка должны поддерживаться и выполняться браузером
За десять лет после выхода третей версии стандарта была неудачная попытка выпуска 4 версии, и лишь в 2009 году комитет смог родить ECMAScript 5 — стандарт, который предусматривал новые/современные возможности JavaScript… Но браузеры не особо быстро отреагировали, а значительная доля пользователей браузера от MicroSoft — Internet Explorer тормозило внедрение и использование новых стандартов языка.
Новый JavaScript
Все стало меняться в 2012 году, разработчики стали в большинстве своем отказываться поддерживать Internet Explorer и писать код с учетом последних стандартов.
Одновременно, ECMA International подхватила активность, пересмотрев свой подход к стандартизации языка.
В результате в 2015 году был «рожден» новый стандарт получивший сокращенное название ES и согласно исторической последовательности версии присвоили 6 — в итоге получилось ES6.
Новые возможности ES6
Также значительным прорывом стало то что комитет принял решение о ежегодном пересмотре и выпуске стандарта, в результате начиная с 2015 года мы каждый год получаем новый стандарт ECMAScript.
Для лучшего понимая исторической последовательности развития JavaScript и его стандартов смотрите табличку ниже:
Даты релиза различных версий Javascript
| Издание | Официальное название | Дата публикации |
|---|---|---|
| ES8 | ES2017 | июнь 2017 |
| ES7 | ES2016 | июнь 2016 |
| ES6 | ES2015 | июнь 2015 |
| ES5.1 | ES5.1 | июнь 2011 |
| ES5 | ES5 | декабрь 2009 |
| ES4 | ES4 | отменен |
| ES3 | ES3 | декабрь 1999 |
| ES2 | ES2 | июнь 1998 |
| ES1 | ES1 | июнь 1997 |
На сегодняшний день наибольшей поддержкой в браузерах обладает версия ES6 (ECMAScript 2015) однако наличие современного инструментария для разработки (транспайлеры JS) позволяет разработчикам писать код на той версии которая им больше подходит.
Как определить поддержку стандартов браузерами
C выход ES6 и последующих версий, остро встал вопрос, а будет ли новый стандарт и сами новые возможности языка работать в браузере, ведь они должны поддерживаться браузером, чтобы написанный нами современный код на JavaScript отработал в нем.
На момент выхода стандарта естественно что браузеры не поспевали за ним, но на сегодняшний день все обстоит намного лучше, ну кроме конечно Internet Explore =(
Для того чтобы понять насколько браузеры поддерживают возможности например ES6 достаточно зайти на сайт и посмотреть http://kangax.github.io/compat-table/es6/
Как не сложно заметить, на сегодня ES6 достаточно хорошо уже адаптирован браузерами и широко ими поддерживается, однако разработчику уже во всю используют не только ES6 но и ES7 и в принципе любят юзать те возможности которые выкатываются со стандартами…
Но чтобы код работал в любом браузере в независимости от стандарта его написания на заре появления ES6 возник Babel, без которого по сути сейчас не обходится работа любого frontend-разработчика.
Что такое Babel и зачем он?
Babel это транспайлер, специальный инструмент разработчика, который преобразует код JavaScript написаный более современным стандартом, в код более старого стандарта, который поддерживается большинством браузеров.
Казалось бы, ES6 уже поддерживается большинством браузеров в 2020 году, кому еще нужен Babel? Но в текущее время современный код с асинхронностью и прочим уже вышел за рамки ES6 и использует более новые версии стандарта. Плюс с приходом JS фреймворков и их активным внедрением, для их понимания браузером (например того же React) Babel стал необходим еще больше, т.к. напрямую код React в браузере не отработает, ввиду чего его нужно преобразовать при помощи Babel.
Ну и кто более глубже хочет погрузится в понимание современного JS может посмотреть видео ниже:
Введение в 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.
