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 相关文章推荐
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
js转html实体的方法
Sep 27 Javascript
详解js的事件代理(委托)
Dec 22 Javascript
AngularJS实现的base64编码与解码功能示例
May 17 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
详解Bootstrap 学习(一)入门
Apr 12 Javascript
json数据格式常见操作示例
Jun 13 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 18 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 Javascript
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
如何使用PHP给图片加水印
2016/10/12 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
php实现微信支付之退款功能
2018/05/30 PHP
PHP单文件上传原理及上传函数的封装操作示例
2019/09/02 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
Javascript 刷新全集常用代码
2009/11/22 Javascript
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
BootStrap实用代码片段之一
2016/03/22 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
python实现小世界网络生成
2019/11/21 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
大学生实习证明范本
2014/01/15 职场文书
成语的广告词
2014/03/19 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
会议邀请函
2015/01/30 职场文书
如何写新闻稿
2015/07/18 职场文书
我国拿下天问一号火星着陆区附近 22 个地理实体命名:平乐、西柏坡、古田、漠河等
2022/04/29 数码科技