（基础）JavaScript生成器，执行，传递参数

80 阅读 0 评论 53 点赞

我是靠谱客的博主紧张雨，这篇文章主要介绍（基础）JavaScript生成器，执行，传递参数，现在分享给大家，希望可以做个参考。

生成器：生成器是ES6中新增的一种函数控制、使用的方案，它可以让我们更加灵活的控制函数什么时候继续执行、暂停执行等。

首先，生成器函数需要在function的后面加一个符号：*

其次，生成器函数可以通过yield关键字来控制函数的执行流程：

最后，生成器函数的返回值是一个Generator（生成器）：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function* foo() {
  console.log("函数开始执行~")
  const value1 = 100
  console.log("第一段代码:", value1)
  yield
  const value2 = 200
  console.log("第二段代码:", value2)
  yield
  const value3 = 300
  console.log("第三段代码:", value3)
  yield
  console.log("函数执行结束~")
}

// 调用生成器函数时, 会给我们返回一个生成器对象
const generator = foo()
// 函数开始执行~
// 第一段代码: 100
generator.next()
// 第二段代码: 200
generator.next()
// 第三段代码: 300
generator.next()
// 函数执行结束~
generator.next()

生成器函数传递参数

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function* foo(num) {               //接受num参数5
  console.log("函数开始执行~")

  const value1 = 100 * num
  console.log("第一段代码:", value1)
  const n = yield value1            //接受n参数  10

  const value2 = 200 * n
  console.log("第二段代码:", value2)
  const count = yield value2       //接受count参数  25

  const value3 = 300 * count
  console.log("第三段代码:", value3)
  yield value3

  console.log("函数执行结束~")
  return "123"
}

// 生成器上的next方法可以传递参数
const generator = foo(5)       //第一个参数直接传递  
// 函数开始执行~
// 第一段代码: 500   并传递参数10  const n = yield value1   
console.log(generator.next(10))    // { value: 500, done: false }

// 第二段代码: 5000    并传递参数20  const count = yield value2 
console.log(generator.next(25))   // { value: 5000, done: false }

终止执行生成器

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
function* foo(num) {
  console.log("函数开始执行~")

  const value1 = 100 * num
  console.log("第一段代码:", value1)
  const n = yield value1

  const value2 = 200 * n
  console.log("第二段代码:", value2)
  const count = yield value2

  const value3 = 300 * count
  console.log("第三段代码:", value3)
  yield value3

  console.log("函数执行结束~")
  return "123"
}

const generator = foo(10)

console.log(generator.next())

// 第二段代码的执行, 使用了return
// 那么就意味着相当于在第一段代码的后面加上return, 就会提前终端生成器函数代码继续执行
console.log(generator.return(15))
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())
console.log(generator.next())

// 函数开始执行~
// 第一段代码: 1000
// { value: 1000, done: false }    
// { value: 15, done: true }       
// { value: undefined, done: true }
// { value: undefined, done: true }
// { value: undefined, done: true }
// { value: undefined, done: true }
// { value: undefined, done: true }
// { value: undefined, done: true }

生成器抛出异常

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function* foo() {
  console.log("代码开始执行~")

  const value1 = 100
  try {
    yield value1
  } catch (error) {
    // 捕获异常才可以继续执行，没有捕获不可以执行后面代码
    console.log("捕获到异常情况:", error)
  }

  console.log("第二段代码继续执行")
  const value2 = 200
  yield value2

  console.log("代码执行结束~")
}
const generator = foo()
generator.next()
generator.throw("error message")     //第2段代码抛出异常，捕获异常才可以继续执行，没有捕获不可以执行后面代码

// 代码开始执行~
// 捕获到异常情况: error message
// 第二段代码继续执行