9.1 可迭代协议与迭代器协议

9.1 可迭代协议与迭代器协议

在 JavaScript 中，可迭代协议（Iterable Protocol）和迭代器协议（Iterator Protocol）是用于定义对象如何被遍历的标准。理解这两种协议是掌握 JavaScript 迭代机制的基础。本节将详细介绍可迭代协议和迭代器协议的概念及其实现方式。

9.1.1 可迭代协议

可迭代协议允许对象定义或定制其迭代行为。一个对象要实现可迭代协议，必须实现 Symbol.iterator 方法。

1. Symbol.iterator 方法
Symbol.iterator 是一个内置的 Symbol 值，表示对象的默认迭代器方法。该方法必须返回一个迭代器对象。

2. 示例

const iterable = {
  [Symbol.iterator]() {
    let step = 0;
    return {
      next() {
        step++;
        if (step === 1) {
          return { value: "Hello", done: false };
        } else if (step === 2) {
          return { value: "World", done: false };
        } else {
          return { value: undefined, done: true };
        }
      },
    };
  },
};

for (const value of iterable) {
  console.log(value); // 输出 "Hello" 和 "World"
}

9.1.2 迭代器协议

迭代器协议定义了如何产生一系列的值。一个对象要实现迭代器协议，必须实现 next() 方法。

1. next() 方法
next() 方法返回一个包含 value 和 done 属性的对象：

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

2. 示例

const iterator = {
  step: 0,
  next() {
    this.step++;
    if (this.step === 1) {
      return { value: "Hello", done: false };
    } else if (this.step === 2) {
      return { value: "World", done: false };
    } else {
      return { value: undefined, done: true };
    }
  },
};

console.log(iterator.next()); // 输出 { value: "Hello", done: false }
console.log(iterator.next()); // 输出 { value: "World", done: false }
console.log(iterator.next()); // 输出 { value: undefined, done: true }

9.1.3 可迭代协议与迭代器协议的结合

可迭代对象通过 Symbol.iterator 方法返回一个迭代器，迭代器通过 next() 方法产生值。

1. 示例

const iterable = {
  [Symbol.iterator]() {
    let step = 0;
    return {
      next() {
        step++;
        if (step === 1) {
          return { value: "Hello", done: false };
        } else if (step === 2) {
          return { value: "World", done: false };
        } else {
          return { value: undefined, done: true };
        }
      },
    };
  },
};

for (const value of iterable) {
  console.log(value); // 输出 "Hello" 和 "World"
}

9.1.4 内置的可迭代对象

JavaScript 中的许多内置对象都是可迭代的，例如数组、字符串、Map、Set 等。

1. 数组

const array = [1, 2, 3];
for (const value of array) {
  console.log(value); // 输出 1, 2, 3
}

2. 字符串

const string = "Hello";
for (const char of string) {
  console.log(char); // 输出 "H", "e", "l", "l", "o"
}

3. Map

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

9.1.5 自定义可迭代对象

通过实现 Symbol.iterator 方法，可以自定义可迭代对象。

1. 示例

class Range {
  constructor(start, end) {
    this.start = start;
    this.end = end;
  }

  [Symbol.iterator]() {
    let current = this.start;
    return {
      next: () => {
        if (current <= this.end) {
          return { value: current++, done: false };
        } else {
          return { value: undefined, done: true };
        }
      },
    };
  }
}

const range = new Range(1, 3);
for (const value of range) {
  console.log(value); // 输出 1, 2, 3
}

9.1.6 总结

• 可迭代协议：通过 Symbol.iterator 方法定义对象的迭代行为。
• 迭代器协议：通过 next() 方法产生一系列的值。
• 内置可迭代对象：数组、字符串、Map、Set 等。
• 自定义可迭代对象：通过实现 Symbol.iterator 方法，自定义迭代行为。

通过掌握可迭代协议和迭代器协议，你可以更好地理解 JavaScript 的迭代机制，并自定义可迭代对象。在接下来的学习中，我们将继续探索 JavaScript 的其他高级特性。

思考题：

1. 可迭代协议和迭代器协议的主要区别是什么？
2. 如何自定义一个可迭代对象？
3. 在什么情况下应该使用可迭代协议？