实例分析Array.from(arr)与[...arr]到底有何不同


Posted in Javascript onApril 09, 2019

写在开头:

在正文开始之前我们先说明一下类数组(估计大家一定不会陌生)

类数组的特点

1.有索引

2.有长度

3.是个对象

4.能被迭代

实例分析Array.from(arr)与[...arr]到底有何不同

特点说明:对于类数组的特点前三个我就不做说明了哈,主要就是最后一个,能被迭代需要具备什么呢?由图我们可以看出有一个[Symbol.iterator]属性指向该对象的默认迭代器方法。那么它又是如何实现的呢?

迭代器(iterator)

作用(参考阮一峰老师的ES6)

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

2.使数据结构的成员能按照某种次序排序

3.供for...of循环消费

工作原理

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

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

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

4.不断调用对象的next方法直到他指向数据结构的结束为止

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

举例说明

// 首先我们先创建一个待迭代的对象
let obj = {0:'Gu',1:'Yan',2:'No.1',length:3};
console.log([...obj]);// 报错 Uncaught TypeError: obj is not iterable
console.log(Array.from(obj));// ["Gu", "Yan", "No.1"]
// 接下来我们给待迭代对象添加一个迭代器
obj[Symbol.iterator] = function(){
 let index = 0;
 let self = this;
 return {
 next(){
  return {value:self[index],done:index++ === self.length}
 }
 }
}
console.log([...obj]) // ["Gu", "Yan", "No.1"]
console.log(Array.from(obj));// ["Gu", "Yan", "No.1"]

通过上面的例子我相信文章前的你肯定可以懂得标题的答案了吧

虽然我们可以手动写出迭代器函数但是你不觉得很麻烦吗,所以又到了我们的另外一个知识点那就是generator生成器

generator 生成器

生成器返回的是迭代器,迭代器有next方法,调用next返回value和done

function* guYan(){
 
}
console.log(guYan()) // Object [Generator] {}
console.log(guYan().next) // [Function: next]
console.loh(guYan().next()) // { value: undefined, done: true }

实例分析Array.from(arr)与[...arr]到底有何不同

生成器配合yield来使用如果碰到yield会暂停执行

function* guYan(){
 yield 1,
 yield 2,
 yield 3
}
let it = guYan();
console.log(it.next()) // { value: 1, done: false }
console.log(it.next()) // { value: 2, done: false }
console.log(it.next()) // { value: 3, done: false }
console.log(it.next()) // { value: undefined, done: true }

通过生成器给obj增加迭代器

obj[Symbol.iterator] = function* (){
 // 每次浏览器都会不停的调用next方法 把yield的结果作为值
 let index = 0;
 while(index !== this.length){
 yield this[index++]
 }
}
console.log([...obj]) // ["Gu", "Yan", "No.1"]
console.log(Array.from(obj));// ["Gu", "Yan", "No.1"]

generatour 函数的执行顺序分析(配合图片)

function* guYan(){
 let a = yield 1;
 console.log('a',a);
 let b = yield 2;
 console.log('b',b);
 let c = yield 3;
 console.log('c',c);
}
let it = guYan();
//第一次调用it.next()
it.next() // 什么都没有输出
// 第二次调用
it.next() // a undefined 
/*如果我们第二次是传入参数调用*/
it.next(100) // a 100
// 第三次调用
it.next(200) // b 200
// 第四次调用 
it.next(300) // c 300

实例分析Array.from(arr)与[...arr]到底有何不同

当generator函数遇到Promise来处理异步串行

代码示例采用node的fs模块来模拟异步

// 实现前提 同级目录下创建name.txt age.txt 文件;name.txt中存储age.txt,age.txt中存储20
let fs = require('mz/fs');//我们直接使用mz包来实现fs的promise化
let path = require('path');
function* guYan() {
 let name = yield fs.readFile(path.resolve(__dirname, './name.txt'), 'utf-8');
 name = yield './' + name;
 let age = yield fs.readFile(path.resolve(__dirname, name), 'utf-8');
 return age;
}
let it = guYan();
let { value } = it.next();
value.then(data => {
 let { value } = it.next(data);
 Promise.resolve(value).then(data => {
  let { value } = it.next(data)
  value.then(data => {
   let { value } = it.next(data);
   console.log(value) // 20
  })
 })
})

对上述代码调用进行封装(实现co库)

let fs = require('mz/fs');
let path = require('path');
function* guYan() {
 let name = yield fs.readFile(path.resolve(__dirname, './name.txt'), 'utf-8');
 name = yield './' + name;
 let age = yield fs.readFile(path.resolve(__dirname, name), 'utf-8');
 return age;
}
function co(it){
 return new Promise((resolve,reject)=>{
  function next(val){
   let {value , done} = it.next(val);
   if(done){
    return resolve(value);
   }
   Promise.resolve(value).then(data=>{
    next(data)
   })
  }
  next();
 })
}
co(guYan()).then(data=>{
 console.log(data); // 20
})

通过async+await 来简化

// 上述代码可以简化为
let fs = require('mz/fs');
let path = require('path');
async function guYan() {
 let name = await fs.readFile(path.resolve(__dirname, './name.txt'), 'utf-8');
 name = './' + name;
 let age = await fs.readFile(path.resolve(__dirname, name), 'utf-8');
 return age;
}
// async 函数执行后返回一个promise
// 可以使用try + catch ,但如果使用try + catch 返回的就是真
guYan().then(data=>{
 console.log(data);
})

处理方案比较

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

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

3.generator + co 让代码像同步(比如dva)不能支持try catch

4.async + await 可以是异步像同步一样处理,返回一个promise 支持try catch

总结

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

Javascript 相关文章推荐
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
Mar 04 Javascript
jQuery+Ajax实现无刷新操作
Jan 04 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 Javascript
浅谈Vue.js组件(二)
Apr 09 #Javascript
4 种滚动吸顶实现方式的比较
Apr 09 #Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 #Javascript
浅谈发布订阅模式与观察者模式
Apr 09 #Javascript
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 #Javascript
浅谈JavaScript闭包
Apr 09 #Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
Apr 09 #Javascript
You might like
2020最新CPU的性能排名
2020/04/02 数码科技
小偷PHP+Html+缓存
2006/11/25 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
详解js中==与===的区别
2017/01/08 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
详解vue项目中如何引入全局sass/less变量、function、mixin
2018/06/02 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
详解Python locals()的陷阱
2019/03/26 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
python中pdb模块实例用法
2021/01/15 Python
企业军训感想
2014/02/07 职场文书
2014年乡镇植树节活动方案
2014/02/28 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
教师岗位说明书
2015/09/30 职场文书
护理工作心得体会
2016/01/22 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB