[js高手之路] es6系列教程 - 迭代器与生成器详解

什么是迭代器？

迭代器是一种特殊对象，这种对象具有以下特点：

1，所有对象都有一个next方法

2，每次调用next方法，都会返回一个对象，该对象包含两个属性，一个是value, 表示下一个将要返回的值。另一个是done，他是一个布尔值，用来表示该迭代器是否还有数据可以返回.

3，迭代器还会保存一个内部指针指向当前集合中的值

设计模式中有个迭代模式，跟迭代器是差不多的，我之前有写过2篇文章关于迭代模式：

[js高手之路] 设计模式系列课程 - 迭代器(1)

[js高手之路] 设计模式系列课程 - DOM迭代器(2)

用es5的方式，封装一个迭代器：

 1 function createIterator( arr ){
 2     var i = 0;
 3     return {
 4         next : function(){
 5             var done = ( i >= arr.length );
 6             var value = !done ? arr[i++] : undefined;
 7             return {
 8                 done : done,
 9                 value : value
10             }
11         }
12     };
13 }
14
15 var iterator = createIterator( [ 10, 20, 30 ] );
16 console.log( iterator.next() ); // { done : false, value : 10 }
17 console.log( iterator.next() ); // { done : false, value : 20 }
18 console.log( iterator.next() ); // { done : false, value : 30 }
19 console.log( iterator.next() ); // { done : true, value : undefined }

然后你再看看是否符合我们上面说的迭代器对象的特点.

有了迭代器的基础之后，我们就来看看，什么是生成器？

生成器是一种返回迭代器的函数，通过function关键字后的星号( * )来表示，函数中会用到新的关键字yield. 星号可以紧跟function后面也可以在function后面加个空格.

 1 function *createIterator(){
 2     yield 10;
 3     yield 20;
 4     yield 30;
 5 }
 6
 7 var iterator = createIterator();
 8 console.log( iterator.next() ); // { done : false, value : 10 }
 9 console.log( iterator.next() ); // { done : false, value : 20 }
10 console.log( iterator.next() ); // { done : false, value : 30 }
11 console.log( iterator.next() ); // { done : true, value : undefined }

通过上面这段程序，你应该看出来了，结果跟我们之前用es5实现的迭代器是差不多的。但是你在这个生成器函数中压根就没有看见next方法，done和value属性。因为生成器函数内部实现了迭代器。重点要关注下这个yield关键字，它有什么特点？

1，每当执行完一条yield语句，函数就会自动停止执行，执行完yield 10之后，函数就会自动停止。

2，下一次调用next方法，就会执行yield 20，函数又会自动停止，

3，下一次调用next方法，就会执行yield 30，函数自动停止

4，下一次在调用，没有可以迭代的元素，value返回undefined

用yield关键字返回数组的当前值

 1 function *createIterator( arr ){
 2     for( var i = 0, len = arr.length; i < len; i++ ) {
 3         yield arr[i];
 4     }
 5 }
 6 var iterator = createIterator( [ 10, 20, 30 ] );
 7 console.log( iterator.next() ); // { done : false, value : 10 }
 8 console.log( iterator.next() ); // { done : false, value : 20 }
 9 console.log( iterator.next() ); // { done : false, value : 30 }
10 console.log( iterator.next() ); // { done : true, value : undefined }

使用yield关键字，需要注意的地方：

yield关键字只能在生成器内部使用，在生成器内部的函数使用也会报错.

1 function show(){
2     yield 10;
3 }
4 show();

这种使用方式会报错，下面这种使用，也会报错

1 function *createIterator( arr ){
2     for( var i = 0, len = arr.length; i < len; i++ ) {
3         return function(){
4             yield arr[i];
5         }
6     }
7 }

生成器支持函数表达式的写法，但是不支持箭头函数

 1 var createIterator = function *( arr ){
 2     for( var i = 0, len = arr.length; i < len; i++ ) {
 3         yield arr[i];
 4     }
 5 }
 6 var iterator = createIterator( [ 10, 20, 30 ] );
 7 console.log( iterator.next() ); // { done : false, value : 10 }
 8 console.log( iterator.next() ); // { done : false, value : 20 }
 9 console.log( iterator.next() ); // { done : false, value : 30 }
