zoukankan      html  css  js  c++  java
  • JS Generator yield

    function show() {
        console.log('a')
        console.log('b')
    }
    show() // 普通函数
    
    function *show2() {
        console.log('1')
        yield
        console.log('2')
    }
    let genObj = show2() //返回的是指针对象
    genObj.next() // 1
    genObj.next() // 2
    genObj.next()
    

      

    需要调用next()方法启动执行,需要遇到 yield 停

    generator函数前面加一个 * 两边可以有空格,或靠近函数或function

    如果函数前漏掉 *

    • 就是普通函数
    • 如果有yield会报错, ReferenceError: yield is not defined
    • yield 只能在Generator函数内部使用

    yield

    • 既可传参,又可以返回
    • 第一个next()传参无效,只用来启动

    给yield穿参数

    function * show() {
        console.log('1')
        var a = yield
        console.log('2')
        console.log(a)
    }
    
    var gen = show()
    gen.next() // 1
    gen.next() // 2 和 undefined
    
    var gen = show()
    gen.next(10) // 1
    gen.next(20) // 2 和 20 

    如果要给第一个yield前的语句传参,可以把参数加在函数里,但是这个参数是整个生成器共享,即第二个yield也可以拿到

    function * show(p) {
        console.log('1')
    	console.log(p)
        var a = yield
        console.log('2')
        console.log(a)
    	console.log(p)
    }
    
    var gen = show(10)
    gen.next() 		// 1 和 10
    gen.next(20) 	     // 2 和 20 10
    

      

    利用yield返回值 

    // yield 返回
    function * show() {
        console.log('1')
        yield 10
        console.log('2')
    }
    
    var gen = show()
    var res1 = gen.next()
    console.log(res1) // { value: 10, done: false }
    var res2 = gen.next()
    console.log(res2) // { value: undefined, done: true }

     

    如果要给最后一个yield执行后返回值,可以利用return

    function * show() {
        console.log('1')
        yield 10
        console.log('2')
        return 20
    }
    // yield 返回
    var gen = show()
    var res1 = gen.next()
    console.log(res1) // { value: 10, done: false }
    var res2 = gen.next()
    console.log(res2) // { value: 20, done: true }
    

      

  • 相关阅读:
    7、JavaScript总结——实现选项卡切换的效果
    6、JavaScript进阶篇③——浏览器对象、Dom对象
    5、JavaScript进阶篇②——函数、事件、内置对象
    4、JavaScript进阶篇①——基础语法
    3、DOM操作
    2、JavaScript常用互动方法
    1、JavaScript入门篇
    HTML5与CSS3网页设计
    JAVA程序设计
    Elasticsearch搭建问题汇总
  • 原文地址:https://www.cnblogs.com/413xiaol/p/11129240.html
Copyright © 2011-2022 走看看