IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> javascript 生成器函数 function* -> 正文阅读

[JavaScript知识库]javascript 生成器函数 function*

今天看了一下这块的东西,文档不是很好理解。但是完完整整看下来,文档还是很全的。

这里算是总结一下在看生涩的文档之前可以了解的东西,方便看文档的时候好理解。

1,什么是生成器函数(function*)

生成器函数简单理解就是这个函数返回一个可枚举的对象(官方说法返回Generator??对象)。可以通过.next()枚举其中的数据。内部通过yield关键字实现步进。

2,为什么要有一个生成器函数(function*)这种特殊的语法,

C#也有yield,但是并没有特殊的语法。下面链接是es委员会一员的回答。https://stackoverflow.com/questions/27778105/whats-the-purpose-of-an-asterisk-in-es6-generator-functions/27787527

说实话,第二条没在看懂。就感觉是弱类型语言的毛病。

3,看迭代器和生成器这部分是看到,“传给第一个?next()?的值会被忽略”,为什么。

其实生成器函数文档中已经有说明,“调用?next()方法时,如果传入了参数,那么这个参数会传给上一条执行的 yield语句左边的变量”。下面我们通过一段代码理解一下。

function* countAppleSales () {
  console.log("生成器函数第一行代码");
  var saleList = [0,1,2,3,4,5];
  for (var i = 0; i < saleList.length; i++) {
    var re =  yield saleList[i];
    console.log(`re:${re}`)
    if(re===true){ 
      i=4;
    }
  }
}


var appleStore = countAppleSales(); // 调用生成器函数不执行任何代码,而是返回迭代器。
console.log("开始调用");
console.log(appleStore.next(false)); //第一次next(),从生成器函数第一行代码开始执行,执行到第一次遇到 yield,返回 { value: 0, done: false }.
//此时传入的参数(false)没机会给“yield左边的变量”re赋值.
console.log("------------------");//分割线
console.log(appleStore.next(true)); //第二次next(),从上一次yield截断处继续执行,直到再次遇到yield。
//执行代码如下
//1,先给“yield左边的变量”re赋值,值为next()的参数,这里为true。执行打印“re:true”。后面i赋值为4,下一次循环i++,此时i为5。再次走到yield 返回{ value: 5, done: false }。


下面是最终的执行结果

开始调用
生成器函数第一行代码
{ value: 0, done: false }
------------------
re:true
{ value: 5, done: false }

看完这些再看文档,特别是翻译的中文文档应该会好点,希望对你有所帮助。

下面说一个使用场景,也是看到这里才学生成器函数的。

https://es6.ruanyifeng.com/#docs/array#%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6%E7%9A%84%E5%BA%94%E7%94%A8? 直接看第五部分。

Number.prototype[Symbol.iterator] = function*() {
  let i = 0;
  let num = this.valueOf();
  while (i < num) {
    yield i++;
  }
}

console.log([...5]) // [0, 1, 2, 3, 4]
上面代码中,先定义了Number对象的遍历器接口,扩展运算符将5自动转成Number实例以后,就会调用这个接口,就会返回自定义的结果。

给自定义对象加枚举器

let arrayLike = { 
  arr:[0,1,2,3]
};

arrayLike[Symbol.iterator] = function*() {
  let num = this.valueOf();
  // num.arr.forEach(element => {
  //   yield element;//报错。forEach里面是传了一个函数进去,所以yield语句实际上在一个不是生成器的函数里面,所以报错。
  // });

  for(let item of num.arr){
    yield item;
  }
 
}


console.log([...arrayLike]);

  JavaScript知识库 最新文章
使用node.js设置本地api接口
【Vue】npm run serve 和 npm run dev 有什
Vue美食杰项目实现个人编辑资料效果
分享在写js代码时容易遇到的,需要注意的问
js中的两种作用域
layui学习之路——删除数据表格记录
登录页【利用token登录状态保存】
Html+css+JavaScript做一个随机点名器
JavaScript中什么是原型什么又是原型链?
node js BigInt问题
上一篇文章      下一篇文章      查看所有文章
加:2021-07-17 11:49:36  更:2021-07-17 11:51:46 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
360图书馆 购物 三丰科技 阅读网 日历 万年历 2021年9日历 -2021/9/27 3:25:07-
图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码