10 console.log( iterator.next() ); // { done : true, value : undefined }

1 var createIterator = *( arr )=>{
2     for( var i = 0, len = arr.length; i < len; i++ ) {
3         yield arr[i];
4     }
5 }

1 var *createIterator = ( arr )=>{
2     for( var i = 0, len = arr.length; i < len; i++ ) {
3         yield arr[i];
4     }
5 }

上面这2种箭头写法是不支持的.

生成器可以添加在对象中

 1 var obj = {
 2     createIterator : function *( arr ){
 3         for( var i = 0, len = arr.length; i < len; i++ ) {
 4             yield arr[i];
 5         }
 6     }
 7 };
 8 var iterator = obj.createIterator( [ 10, 20, 30 ] );
 9 console.log( iterator.next() ); // { done : false, value : 10 }
10 console.log( iterator.next() ); // { done : false, value : 20 }
11 console.log( iterator.next() ); // { done : false, value : 30 }
12 console.log( iterator.next() ); // { done : true, value : undefined }

也可以用对象的简写方式:

 1 var obj = {
 2     *createIterator( arr ){
 3         for( var i = 0, len = arr.length; i < len; i++ ) {
 4             yield arr[i];
 5         }
 6     }
 7 };
 8 var iterator = obj.createIterator( [ 10, 20, 30 ] );
 9 console.log( iterator.next() ); // { done : false, value : 10 }
10 console.log( iterator.next() ); // { done : false, value : 20 }
11 console.log( iterator.next() ); // { done : false, value : 30 }
12 console.log( iterator.next() ); // { done : true, value : undefined }

转载于:https://www.cnblogs.com/ghostwu/p/7587327.html

[js高手之路] es6系列教程 - 迭代器与生成器详解相关推荐

[js高手之路] vue系列教程 - vue的事件绑定与方法(2)
一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 1 window.onload = function () { 2 var c = new Vue({ 3 e ...
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车
发布者订阅者模式,是一种很常见的模式,比如: 一.买卖房子生活中的买房,卖房,中介就构成了一个发布订阅者模式,买房的人,一般需要的是房源,价格,使用面积等信息,他充当了订阅者的角色中介拿到卖主的房 ...
[js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...
[js高手之路] html5 canvas教程 - 绘制七巧板
七巧板长什么样? 用canvas把他画出来,其实就是把这7个区域的图形,每个点的坐标找出来,再用moveTo, lineTo连线,设置不同的颜色即可. 1 <head> 2 <met ...
Cubemx与HAL库系列教程|系统时钟配置详解及源码分析
STM32时钟系统简介 STM32种类繁多,时钟系统也不尽相同,但基本的还是大差不差,今日小飞哥就F1系列的MCU简单聊一聊STM32的时钟系统 1.时钟种类介绍: 先来看一看时钟树图,包含了整个系统 ...
Python迭代器和生成器详解（包括yield详解）
文章目录一.迭代器 1. 可迭代对象(Iterable) 2. 迭代器对象(Iterator) 3. for 循环原理 4. 迭代器的优缺点二.生成器 1. yield 原理 2. yield 和 ...
[js高手之路] 设计模式系列课程 - DOM迭代器(2)
如果你对jquery比较熟悉的话,应该用过 eq, first, last, get, prev, next, siblings等过滤器和方法.本文,我们就用迭代设计模式来封装实现,类似的功能 1 & ...
js中的迭代器与生成器(详解)
目录一,迭代器 1.迭代器概念 2.迭代器的基本应用 3.迭代器原理 4.应用:自定义遍历数据二,生成器 1.生成器概念 2.生成器的基本应用 3.yield表达式的值 4.应用:模拟获取数据三 ...
nightwatch系列教程05——Nightwatch配置详解
本章内容翻译自http://nightwatchjs.org/gettingstarted#settings-file. 测试运行接收一个配置文件作为参数,默认是当前目录下的 nightwatch.j ...

[js高手之路] es6系列教程 - 迭代器与生成器详解

[js高手之路] es6系列教程 - 迭代器与生成器详解相关推荐

最新文章

热门文章