手机版

Array.from(arr)和[.[arr]

时间:2021-08-26 来源:互联网 编辑:宝哥软件园 浏览:

写在开头:

在正文开始之前,我们先解释一下类数组(估计大家都会熟悉)

类数组的特征

1.有一个索引

2.有长度

3.它是一个物体

4.可以迭代

特性描述:我就不解释类数组的前三个特性了,最后一个。你需要迭代什么?从图中我们可以看到,有一个[Symbol.iterator]属性指向这个对象的默认迭代器方法。那么是如何实现的呢?

迭代器

角色(参考阮一峰老师ES6)

1.为各种数据结构提供统一而简单的访问接口

2.使数据结构的成员按一定的顺序排序

3.为了为了.循环消费

操作原理

1.创建一个指针对象,指向当前数据结构的起始位置(并有一个next方法)

2.第一次调用对象的下一个方法时,可以将指针指向数据结构的第一个成员

3.第二次调用对象的下一个方法可以将指针指向数据结构的第二个成员

4.继续调用对象的下一个方法,直到它指向数据结构的末尾

注意:每次调用下一个方法时,都会返回一个包含两个属性的对象:value和done。前者表示当前指针指向的数据结构成员的值,后者表示迭代是否结束

说明

//首先,我们创建一个要迭代的对象,让obj={0:' gu ',1:' Yan ',2:' No.1 ',长度:3 };console.log([.);//错误unsughttypeerror : obj不可重复console.log(数组。from(obj));//['顾','严','一号']//接下来,我们添加一个迭代器obj[符号。迭代器]=function(){ let index=0;让自我=这个;return { next(){ return { value : self[index],done : index===self . length } } } console . log([.)//['古','燕','一号']控制台.日志(array . from(obj));//['顾','颜','一号']通过上面的例子,相信你一定能明白文章前题的答案

虽然我们可以手动编写迭代器函数,但是你不觉得很麻烦吗,所以我们还有一个知识点,那就是生成器生成器

发电机

生成器返回一个迭代器,该迭代器有一个next方法,调用next返回值并完成

函数*古言(){ }控制台.日志(古言())//对象[生成器]{ }控制台.日志(古言()。下一个)//[功能:下一个]控制台. loh(古言()。next()) //{ value: undefined,done : true }

生成器与yield一起使用,如果遇到yield,将暂停执行

函数*古言(){收益率1,收益率2,收益率3 }让它=古言();console . log(it . next())//{ value : 1,done: false }console.log(it . next())/{ value : 2,done : false } console . log(it。next ())//{value: 3,done3360 false} console.log (it。next ())//{value: undefined,done3360 true}通过生成器向obj添加迭代器

符号。iterator]=function *(1){//每次浏览器调用下一个方法时,yield的结果都取值let index=0;while(索引!==this.length){让出这个[index ] }}console.log([.)//['古','燕','一号']控制台.日志(array . from(obj));//['gu ',' Yan ',' no . 1 ']gener taur函数执行顺序分析(附图片)

函数*古言(){让a=yield 1;console.log('a ',a);设b=产量2;console.log('b ',b);设c=产量3;console.log('c ',c);}让它=古言();//第一次调用它. next()it.next() //什么都不输出//第二次调用它. next() //a undefined /*如果我们调用*/it.next(100) //a 100//第三次调用它. next (200),

当生成器函数遇到承诺处理异步串行时

该代码示例使用节点的fs模块来模拟异步

//实现前提同级目录下创建name.txt age.txt文件;name.txt中存储age.txt,age.txt中存储20个字母fs=require(' mz/fs ');//我们直接使用莫桑比克包来实现满量程的承诺化let path=require(' path ');函数*古言(){让名=收益率fs。readfile(路径。解析(_ _ dirname,' ./name.txt '),' utf-8 ');名称=产量。/'名称;让年龄=产量fs。readfile(路径。解析(_ dirname,name),' utf-8 ');返回年龄;}让它=古言();让{ value }=it。next();value .然后(数据={ let { value }=it.next(数据);承诺。决心(价值)。然后(数据={ let { value }=it.next(数据)值。然后(数据={ let { value }=it.next(数据);console.log(值)//20 }) })})对上述代码调用进行封装(实现总裁库)

让fs=require(' mz/fs ');let path=require(' path ');函数*古言(){让名=收益率fs。readfile(路径。解析(_ _ dirname,' ./name.txt '),' utf-8 ');名称=产量。/'名称;让年龄=产量fs。readfile(路径。解析(_ dirname,name),' utf-8 ');返回年龄;}功能公司(it){返回新的承诺(解析,拒绝)={ function next(val){ let {value,done }=it。下一个(val);如果(完成){返回解析(值);}承诺。解决(价值)。然后(数据={ next(data)})} next();)}co(古言())。然后(数据={ console.log(数据);//20})通过异步等待来简化

//上述代码可以简化为让fs=require(' mz/fs ');let path=require(' path ');异步函数古言(){ let name=wait fs。readfile(路径。解析(_ _ dirname,' ./name.txt '),' utf-8 ');名称='。/'名称;让年龄=等待fs。readfile(路径。解析(_ dirname,name),' utf-8 ');返回年龄;}//异步函数执行后返回一个承诺/可以使用试着接住,但如果使用试着接住返回的就是真古言()。然后(数据={ console.log(数据);})处理方案比较

1 .回调多个请求并发不好管理链式调用导致回调嵌套过多

2 .承诺优点可以优雅的处理异步处理错误,基于回调的,还是会有嵌套问题

发电机公司让代码像同步(比如dva)不能支持试着接住

4 .异步等待可以是异步像同步一样处理,返回一个承诺支持试着接住

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持。

版权声明:Array.from(arr)和[.[arr]是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。