实例分析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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
比较详细的关于javascript 解析json的代码
Dec 16 Javascript
javascript基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 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
第十五节--Zend引擎的发展
2006/11/16 PHP
快速配置PHPMyAdmin方法
2008/06/05 PHP
php面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
Prototype Date对象 学习
2009/07/12 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
Python中循环引用(import)失败的解决方法
2018/04/22 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
python numpy 反转 reverse示例
2019/12/04 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
智能室内花园:Click & Grow
2021/01/29 全球购物
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
中标通知书范本
2015/04/17 职场文书
导游词之西递宏村
2019/12/10 职场文书
react antd实现动态增减表单
2021/06/03 Javascript
redis 存储对象的方法对比分析
2021/08/02 Redis
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle