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 相关文章推荐
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
javascript二维数组转置实例
Jan 22 Javascript
javascript操作select元素实例分析
Mar 27 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
Oct 30 Javascript
vue组件之Alert的实现代码
Oct 17 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
Feb 27 Javascript
Node与Python 双向通信的实现代码
Jul 16 Javascript
vue生命周期钩子函数以及触发时机
Apr 26 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
php数组一对一替换实现代码
2012/08/31 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
php 的反射详解及示例代码
2016/08/25 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
Python的一些用法分享
2012/10/07 Python
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
Python Map 函数的使用
2020/08/28 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
淘宝中秋节活动方案
2014/01/31 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
解除劳动合同协议书
2014/09/17 职场文书
小学家长通知书评语
2014/12/31 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
法制工作总结2015
2015/07/23 职场文书
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang