JavaScript中的迭代协议与可迭代对象

迭代协议是ES6引入的一组规则，它定义了如何遍历数据集合。协议包含两个核心概念：可迭代协议和迭代器协议。

1. 什么是可迭代协议？
可迭代协议要求对象必须实现@@iterator方法（即Symbol.iterator属性），这个方法必须返回一个迭代器对象。当对象需要被迭代时（比如在for...of循环中），会自动调用它的@@iterator方法。

2. 什么是迭代器协议？
迭代器协议要求对象必须实现一个next()方法，每次调用next()返回一个包含两个属性的对象：

• value：当前迭代的值
• done：布尔值，表示迭代是否完成

3. 内置可迭代对象示例
JavaScript中许多内置对象都是可迭代的：

// 数组
const arr = [1, 2, 3];
for (const item of arr) {
    console.log(item); // 依次输出1, 2, 3
}

// 字符串
const str = "hi";
for (const char of str) {
    console.log(char); // 依次输出"h", "i"
}

// Map
const map = new Map([['a', 1], ['b', 2]]);
for (const [key, value] of map) {
    console.log(key, value); // 依次输出a 1, b 2
}

4. 如何自定义可迭代对象？
我们可以通过实现Symbol.iterator方法来创建自定义可迭代对象：

// 创建一个范围可迭代对象
const range = {
    from: 1,
    to: 3,
    
    [Symbol.iterator]() {
        let current = this.from;
        let last = this.to;
        
        // 返回迭代器对象
        return {
            next() {
                if (current <= last) {
                    return { value: current++, done: false };
                } else {
                    return { done: true };
                }
            }
        };
    }
};

// 使用for...of遍历
for (const num of range) {
    console.log(num); // 依次输出1, 2, 3
}

5. 迭代器的实际应用场景

• 展开运算符：[...range]会得到[1, 2, 3]
• Array.from()：Array.from(range)也会得到[1, 2, 3]
• 解构赋值：const [first, second] = range

6. 生成器函数简化迭代器创建
生成器函数（function*）可以更简洁地创建可迭代对象：

const range = {
    from: 1,
    to: 3,
    
    *[Symbol.iterator]() {
        for (let i = this.from; i <= this.to; i++) {
            yield i;
        }
    }
};

7. 注意事项

• 迭代器是单向的，只能向前迭代，不能重置
• 同一个迭代器对象不应该被多个消费者同时使用
• 迭代完成后再次调用next()会返回{done: true}

理解迭代协议有助于我们更好地使用JavaScript的迭代特性，并创建自定义的数据结构。