ES2015中IterableIterator是什么？Symbol.iterator实现相关疑问

基础定义逻辑 #

你看到的接口定义不存在递归问题，IterableIterator的设计目的是让迭代器本身同时符合JavaScript的两个核心迭代协议：

• 可迭代协议：要求对象实现[Symbol.iterator]方法，调用后返回一个迭代器实例
• 迭代器协议：要求对象实现next方法，调用后返回包含done（布尔标识迭代是否结束）和value（当前迭代返回值）的结构

[Symbol.iterator]的实现逻辑 #

这个方法不需要复杂实现，直接返回当前实例本身即可，示例代码如下：

class CustomArrayIterator<T> implements IterableIterator<T> {
  private cursor = 0;
  constructor(private targetArray: T[]) {}

  // 迭代器协议要求的next方法
  next(): IteratorResult<T> {
    if (this.cursor < this.targetArray.length) {
      return {
        done: false,
        value: this.targetArray[this.cursor++]
      }
    }
    return {
      done: true,
      value: undefined
    }
  }

  // 可迭代协议要求的Symbol.iterator方法
  [Symbol.iterator](): IterableIterator<T> {
    // 直接返回自身即可
    return this
  }
}

设计用途 #

这种设计的好处是迭代器本身可以直接用于所有要求可迭代对象的语法场景，不需要额外封装：

• 直接用于for...of循环
• 直接使用展开运算符...转成普通数组
• 直接用于数组解构赋值
• 可以直接传入Array.from等内置方法

使用示例：

const iterator = new CustomArrayIterator([1, 2, 3])
// for of 遍历
for (const item of iterator) {
  console.log(item) // 依次输出 1、2、3
}
// 直接展开
console.log([...new CustomArrayIterator([4, 5, 6])]) // 输出 [4,5,6]

内容的提问来源于stack exchange，提问作者melatonin