Итерируемый протокол и for...of
Изучите итерируемый протокол: Symbol.iterator, iterator.next(), а также использование for...of, spread и Array.from на небольших пользовательских примерах
«Итерируемый протокол и for...of» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 3 уроков всего.
Общая картина
Цель: читать и создавать небольшие итерируемые объекты.
- Что означает iterable
- Symbol.iterator и iterator.next()
- for...of, распаковка, Array.from
- Создание примера счётчика от 0 до N
for...of для встроенных объектов
for...of работает со встроенными итерируемыми объектами, например массивами и строками, выдавая элементы по порядку.
// Arrays and strings are iterable
const arr = [10, 20, 30];
for (const n of arr) {
console.log("arr item:", n);
}
const word = "JS";
for (const ch of word) {
console.log("char:", ch);
}
Пользовательский итерируемый объект
iterable содержит метод [Symbol.iterator](), который возвращает итератор; его next() выдаёт { value, done }.
// A tiny iterable that counts 0..max-1
const Counter = {
make: function (max) {
return {
max: max,
// Symbol.iterator returns an iterator object
[Symbol.iterator]: function () {
let i = 0;
return {
next: function () {
if (i < max) {
const out = { value: i, done: false };
i = i + 1;
return out;
}
return { value: undefined, done: true };
}
};
}
};
}
};
for (const x of Counter.make(3)) {
console.log("count:", x);
}
Ручная итерация
Внутри for...of многократно вызывается next(), пока не будет получено done: true.
// You can drive the iterator manually
const iterable = Counter.make(2);
const it = iterable[Symbol.iterator]();
console.log(it.next()); // { value: 0, done: false }
console.log(it.next()); // { value: 1, done: false }
console.log(it.next()); // { value: undefined, done: true }
Распаковка и Array.from
Распаковка и Array.from также используют протокол итерируемых объектов для сбора значений.
// Spread (...) and Array.from consume iterables
const small = Counter.make(4);
const a1 = [...small];
const a2 = Array.from(Counter.make(3));
console.log("spread:", a1);
console.log("from :", a2);
Хорошие привычки
Советы:
- Каждый раз возвращайте новый итератор в [Symbol.iterator].
- Всегда завершайте итерацию значением done: true, чтобы избежать бесконечных циклов.
- Храните состояние локально внутри замыкания итератора.
Проверка протокола итерируемых объектов
Быстрая проверка: превращение объекта в итерируемый.
Повторение
Повторение: встроенные объекты, например массивы, являются итерируемыми. Чтобы создать собственный, добавьте [Symbol.iterator](), возвращающий итератор с методом next(). Используйте for...of, распаковку или Array.from, чтобы получать значения.
Часто задаваемые вопросы
Урок «Итерируемый протокол и for...of» бесплатный?
Да — полный текст урока «Итерируемый протокол и for...of» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 3 уроков всего.
Чему я научусь в уроке «Итерируемый протокол и for...of»?
Изучите итерируемый протокол: Symbol.iterator, iterator.next(), а также использование for...of, spread и Array.from на небольших пользовательских примерах Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.
Сколько времени занимает урок «Итерируемый протокол и for...of»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Итерируемый протокол и for...of
- Функции-генераторы, yield и небольшие конвейеры
- Асинхронные итераторы — for await...of и асинхронные генераторы