JavaScript的generator

prtyaa
prtyaa 2023-12-26 18:29:06 63590
分类专栏： 资讯

1、generator 是可以用来控制迭代器的函数，它主要的方法有以下三个：

  • generator.prototype.next() 返回一个由 yield 表达式生成的值
  • generator.prototype.return() 返回给定的值，并结束生成器
  • generator.prototype.throw() 向生成器抛出一个错误

2、基本使用

常规的遍历，会一次性遍历输出所有的值，但是使用了 generator 生成器，我们可以使用 next（）函数，得到每次遍历的结果，使得遍历变得可控制。如下代码，第一次通过 l.next() 得到 1，第二次得到2，第三次 for 循环遍历结束，便不再输出，返回 {value: undefined, done: true}

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

3、yield

  • yield 表达式的返回值是 undefined，但是 next() 方法可以修改这个值
function * gen () {
  let val
  val = yield 1
  console.log(`1:${val}`) // 1:undefined
  val = yield 2
  console.log(`2:${val}`) // 2:undefined
  val = yield 3
  console.log(`3:${val}`) // 3:undefined
}

var g = gen()

console.log(g.next()) // {value: 1, done: false}
console.log(g.next()) // {value: 2, done: false}
console.log(g.next()) // {value: 3, done: false}
console.log(g.next()) // {value: undefined, done: true}

4、next

  • generator 通过 next() 获取每一次遍历的结果，这个方法返回一个对象，对象包含两个属性：value 和 done
  • value 指当前程序运行的结果，done 表示程序执行是否结束
  • next() 可以接受参数，这个参数作为 yeild 的返回值
function * gen () {
  var val = 100
  while (true) {
    val = yield val
  }
}

var g = gen()
console.log(g.next(20).value) // 100
console.log(g.next(30).value) // 30
console.log(g.next(40).value) // 40

5、return

  • generator 中的 return() 方法是用来终止遍历器的
  • return() 也可以传参数作为value的值
function * gen () {
  yield 1
  yield 2
  yield 3
}

var g = gen()

console.log(g.next()) // {value: 1, done: false}
console.log(g.return(100)) // {value: 100, done: true}
console.log(g.next()) // {value: undefined, done: true}

6、throw

  • generator 中的 throw() 方法控制程序执行的中断
function * gen () {
  while (true) {
    try {
      yield 1
    } catch (e) {
      console.log(e.message)
      return false
    }
  }
}

let g = gen()
console.log(g.next()) // { value: 1, done: false }
console.log(g.next()) // { value: 1, done: false }
console.log(g.next()) // { value: 1, done: false }
// 中断操作
g.throw(new Error('error'))
console.log(g.next()) // {value: undefined, done: true}

7、使用 generator 函数注意事项

    • 比普通函数多一个 *
    • 函数内部通过 yield 来控制程序执行的“暂停”
    • 函数的返回值通过调用 next() 来恢复程序执行
    • generator 的 next() 方法，遇到 yield 就暂停，并返回一个对象，这个对象包括两个属性值 value 和 done

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=31012
赞同 0
评论 0 条

相关文章

  • javascript经典案例 2023-12-26 63569 浏览

    代码片段如下所示：结果：

  • javascript与ECMAScript有什么关系？ 2023-12-26 68565 浏览

    ECMAScript是javascript的规格，javascript是ECMAScript的一种实现，在日常场合，这两个词是可以互换的。javascript的创造者是Netscape公司，将javascript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准，后来ECMA发布文件的第一版(ECMA-262)，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。该标准从一开

  • javascript的事件委托 2023-12-26 67691 浏览

    事件处理程序过多会导致页面的整体运行性能，解决的方案就是事件委托。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例如：对li的click事件会冒泡到ul上，所以只需要将点击事件绑定在ul上即可。考虑性能问题，用完点击事件后，可以用removeEventListener解除绑定事件。注：addEventListener第三个参数，false表示在冒泡阶段调用事件处理程

  • javascript的跨域方法 2023-12-26 65330 浏览

    一、为什么会产生跨域同源策略是对XHR(XMLHttpRequest)的一个主要约束，它为通信设置了“相同的域、相同的端口、相同的协议”这一限制。试图访问上述之外的资源，都会引发安全错误，除非采用被认可的跨域解决方案。二、跨域的解决方案CORS(Cross-OriginResourceSharing,跨域资源共享)图像pingJSONPwebsockets：全双工、双向通信postMessage1

  • javascript的apply、call 和 bind 2023-12-26 68277 浏览

    1、每个函数都包含有非继承而来的方法：call()、apply()。它们的作用都是在特定的作用域中调用函数，即设置函数体内this对象的值。传递参数扩充函数赖以运行的作用域2、apply()apply()方法接收两个参数：一个是在其中运行函数的作用域，另一个是参数数组。其中第二个参数可以是Array的实例，也可以是arguments对象。例如：在这个例子中，callSum1()执行sum()函数时

  • javascript 浮点数值：0.1 + 0.2 不等于 0.3 2023-12-26 66819 浏览

    1、浮点数值所谓浮点数值，就是该数值中必须包含一个小数点，并且小数点后面必须至少有一位数字。例如：constfloatNum=0.1;2、浮点数值的保存保存浮点数值需要的内存空间是保存整数值的2倍，因此ECMAScript会不失时机的将浮点数值转换为整数值。例如：constfloatNum1=1.;//小数点后面没有数字，解析为1constfloatNum2=1.0;//整数——解析为13、e/E

  • 需要开通VIP以后页面内容才能复制怎么办？控制台禁用javascript即可 2023-12-26 67027 浏览

    问题描述有些网页上的内容我们不能直接复制，如果想要复制的话，就要充钱成为VIP以后，才能复制，比如“某某文库”...那么本文记录一下解决方案的步骤...图示如下：仰望vip大佬...解决方案如下：第一步，打开控制台，点击右上角的小齿轮图标按钮首先F12打开控制台或右击-->检查打开控制台第二步，禁用javascript即可然后就可以了复制了，不会受到任何阻碍...总结打开控制台-->点击右上角小齿

  • javascript 杂项 闭包 内存泄漏 内存溢出 2023-12-26 64697 浏览

    一、闭包：如下就是一个闭包程序：counter里面函数add调用外部变量，此时就会产生闭包。functioncounter(){varcounter=0;functionadd(){return"当前的人数："+(++counter);}returnadd;}varlogin_counter=counter();//闭包导致add()会留在内存login_counter指向add方法，内存回收只能

  • javascript 中的call apply bind 2023-12-26 64181 浏览

    javascript中的callapplybind均可用来对象的上下文对象this例子：varobj1={name:'louis',gender:"male"};varobj2={name:'rita',gender:"female",getName:function(age){console.log(this.name+";"+age+";"+this.gender);}}obj2.getNam

  • javascript 添加包含事件的元素的方法 2023-12-26 63110 浏览

    <em class="color_r">javascript</em>鼠标事件偏移量的研究

    • 关注我们

      信创开放社区公众号二维码

      扫一扫关注公众号

      信创开放社区交流群

      添加我为好友，拉您入交流群！

    添加我为好友，拉您入交流群！

    请使用微信扫一扫!