JavaScript Ітеровані об’єкти
Об’єкти, які можна повторювати за допомогою for..of називаються ітерованими.
Технічно ітеровані об’єкти повинні реалізовувати метод Symbol.iterator.
Ітерація по рядку
Ви можете використовувати цикл for..of для перебору елементів рядка:
Ітерація по масиву
Ви можете використовувати цикл for..of для перебору елементів масиву:
JavaScript Ітератори
Протокол ітератора визначає, як створити послідовність значень із об’єкта.
Об’єкт стає ітератором, коли він реалізує метод next().
Метод next() має повертати об’єкт з двома властивостями:
- значення (наступне значення)
- виконано (вірно або невірно)
| значення | значення, що повертається ітератором (може бути опущено, якщо зроблено вірно) |
|---|---|
| зроблено | true якщо ітератор завершився false якщо ітератор створив нове значення |
Саморобна ітерабельність
Ця ітерація повертає безкінечне число разів: 10,20,30,40,.... Кожен раз викликається next():
Приклад
// Саморобний ітерабельний
function myNumbers() {
let n = 0;
return {
next: function() {
n += 10;
return {value:n, done:false};
}
};
}
// Створити ітерабельний
const n = myNumbers();
n.next(); // поверне 10
n.next(); // поверне 20
n.next(); // поверне 30
Спробуйте самі »
Проблема з саморобним ітерабельним:
Він не підтримує JavaScript інструкцію for..of.
Ітерований об’єкт JavaScript - це об’єкт, що має Symbol.iterator.
Symbol.iterator - це функція, яка повертає функцію next().
Ітерацію можна повторювати за допомогою коду: for (const x of iterable) { }
Приклад
// Створити об’єкт
myNumbers = {};
// Зробити його ітерованим
myNumbers[Symbol.iterator] = function() {
let n = 0;
done = false;
return {
next() {
n += 10;
if (n == 100) {done = true}
return {value:n, done:done};
}
};
}
Тепер ви можете використовувати for..of
for (const num of myNumbers) {
// Будь-який код тут
}
Спробуйте самі »
Метод Symbol.iterator викликається автоматично for..of.
Але також це можна зробити "вручну":
Приклад
let iterator = myNumbers[Symbol.iterator]();
while (true) {
const result = iterator.next();
if (result.done) break;
// Будь-який код тут
}
Спробуйте самі »
