ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解


Posted in Javascript onFebruary 15, 2020

本文实例讲述了ES6 Iterator遍历器原理,应用场景及相关常用知识拓展。分享给大家供大家参考,具体如下:

介绍Iterator之前先列举下js的表示数据集合结构的几种方式:

在es6之前有 Array , Object, es6新增了 map, set,当然用户也可以组合使用这几种数据结构,灵活存储数据。

但是当数据结构变得复杂后,怎样取到里面的数据就也相对复杂,这就需要有一种读取数据的统一的接口机制,来处理不同的数据结构。

遍历器就是这样一种接口机制,Iterator是一种接口,为不同数据结构提供统一的接口机制。

相应的任何数据结构只要部署Iterator接口,就可以完成遍历操作。

Iterator的作用:

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

2,使得数据结构的成员能够按照某种次序排列;

3,ES6提供了一种新的遍历循环(for......of.....),Iterator被for......of.....循环调用;

Iterator本质:

遍历器本质上是一种指针对象,指针对象上有next()方法,第几次调用就指向第几个成员

Iterator上next()方法调用返回:

1,返回当前成员的信息

2,返回遍历是否结束

模拟实现Iterator

var it = makeIterator(['a', 'b']);
 
it.next() // { value: "a", done: false }
it.next() // { value: "b", done: false }
it.next() // { value: undefined, done: true }
 
function makeIterator(array) {
 var nextIndex = 0;
 return {
  next: function() {
   return nextIndex < array.length ?
    {value: array[nextIndex++], done: false} :
    {value: undefined, done: true};
  }
 };
}

使用Typescript

interface Iterable {
 [Symbol.iterator]() : Iterator,
}
 
interface Iterator {
 next(value?: any) : IterationResult,
}
 
interface IterationResult {
 value: any,
 done: boolean,
}

关于默认的Iterator接口:

ES6 规定,默认的 Iterator 接口部署在数据结构的Symbol.iterator属性,或者说,一个数据结构只要具有Symbol.iterator属性,就可以认为是“可遍历的”(iterable)。

Symbol.iterator的本质:

1,Symbol.iterator本身是一个函数,对应当前数据结构默认的遍历器生成函数;

2,执行Symbol.iterator这个函数会返回一个遍历器。

实例:

const obj = {
 [Symbol.iterator] : function () {
  return {
   next: function () {
    return {
     value: 1,
     done: true
    };
   }
  };
 }
};
//这样定义后对象就有了Iterator接口
//执行对象obj的symbol.iterator后,返回一个遍历器

具有原生iterator的数据结构:

Array , Map, Set, String, TypedArray, 函数的argulements对象,NodeList对象(节点对象);

数组iterator实例

let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator]();
 
iter.next() // { value: 'a', done: false }
iter.next() // { value: 'b', done: false }
iter.next() // { value: 'c', done: false }
iter.next() // { value: undefined, done: true }

对象iterator接口实现

class RangeIterator {
 constructor(start, stop) {
  this.value = start;
  this.stop = stop;
 }
 
 [Symbol.iterator]() { return this; }
 
 next() {
  var value = this.value;
  if (value < this.stop) {
   this.value++;
   return {done: false, value: value};
  }
  return {done: true, value: undefined};
 }
}
 
function range(start, stop) {
 return new RangeIterator(start, stop);
}
 
for (var value of range(0, 3)) {
 console.log(value); // 0, 1, 2
}

注意:如果一个对象没有iterator接口,而其原型链上有Iterator接口,也可以通过继承而拥有该接口;

使用while循环遍历

var $iterator = ITERABLE[Symbol.iterator]();
var $result = $iterator.next();
while (!$result.done) {
 var x = $result.value;
 // ...
 $result = $iterator.next();
}

基本概念基本就是这些,接下来看下使用场景

Iterator的使用场景:

默认调用场景:

for....of...循环, 解构赋值, 扩展运算符, yield*关键字

ES6 借鉴 C++、Java、C# 和 Python 语言,引入了for...of循环,作为遍历所有数据结构的统一的方法

这里主要介绍下yield*,其余几个都比较好理解

yield*后面跟的是一个可遍历的结构,它会调用该结构的遍历器接口

let generator = function* () {
 yield 1;
 yield* [2,3,4];//执行时默认遍历数组
 yield 5;
};
 
var iterator = generator();
 
iterator.next() // { value: 1, done: false }
iterator.next() // { value: 2, done: false }
iterator.next() // { value: 3, done: false }
iterator.next() // { value: 4, done: false }
iterator.next() // { value: 5, done: false }
iterator.next() // { value: undefined, done: true }

其他场景:

由于数组的遍历会调用遍历器接口,所以任何接受数组作为参数的场合,其实都调用了遍历器接口

  • for...of
  • Array.from()
  • Map(), Set(), WeakMap(), WeakSet()(比如new Map([['a',1],['b',2]])
  • Promise.all()
  • Promise.race()

知识拓展

遍历器对象的 return(),throw()

return方法在循环退出或者报错时调用

throw方法主要是配合 Generator 函数使用(详见generator)

计算生成的数据结构

在原有数据结构基础上计算生成的数据结构,例如Object,Map,Set,Array的entries(),keys(), value()方法生成的数据结构,默认具有iterator接口

类似数组对象

常见:字符串,NodeList节点对象,参数arguments

1,并不是所有类似数组的对象都具有 Iterator 接口

2,对于类数组对象可以通过Array.From()将类数组对象转化为数组对象

3,for-of可以识别32 位 UTF-16 字符

for (let x of 'a\uD83D\uDC0A') {
 console.log(x);
}

for-of和其他遍历方法对比:

for循环,forEach循环,for...in...循环

forEach循环无法中途跳出

for...in循环有几个缺点(for...in循环主要是为遍历对象而设计的,不适用于遍历数组),

  • 数组的键名是数字,但是for...in循环是以字符串作为键名“0”、“1”、“2”等等。
  • for...in循环不仅遍历数字键名,还会遍历手动添加的其他键,甚至包括原型链上的键。
  • 某些情况下,for...in循环会以任意顺序遍历键名。

对于for...of...

  • 有着同for...in一样的简洁语法,但是没有for...in那些缺点。
  • 不同于forEach方法,它可以与breakcontinuereturn配合使用。
  • 提供了遍历所有数据结构的统一操作接口。

参考:http://es6.ruanyifeng.com/

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
Dec 28 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
angular ng-click防止重复提交实例
Jun 16 Javascript
详解jquery选择器的原理
Aug 01 jQuery
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
vue加载完成后的回调函数方法
Sep 07 Javascript
javascript canvas实现简易时钟例子
Sep 05 Javascript
Vue通过懒加载提升页面响应速度
May 10 Vue.js
es6 super关键字的理解与应用实例分析
Feb 15 #Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 #Javascript
Vue父子传递实例讲解
Feb 14 #Javascript
Javascript操作select控件代码实例
Feb 14 #Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 #Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 #Javascript
node事件循环和process模块实例分析
Feb 14 #Javascript
You might like
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
python爬取微信公众号文章的方法
2019/02/26 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
python ftplib模块使用代码实例
2019/12/31 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
Python中如何定义一个函数
2016/09/06 面试题
金属材料工程个人求职的自我评价
2013/12/04 职场文书
教育课题研究自我鉴定范文
2013/12/28 职场文书
质量承诺书范文
2014/03/27 职场文书
爱之链教学反思
2014/04/30 职场文书
好媳妇事迹材料
2014/12/24 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
Python实战之疫苗研发情况可视化
2021/05/18 Python
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python
openstack云计算keystone组件工作介绍
2022/04/20 Servers