Iterator、Generator

概念

迭代器是一种设计模式，提供了一种顺序访问集合或容器中元素的方法，无需暴露集合的内部结构，for 循环并不是迭代器模式 ，forEach 是最简易的迭代器。

---

理解

• 以下函数实现了 next 方法，调用该方法返回集合中的下一个元素
• value 表示当前迭代到的元素值
• done 表示迭代是否已经结束

const makeIterator = (arr = []) => {
  let nextIndex = 0
  return {
    next() {
      if (nextIndex < arr.length) {
        return { value: arr[nextIndex++], done: false }
      } else {
        return { value: undefined, done: true }
      }
    }
  }
}

let it = makeIterator([10, 20])
console.log(it.next()) // {value: 10, done: false}
console.log(it.next()) // {value: 20, done: false}
console.log(it.next()) // {value: undefined, done: true}

---

Symbol.iterator

• 可迭代协议：它是一个内置符号，用于定义一个对象的默认迭代器，提供 next 方法用于生成序列中的值；
• 所有的 有序结构 内置 Symbol.iterator 且均可使用 for...of 、解构、扩展操作符、Array.from等；
• 常见有序结构：Array、String、元组（Tuple）、链表、集合（Set）、字典（Map）、arguments、NodeList

const arr = new Array(10, 20)
const iterator = arr[Symbol.iterator]()
console.log(iterator.next()) // {value: 10, done: false}
console.log(iterator.next()) // {value: 20, done: false}
console.log(iterator.next()) // {value: undefined, done: true}

实现原理：

interface IteratorReturn {
  value: number
  done: boolean
}
class DataIterator {
  private data: any[]
  private index = 0 // 当前下标
  constructor(container: myArray) {
    this.data = container.data
  }
  next(): IteratorReturn | null {
    if (this.hasNext()) {
      return {
        value: this.data[this.index++],
        done: !this.hasNext()
      }
    }
    return null
  }
  hasNext(): boolean {
    if (this.index > this.data.length) return false
    return true
  }
}

class myArray {
  data = [10, 20, 30] // 假设这个一个数组的构造函数
  'Symbol.iterator'() {
    return new DataIterator(this) // 获取迭代器
  }
}

const itArr = new myArray()
const iterator = itArr['Symbol.iterator']() // 获取迭代器
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())

---

不可迭代协议

非有序结构可以使用 Symbol.iterator 创建一个可迭代对象，不同结构设计不同的算法

let obj = {
  key1: [1, 2],
  key2: [5, 6],
  key3: [9, 10]
}
obj[Symbol.iterator] = function () {
  const self = this
  let keys = Reflect.ownKeys(self)
  let values = []
  return {
    next() {
      if (!values.length) {
        if (keys.length) {
          values = self[keys[0]] // 从 frontend 开始获取
          keys.shift() // 依此删除 key
        }
      }
      return {
        done: !values.length, // 取完后则为 true
        value: values.length ? values.shift() : undefined // 返回删除的结果
      }
    }
  }
}

let itObj = obj[Symbol.iterator]()
console.log(itObj.next())

---

Generator、yield

• 一种特殊的函数，它可以在迭代过程中暂停和恢复执行；
• 生成器函数使用 function* 关键字进行声明；
• 生成器函数通过使用 yield 关键字来定义要生成的值；
• 每一次 next 的执行到 yield 停止，并返回当前 yield 之后对应的值
• next() 可以传参，即上一个 yield 的值

function* foo() {
  for (let i = 0; i < 3; i++) {
    yield i
  }
}
let f = foo()
console.log(f.next()) // {value: 0, done: false}
console.log(f.next()) // {value: 1, done: false}
console.log(f.next()) // {value: 2, done: false}
console.log(f.next()) // {value: undefined, done: true}

function* count(x = 1) {
  while (true) {
    if (x % 7 === 0) {
      yield x
    }
    x++
  }
}
let n = count()
console.log(n.next()) // {value: 7, done: false}
console.log(n.next()) // {value: 14, done: false}

---

yield*

• yield* 是 TS 中的一个关键字，作用是将控制权从一个生成器转移给另一个生成器或可迭代对象 ；
• yield* 之后必须是有序结构的数据，即实现了 Symbol.Iterator ；

const gener = [10, 20, 30]
function* foo() {
	yield* gener // 相当于 yield 10 yield 20 yield 30
}