es6 generator 让遍历停下来

一. 普通的循环一次性全部执行完，停不下来

function loop () {
  for (let i = 0; i < 5; i++) {
    console.log(i)
  }
}

loop()

二. generator

2.1 基础用法：

例1：

function * loop () {
  for (let i = 0; i < 5; i++) {
    yield console.log(i)
  }
}

const l = loop()

l.next()
l.next()
l.next()
l.next()
l.next()
l.next()
l.next()

例2：

function * gen () {
  let val
  val = yield * [1, 2, 3]
  console.log(val)
}

const l = gen()
console.log(l)
console.log(l.next()) // {value: 1, done: false}
console.log(l.next()) // {value: 2, done: false}

说明：

1. generator是一个函数，但是比普通函数多一个星号。
2. 在generator函数内部，要想让程序停下里需要加yield关键字。
3. yield后面如果是可迭代对象，在yield后面还需要添加一个星号。
4. 用next()来恢复执行 ，并且返回一个对象，这个对象里value表示当前返回的结果，done表示当前是否执行结束。
5. yield没有返回值。

2.2 高级用法

2.2.1 next()传参

function * gen () {
  let val
  val = (yield [1, 2, 3]) + 7
  console.log(val)
}

const l = gen()
console.log(l.next(10))
console.log(l.next(20)

2.2.2 return 提前结束

function * gen () {
  let val
  val = (yield [1, 2, 3]) + 7
  console.log(val)
}

const l = gen()
console.log(l.next(10))
console.log(l.return(100))
console.log(l.next(20))

2.2.3 抛出异常

function * gen () {
  while (true) {
    try {
      yield 1
    } catch (e) {
      console.log(e.message)
    }
  }
}

const g = gen()
console.log(g.next())
console.log(g.next())
console.log(g.next())
console.log(g.next())
g.throw(new Error('ss'))
console.log(g.next())

三. 使用场景

3.1 模拟抽奖，抽奖要一次抽取一个结果，不能一下子结果全出来

结果一下子全出来情况，体验不好

function draw (first = 1, second = 3, third = 5) {
  let firstPrize = ['1A', '1B', '1C', '1D', '1E']
  let secondPrize = ['2A', '2B', '2C', '2D', '2E', '2F', '2G', '2H', '2I']
  let thirdPrize = ['3A', '3B', '3C', '3D', '3E', '3F', '3G', '3K', '3O', '3P']
  let result = []
  let random
  // 抽一等奖
  for (let i = 0; i < first; i++) {
    random = Math.floor(Math.random() * firstPrize.length)
    result = result.concat(firstPrize.splice(random, 1))
  }
  // 抽二等奖
  for (let i = 0; i < second; i++) {
    random = Math.floor(Math.random() * secondPrize.length)
    result = result.concat(secondPrize.splice(random, 1))
  }
  // 抽三等奖
  for (let i = 0; i < third; i++) {
    random = Math.floor(Math.random() * thirdPrize.length)
    result = result.concat(thirdPrize.splice(random, 1))
  }
  return result
}

let t = draw()
for (let value of t) {
  console.log(value)
}

generator实现

function * draw (first = 1, second = 3, third = 5) {
  let firstPrize = ['1A', '1B', '1C', '1D', '1E']
  let secondPrize = ['2A', '2B', '2C', '2D', '2E', '2F', '2G', '2H', '2I']
  let thirdPrize = ['3A', '3B', '3C', '3D', '3E', '3F', '3G', '3K', '3O', '3P']
  let count = 0
  let random

  while (1) {
    if (count < first) {
      random = Math.floor(Math.random() * firstPrize.length)
      yield firstPrize[random]
      count++
      firstPrize.splice(random, 1)
    } else if (count < first + second) {
      random = Math.floor(Math.random() * secondPrize.length)
      yield secondPrize[random]
      count++
      secondPrize.splice(random, 1)
    } else if (count < first + second + third) {
      random = Math.floor(Math.random() * thirdPrize.length)
      yield thirdPrize[random]
      count++
      thirdPrize.splice(random, 1)
    } else {
      return false
    }
  }
}

let d = draw()
console.log(d.next().value)
console.log(d.next().value)
console.log(d.next().value)
console.log(d.next().value)
console.log(d.next().value)
console.log(d.next().value)
console.log(d.next().value)
console.log(d.next().value)
console.log(d.next().value)
console.log(d.next().value)

3.2 找倍数

function * count (x = 1) {
  while (1) {
    if (x % 3 === 0) {
      yield x
    }
    x++
  }
}

let num = count()
console.log(num.next().value)
console.log(num.next().value)
console.log(num.next().value)
console.log(num.next().value)
console.log(num.next().value)
console.log(num.next().value)
console.log(num.next().value)
console.log(num.next().value)
console.log(num.next().value)

generator再次理解

generator有生成无限大数的能力，但是不是一下子生成，而是通过yield来暂停，通过next来继续。如果用普通的循环，不可能生成无限数，因为必须要指定一个最大值。

如何获取generator生成的数据？有两种方式：

1. 通过生成器对象的next()来一个一个获取。
2. 通过for of 来一次性获取

注意：函数通过return让generator提前结束，for of 循环通过break让循环提前结束。

例如：

function* geneartor() {
    yield 1;
    yield 2;
    yield 3;
}
// for (const i of geneartor()) {
//     console.log(i);
// } // 1 2 3
let gen = geneartor();
console.log(gen);
console.log(gen.next().value) // 1