理解 JavaScript 中的迭代协议和迭代器协议_js迭代协议详解-优快云博客

本文链接：https://blog.youkuaiyun.com/fakerplus/article/details/146560647

在 JavaScript 中，迭代协议和迭代器协议是两个重要的概念，它们定义了对象如何被迭代以及如何生成一系列值。本文将详细介绍这两个协议，并通过代码示例帮助理解它们的实际应用。

什么是迭代协议？

迭代协议允许 JavaScript 对象定义或定制它们的迭代行为。例如，在 for...of 循环中，哪些值可以被遍历到。以下是迭代协议的两个核心部分：

1. 可迭代协议

要成为可迭代对象，一个对象必须实现 [Symbol.iterator]() 方法。该方法是一个无参函数，返回一个符合迭代器协议的对象。

[Symbol.iterator] 的作用
当一个对象需要被迭代时（例如在 for...of 中），会调用其 [Symbol.iterator]() 方法，返回一个迭代器对象。迭代器对象负责生成迭代的值。
实现方式
[Symbol.iterator]() 方法可以是普通函数，也可以是生成器函数。生成器函数可以使用 yield 提供每个条目。

2. 迭代器协议

迭代器协议定义了如何生成一系列值。当所有值迭代完毕后，会返回一个默认的结束标志。

next() 方法
一个对象要成为迭代器，必须实现 next() 方法。该方法返回一个对象，包含以下两个属性：
- done：布尔值，表示是否迭代完成。
- value：当前迭代的值。

内置可迭代对象

以下是一些内置的可迭代对象：

String
Array
TypedArray
Map
Set
Intl.Segments
arguments 对象
一些 DOM 集合类型（如 NodeList）

这些对象的原型都实现了 [Symbol.iterator]() 方法。

接受可迭代对象的内置 API

以下内置 API 可以接受可迭代对象：

Map
WeakMap
Set
WeakSet
Promise.all
Promise.allSettled
Promise.any
Promise.race
Array.from
Object.groupBy
Map.groupBy

示例代码

以下是一些代码示例，帮助理解迭代协议和迭代器协议的实际应用。

1. 自定义可迭代对象

const genObj = {
        [Symbol.iterator]() {
                let i = 0;
                return {
                        next() {
                                i++;
                                if (i === 3) {
                                        return { value: undefined, done: true };
                                }
                                return { value: i, done: false };
                        },
                        return() {
                                console.log('closing');
                                return { done: true };
                        }
                };
        }
};

const [a, b, c] = genObj; // 解构可迭代对象
console.log(a, b, c); // 1 2 undefined

for (const value of genObj) {
        break; // 迭代一次，执行 return 方法
}

2. 使用生成器函数创建迭代器

const myIterator = {
        *[Symbol.iterator]() {
                yield 1;
                yield 2;
                yield 3;
        }
};

console.log([...myIterator]); // [1, 2, 3]

3. 使用类封装可迭代对象

class SimpleClass {
        #data;
        constructor(data) {
                this.#data = data;
        }
        *[Symbol.iterator]() {
                for (const value of this.#data) {
                        yield value;
                }
        }
}

const simple = new SimpleClass([1, 2, 3]);
for (const value of simple) {
        console.log(value); // 1, 2, 3
}

4. 重写字符串的迭代器方法

const str = 'hello';
str[Symbol.iterator] = function () {
        return {
                next() {
                        if (this._first) {
                                this._first = false;
                                return { value: 'bye', done: false };
                        } else {
                                return { done: true };
                        }
                },
                _first: true
        };
};

for (const key of str) {
        console.log(key); // bye
}

5. 简单迭代器实现

function createIterator(items) {
        let i = 0;
        return {
                next() {
                        const done = i >= items.length;
                        const value = !done ? items[i++] : undefined;
                        return { done, value };
                }
        };
}

const iterator = createIterator([1, 2, 3]);
console.log(iterator.next()); // { done: false, value: 1 }
console.log(iterator.next()); // { done: false, value: 2 }
console.log(iterator.next()); // { done: false, value: 3 }