开篇
迭代器(iterator)是一个结构化的模式,用于从源以一次一个的方式提取数据。迭代器的使用可以极大地简化数据操作,于是ES6也向JS中添加了这个迭代器特性。新的数组方法和新的集合类型(如Set集合与Map集合)都依赖迭代器的实现,这个新特性对于高效的数据处理而言是不可或缺的,在语言的其他特性中也都有迭代器的身影:新的for-of循环、展开运算符(...),甚至连异步编程都可以使用迭代器。
本篇文章,笔者将从以下几个方面进行介绍:
什么是迭代器(iterator)?
基于协议实现迭代器
迭代器的应用
本篇文章阅读时间预计6分钟。
01
什么是迭代器(iterator)?
定义属性
迭代器是一种有序、连续的、基于拉取的用于消耗数据的组织方式,用于以一次一步的方式控制行为。简单的来说我们迭代循环一个可迭代对象,不是一次返回所有数据,而是调用相关方法分次进行返回。
迭代器iterator是一个object,这个object有一个next函数,该函数返回一个有value和done属性的object,其中value指向迭代序列中当前next函数定义的值。
ES6的迭代协议分为迭代器协议(iterator protocol)和可迭代协议(iterable protocol),迭代器基于这两个协议进行实现。
迭代器协议: iterator协议定义了产生value序列的一种标准方法。只要实现符合要求的next函数,该对象就是一个迭代器。相当遍历数据结构元素的指针,类似数据库中的游标。
可迭代协议: 一旦支持可迭代协议,意味着该对象可以用for-of来遍历,可以用来定义或者定制JS 对象的迭代行为。常见的内建类型比如Array & Map都是支持可迭代协议的。对象必须实现@@iterator方法,意味着对象必须有一个带有@@iterator key的可以通过常量Symbol.iterator访问到的属性。
下图展示了Arrays,Maps,Strings数据类型实现了迭代协议,我们可以使用for-of和展开语法显示迭代器的数据。
02
基于协议实现迭代器
迭代器协议
下段代码显示了基于迭代协议实现的方法:
length done
上述代码将会输出
1
2
3
4
5
true
上述代码的next方法是不是看着费劲?我们也可以这样改写,看起来更清晰些:
nextIndex arraynextIndexvaluearraynextIndexdonedone
从代码中我们可以看出,如果存在新的元素,返回当前元素的并将当前元素位置的标识递增加1,当没有元素时,返回{ done: true }。
可迭代协议
根据可迭代协议,对象需要提供@@iterator方法; 也就是说,它必须将Symbol.iterator符号作为属性键。 @@iterator方法必须返回迭代器对象。代码实现如下:
iteratoriteratorvaluevaluevaluevaluevaluedone
上述代码将会输出
1
2
3
4
5
true
上述代码,我们实现了自定义的迭代器,基于JS的作用域和闭包特性才能轻松实现。Arrays,Maps,Strings数据类型实现了可迭代协议,其 __proto__原型链指向自带Symbol.iterator的默认方法,节省了我们手写代码的时间,如下代码所示:
iterator
上述代码将会输出:
valuedonevaluedonevaluedone
我们可以使用for-of,展开语法迭代数组,示例代码如下:
...
object对象没有实现可迭代协议,我们如何使用for-of,展开语法迭代迭代object对象呢?示例代码如下:
iteratorlength...
02
迭代器应用
斐波那契数列
斐波那契数列(Fibonacci sequence),又称黄金分割数列、因数学家列昂纳多·斐波那契(Leonardoda Fibonacci)以兔子繁殖为例子而引入,故又称为“兔子数列”,指的是这样一个数列:1、1、2、3、5、8、13、21、34、……在数学上,斐波纳契数列以如下被以递推的方法定义:F(1)=1,F(2)=1, F(n)=F(n-1)+F(n-2)(n>=3,n∈N*)。
我们可以使用迭代器来产生一个序列数不大于100的斐波那契数列,示例代码如下:
iterator...
模拟任务队列
有时候我们需要要执行任务放在一个队列里,分次执行,我们可以使用迭代器进行模拟,示例代码如下:
iteratoriterator...length...lengthstep1step2step3iterator
上述代码输出:
step valuedonestep valuedonestep valuedone
从上述代码,我们可以看出,迭代器不仅仅是数据的迭代,还可以作为一个模式来组织相关的功能。(注:本示例来源《你不知道的JavaScript》下卷)
今天的内容就到这里,迭代器是不是很神奇,好像如魔法一般,我们随意控制函数的中断与继续,丰富了我们解决问题的思路,让我们的代码看起来更加工程化和结构化,提高了代码的可读性和可理解性。