Name already in use
ru.javascript.info / 1-js / 05-data-types / 06-iterable / article.md
- Go to file T
- Go to line L
- Copy path
- Copy permalink
- Open with Desktop
- View raw
- Copy raw contents Copy raw contents
Copy raw contents
Copy raw contents
Перебираемые (или итерируемые) объекты — это обобщение массивов. Концепция, которая позволяет использовать любой объект в цикле for..of .
Конечно же, сами массивы являются перебираемыми объектами. Но есть и много других встроенных перебираемых объектов, например, строки.
Если объект не является массивом, но представляет собой коллекцию каких-то элементов (список, набор), то удобно использовать цикл for..of для их перебора, так что давайте посмотрим, как это сделать.
Мы легко поймём принцип устройства перебираемых объектов, создав один из них.
Например, у нас есть объект. Это не массив, но он выглядит подходящим для for..of .
Например, объект range , который представляет собой диапазон чисел:
Чтобы сделать range итерируемым (и позволить for..of работать с ним), нам нужно добавить в объект метод с именем Symbol.iterator (специальный встроенный Symbol , созданный как раз для этого).
- Когда цикл for..of запускается, он вызывает этот метод один раз (или выдаёт ошибку, если метод не найден). Этот метод должен вернуть итератор — объект с методом next .
- Дальше for..of работает только с этим возвращённым объектом.
- Когда for..of хочет получить следующее значение, он вызывает метод next() этого объекта.
- Результат вызова next() должен иметь вид
Вот полная реализация range с пояснениями:
Обратите внимание на ключевую особенность итераторов: разделение ответственности.
- У самого range нет метода next() .
- Вместо этого другой объект, так называемый «итератор», создаётся вызовом range[Symbol.iterator]() , и именно его next() генерирует значения.
Таким образом, объект итератор отделён от самого итерируемого объекта.
Технически мы можем объединить их и использовать сам range как итератор, чтобы упростить код.
Например, вот так:
Теперь range[Symbol.iterator]() возвращает сам объект range : у него есть необходимый метод next() , и он запоминает текущее состояние итерации в this.current . Короче? Да. И иногда такой способ тоже хорош.
Недостаток такого подхода в том, что теперь мы не можем использовать этот объект в двух параллельных циклах for..of : у них будет общее текущее состояние итерации, потому что теперь существует лишь один итератор — сам объект. Но необходимость в двух циклах for..of , выполняемых одновременно, возникает редко, даже при наличии асинхронных операций.
Строка — перебираемый объект
Среди встроенных перебираемых объектов наиболее широко используются массивы и строки.
Для строки for..of перебирает символы:
И он работает корректно даже с суррогатными парами!
Явный вызов итератора
Чтобы понять устройство итераторов чуть глубже, давайте посмотрим, как их использовать явно.
Мы будем перебирать строку точно так же, как цикл for..of , но вручную, прямыми вызовами. Нижеприведённый код получает строковый итератор и берёт из него значения:
Такое редко бывает необходимо, но это даёт нам больше контроля над процессом, чем for..of . Например, мы можем разбить процесс итерации на части: перебрать немного элементов, затем остановиться, сделать что-то ещё и потом продолжить.
Итерируемые объекты и псевдомассивы [#array-like]
Есть два официальных термина, которые очень похожи, но в то же время сильно различаются. Поэтому убедитесь, что вы как следует поняли их, чтобы избежать путаницы.
- Итерируемые объекты — это объекты, которые реализуют метод Symbol.iterator , как было описано выше.
- Псевдомассивы — это объекты, у которых есть индексы и свойство length , то есть, они выглядят как массивы.
При использовании JavaScript в браузере или других окружениях мы можем встретить объекты, которые являются итерируемыми или псевдомассивами, или и тем, и другим.
Например, строки итерируемы (для них работает for..of ) и являются псевдомассивами (они индексированы и есть length ).
Но итерируемый объект может не быть псевдомассивом. И наоборот: псевдомассив может не быть итерируемым.
Например, объект range из примера выше — итерируемый, но не является псевдомассивом, потому что у него нет индексированных свойств и length .
А вот объект, который является псевдомассивом, но его нельзя итерировать:
Что у них общего? И итерируемые объекты, и псевдомассивы — это обычно не массивы, у них нет методов push , pop и т.д. Довольно неудобно, если у нас есть такой объект и мы хотим работать с ним как с массивом. Например, мы хотели бы работать с range , используя методы массивов. Как этого достичь?
Есть универсальный метод Array.from, который принимает итерируемый объект или псевдомассив и делает из него «настоящий» Array . После этого мы уже можем использовать методы массивов.
Array.from в строке (*) принимает объект, проверяет, является ли он итерируемым объектом или псевдомассивом, затем создаёт новый массив и копирует туда все элементы.
То же самое происходит с итерируемым объектом:
Полный синтаксис Array.from позволяет указать необязательную «трансформирующую» функцию:
Необязательный второй аргумент может быть функцией, которая будет применена к каждому элементу перед добавлением в массив, а thisArg позволяет установить this для этой функции.
Здесь мы используем Array.from , чтобы превратить строку в массив её элементов:
В отличие от str.split , этот метод в работе опирается на итерируемость строки, и поэтому, как и for..of , он корректно работает с суррогатными парами.
Технически это то же самое, что и:
. Но гораздо короче.
Мы можем даже создать slice , который поддерживает суррогатные пары:
Объекты, которые можно использовать в цикле for..of , называются итерируемыми.
- Технически итерируемые объекты должны иметь метод Symbol.iterator .
- Результат вызова obj[Symbol.iterator] называется итератором. Он управляет процессом итерации.
- Итератор должен иметь метод next() , который возвращает объект
Объекты, имеющие индексированные свойства и length , называются псевдомассивами. Они также могут иметь другие свойства и методы, но у них нет встроенных методов массивов.
Если мы заглянем в спецификацию, мы увидим, что большинство встроенных методов рассчитывают на то, что они будут работать с итерируемыми объектами или псевдомассивами вместо «настоящих» массивов, потому что эти объекты более абстрактны.
Работа со строками в JavaScript. Строковые функции
В этой статье мы поработаем со строками в JavaScript и рассмотрим такое понятие, как длина строки (length string). Также попрактикуемся с некоторыми строковыми функциями (методами).
В JavaScript строками считаются любые текстовые данные. В этом языке нет отдельного типа «символ», как это принято в некоторых других языках программирования. Если говорить о внутреннем формате для строк — то это всегда UTF-16, причём кодировка страницы значения не имеет.
Кавычки
В языке JavaScript существуют различные типы кавычек. К примеру, мы можем создать строку, используя одинарные, двойные или обратные кавычки:
И двойные, и одинарные кавычки работают, в принципе, одинаково. Что касается обратных, то тут есть пару отличий: 1) они позволяют вставлять в строку произвольные выражения, предварительно обёрнутые в $<…>:
2) они позволяют занимать более одной строки:
Вроде бы, всё очевидно и просто, но если мы попробуем сделать то же самое, используя двойные или одинарные кавычки, то получим ошибку.
Но вообще, и двойные, и одинарные кавычки были в JavaScript уже давно, ещё во времена, когда потребность в многострочии была не так велика. Обратные кавычки появились позже, поэтому они более гибкие в применении и лучше соответствуют современным реалиям.
Вдобавок к вышесказанному, скажем, что обратные кавычки дают возможность задавать «шаблонные функции» (они могут применяться перед первой обратной кавычкой). Тут синтаксис следующий:
У нас автоматически вызывается функция func, получающая строку и встроенные в эту строку выражения, которые она может обработать. Если перед строкой присутствует выражение, шаблонную строку называют «теговым шаблоном». Таким образом, появляется возможность применять собственную шаблонизацию для строк, однако на деле теговые шаблоны используются нечасто.
Спецсимволы
Если мы применяем одинарные либо двойные кавычки, мы тоже можем создавать многострочные строки. Для этого понадобится символ перевода строки \n:
Две строки ниже являются эквивалентными. Разница в том, что они по-разному записаны:
Существует и масса других спецсимволов:
Рассмотрим парочку примеров с Юникодом:
Как правило, спецсимволы начинаются с символа экранирования, представляющего собой обратный слеш \ . Его можно использовать и для того, чтобы вставлять в строки кавычки:
Но экранировать нужно только тогда, когда внутри строки мы используем такие же кавычки, в которые эта самая строка заключена. Таким образом, можно поступать проще:
Как видите, мы поместили строку в косые кавычки, а раздели I’m одинарной кавычкой. Просто и элегантно.
Кстати, если вдруг потребуется добавить в нашу строку сам обратный слеш, то мы экранируем его вторым обратным слешем:
Длина строки в JavaScript
Длину строки нам возвращает свойство length:
Так как \n является одним спецсимволом, то и длина строки получается равна трём, поэтому ошибки в коде нет.
Тут следует добавить, что length — это всё же свойство, а не функция, поэтому не нужно пытаться вызывать его путём добавления круглых скобок ( str.length() , а не str.length ). Такой вариант не сработает, ведь str.length — числовое свойство, а значит, скобки не добавляются.
Перебор строк
Если нужно посимвольно перебрать строки, используют for..of:
Изменяемы ли строки?
Нет, их содержимое изменить нельзя, когда строка создаётся, у вас не получится взять какой-нибудь символ из середины и выполнить его замену. Впрочем, давайте попробуем:
Но выход есть — создаём новую строку и записываем её вместо старой в ту же переменную:
Строковые функции
Строковые функции (методы) упрощают работу со строками в JavaScript. Давайте посмотрим, как происходит изменение регистра с помощью строковых функций. К примеру с помощью функций toLowerCase() и toUpperCase() мы можем изменить регистр символов следующим образом:
Также при необходимости мы можем выполнить перевод в нижний регистр и для какого-нибудь определённого символа:
Подробнее о строковых функциях поговорим в следующий раз. В частности, рассмотрим, как осуществляется поиск в строке и как работать с подстрокой. Следите за новостями!
Интересует профессиональный курс по JavaScript-разработке? Переходите по ссылке ниже:
При подготовке статьи использовались следующие материалы: — «Строки»; — «JavaScript. Строковые методы».
Методы строк в JavaScript: простая шпаргалка с примерами
Любые текстовые данные в JavaScript считаются строками. Это примитивный тип, но язык позволяет работать с ним так, будто он является объектом. В том числе — использовать встроенные в JS методы строк, которые собраны в этой шпаргалке.
Важно: при использовании методов создаётся новая строка, которая записывается в ту же переменную вместо старой строки.
Как изменить регистр
toLowerCase
Преобразует символы в строке в нижний регистр.
toUpperCase
Преобразует символы в строке в верхний регистр.
Как объединить строки
concat
Объединяет две или более строки и возвращает одну строку.
Как разделить строку на подстроки
split
Разбивает строку в массив по указанному разделителю, которым может быть подстрока или регулярное выражение. Вторым параметром можно указать ограничитель.
Как повторить строку
repeat
Принимает в качестве параметра число и повторяет строку указанное количество раз.
Как найти подстроку
charAt
Возвращает символ по указанному индексу.
includes
Проверяет, содержит ли строка указанную подстроку. Возвращает значение true или false. Вторым параметром можно указать позицию в строке, с которой следует начать поиск.
indexOf
Возвращает индекс первого найденного вхождения указанного значения. Поиск ведётся от начала до конца строки. Если совпадений нет, возвращает -1. Вторым параметром можно передать позицию, с которой следует начать поиск.
lastIndexOf
Возвращает индекс последнего найденного вхождения указанного значения. Поиск ведётся от конца к началу строки. Если совпадений нет, возвращает -1. Вторым параметром можно передать позицию, с которой следует начать поиск.
endsWith
Проверяет, заканчивается ли строка символами, заданными первым параметром. Возвращает true или false. Есть второй необязательный параметр — ограничитель по диапазону поиска. По умолчанию он равен длине строки.
startsWith
Проверяет, начинается ли строка с указанных символов. Возвращает true или false. Вторым параметром можно указать индекс, с которого следует начать проверку.
search
Проверяет, есть ли в строке указанное значение или регулярное выражение и возвращает индекс начала совпадения.
Как извлечь подстроку
slice
Извлекает часть строки и возвращает новую строку. Обязательный параметр — начало извлечения. Вторым параметром можно установить границу (по умолчанию — до конца строки).
substring
Извлекает символы из строки между двумя указанными индексами. Второй индекс указывать не обязательно. В таком случае будут извлечены все символы от начала до конца строки. В отличие от slice, можно задавать start больше, чем end. Отрицательные значения не поддерживаются, они интерпретируются как 0.
substr
Извлекает часть строки указанной длины. Первым параметром принимает стартовую позицию, вторым — длину. Значение первого параметра может быть отрицательным, тогда позиция определяется с конца строки.
Как заменить подстроку
replace
Ищет в строке указанное значение или регулярное выражение и возвращает новую строку, в которой выполнена замена на второй параметр. Можно заменить найденные значения другой строкой или передать функцию для работы над совпадениями.
replaceAll
Даёт такой же результат, как метод replace() с глобальным флагом g. Заменяет все найденные совпадения другой строкой или переданной функцией.
Как добавить в строку пробелы или другие символы
padEnd
Добавляет в конце отступы, пока строка не достигнет длины, заданной первым параметром. Вторым параметром можно указать другой символ вместо пробела.
padStart
Добавляет в начале отступы, пока строка не достигнет длины, заданной первым параметром. Вторым параметром можно указать другой символ вместо пробела.
Как удалить пробелы в строке
Обрезает пробелы с обоих концов строки.
trimEnd
Обрезает пробелы в конце строки
trimStart
Обрезает пробелы в начале строки
Как работать с Юникодом
charCodeAt
Возвращает числовое значение Юникода по указанному индексу. Обратите внимание: у букв в верхнем и нижнем регистрах разные коды.
fromCharCode
Преобразует числовые значения Юникода в читаемые символы.
Примечание: при работе с эмодзи, редкими математическими символами, иероглифами нужно помнить о суррогатных парах. Это символы, которые записываются двумя 16-битными словами. Длина таких строк — 2.
Суррогатные пары не учитывались при создании JS и методы строк charCodeAt / fromCharCode обрабатывают их некорректно. Правильно работают с суррогатными парами редкие методы String.fromCodePoint и str.codePointAt, которые появились в языке недавно.
Для работы со строками в JS есть не только встроенные методы, но и сторонние библиотеки. Они решают задачи более сложные задачи. Но подключать их имеет смысл только в том случае, если возможностей встроенных методов действительно не хватает.
Обход строк в цикле — Основы JavaScript
Циклы подходят не только для обработки чисел, но и при работе со строками. В первую очередь благодаря возможности получить конкретный символ по его индексу. Ниже пример кода, который распечатывает каждую букву слова на отдельной строке:
Самое главное в этом коде, поставить правильное условие в while . Это можно сделать сразу двумя способами: i < name.length или i <= name.length — 1 . Оба способа приводят к одному результату.
Формирование строк в циклах
Еще одно использование циклов – формирование строк. Подобная задача нередко встречается в веб-программировании. Она сводится к обычной агрегации с применением интерполяции или конкатенации.
Есть одна задача, крайне популярная среди людей, проводящих собеседования, это переворот строки. Ее можно решить множеством разных способов, но именно посимвольный перебор считается самым базовым. Пример работы этой функции:
Общая идея переворота состоит в следующем: нужно брать символы по очереди с начала строки и соединять их в обратном порядке. Звучит довольно просто. Давайте проверим:
Единственный возможно сложный момент в этом коде – прочувствовать, как собирается сама строка. Так как каждый следующий символ прикрепляется к результирующей строке слева, то, в конечном итоге, строка оказывается перевернута.