Простое руководство по итераторам ES6 в JavaScript с примерами

Простое руководство по итераторам ES6 в JavaScript с примерами

От автора: в этой статье мы разберем, что такое итераторы. Итераторы – это новый способ перебора любой коллекции в цикле в JS. Они были представлены в ES6 и стали крайне популярны из-за того, что они очень полезны и используются в нескольких местах. Мы разберем концепцию итераторов, а также где их использовать. Посмотрим на некоторые примеры того, как реализуются в JavaScript итераторы.

Введение

Представьте следующий массив –

В какой-то момент вам захочется получить все значения в массиве отдельно и вывести их на экран для дальнейшей манипуляции или выполнения каких-либо действий над ними. Если я спрошу, как бы вы это сделали? Вы ответите – все просто. Я просто переберу их в цикле с помощью for, while, for-of или одного из этих методов перебора. Реализации будут примерно такие –

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Простое руководство по итераторам ES6 в JavaScript с примерами

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

Простое руководство по итераторам ES6 в JavaScript с примерами

myFavouriteAuthors – объект, внутри которого находится другой объект allAuthors. allAuthors содержит 3 массива с ключами fiction, scienceFiction и fantasy. Если я попрошу вас перебрать overmyFavouriteAuthors и получить всех авторов, как вы поступите? Вы можете попробовать скомбинировать разные циклы.

Но если вы так сделаете –

Вы получите TypeError, которая указывает, что объект не поддается перебору. Давайте узнаем, что такое iterables, и как сделать объект итерируемым. В конце статьи вы узнаете, как использовать цикл for-of на пользовательских объектах, в нашем случае на myFavouriteAuthors.

Iterables и итераторы

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

Добавим метод getAllAuthors в myFavouriteAuthors, он будет возвращать всех авторов. Вот так –

Простое руководство по итераторам ES6 в JavaScript с примерами

Это простой подход. С его помощью можно решить нашу текущую задачу и получить всех авторов. Но с такой реализацией может возникнуть пара проблем –

Имя getAllAuthors очень специфично. Если кто-то пишет свой myFavouriteAuthors, он может его назвать retrieveAllAuthors.

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

getAllAuthors возвращает массив строк всех авторов. А если другой разработчик вернет массив объектов в таком формате –

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

А что, если мы зададим правило, чтобы имя метода и его возвращаемый тип были фиксированными и неизменными?

Назовем метод iteratorMethod.

Похожий шаг приняли в ECMA, чтобы стандартизировать процесс перебора пользовательских объектов в цикле. Но вместо iteratorMethod в ECMA использовали имя Symbol.iterator. Symbols предлагает уникальные имена, которые не будут конфликтовать с другими именами свойств. У этого итератора будет метод next, который будет возвращать объект с ключами value и done.

Ключ value будет хранить текущее значение. Он может быть любого типа. Ключ done имеет Булев тип. Этот ключ указывает на то, были получены все значения или нет.

Схема поможет понять связь между iterables, итераторами и next.

Простое руководство по итераторам ES6 в JavaScript с примерами

Из книги Exploring JS автора Axel Rauschmayer –

iterable – это структура данных, которая хочет сделать свои элементы публично доступными. Для этого она реализует метод с ключом Symbol.iterator. Этот метод является фабрикой для итераторов. То есть он будет создавать итераторы.

Итератор – это указатель для перемещения по элементам структуры данных.

Как сделать объект итерируемым

Из предыдущего раздела мы узнали, что необходимо реализовать метод Symbol.iterator. Чтобы задать этот ключ, используем синтаксис вычисляемых свойств. Пример –

Простое руководство по итераторам ES6 в JavaScript с примерами

Итератор создается в строке 4. Это объект с методом next. Метод next возвращает значение по переменной step. В строке 25 мы получаем iterator. В строке 27 мы вызываем next. Вызываем next, пока done не станет true.

Именно это происходит в цикле for-of. Циклы for-of принимают iterable и создают его итератор. Итератор продолжает вызывать next(), пока done не станет true.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Iterables в JavaScript

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

К iterables относятся –

Массивы и TypedArrays

Строки – итерация по каждому символу или кодовой точке Unicode.

Карты – итерация по парам ключ/значение

Наборы – итерация по элементам

arguments  — массивоподобная специальная переменная в функциях

DOM элементы (в разработке)

Другие конструкции в JS, использующие iterables

for-of цикл – требует iterable. Иначе выбрасывается TypeError.

Деструктуризация массивов – деструктуризация проходит через iterables. Посмотрим, как это происходит. Код –

Это эквивалент записи –

Оператор расширения (…)

Код

Можно записать так

Promise.all и Promise.race принимают iterables над Promises.

Карты и наборы

Конструктор Map превращает iterable над парами [key, value] в Map, а конструктор Set превращает iterable над элементами в Set –

Перед понятием функций генераторов нужно понять итераторы.

Как сделать myFavouriteAuthors итерируемым

Реализация, которая делает myFavouriteAuthors итерируемым.

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

Автор: Brandon Morelli

Источник: https://codeburst.io/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

Прямо сейчас посмотрите курс по EcmaScript 6.0

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree