实例分析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 相关文章推荐
JavaScript 获得选中文本内容的方法
Feb 15 Javascript
event.X和event.clientX的区别分析
Oct 06 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
Oct 23 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
jquery分割字符串的方法
Jun 24 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
three.js快速入门【推荐】
Jan 21 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
May 03 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
浅谈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
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
php 带逗号千位符数字的处理方法
2012/01/10 PHP
php中simplexml_load_file函数用法实例
2014/11/12 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
JS 建立对象的方法
2007/04/21 Javascript
jQuery 使用手册(七)
2009/09/23 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
JS面向对象编程之对象使用分析
2010/08/19 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
QUnit jQuery的TDD框架
2010/11/04 Javascript
一个javascript图片阅览组件
2010/11/09 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
Python 实现随机数详解及实例代码
2017/04/15 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
深入了解NumPy 高级索引
2020/07/24 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
哪些情况下不应该使用索引
2015/07/20 面试题
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
学生会招新策划书
2014/02/14 职场文书
材料会计岗位职责
2014/03/06 职场文书
文化产业实施方案
2014/06/07 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
JavaScript实现登录窗体
2021/06/22 Javascript