Fork me on GitHub

第七章 迭代器与生成器

字数统计: 3.2k字   |   阅读时长≈ 13分

理解迭代

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

在 JavaScript 中，计数循环就是一种最简单的迭代： 
for (let i = 1; i <= 10; ++i) { 
    console.log(i); 
}

- 迭代之前需要事先知道如何使用数据结构。
	数组中的每一项都只能先通过引用取得数组对象， 然后再通过[]操作符取得特定索引位置上的项。这种情况并不适用于所有数据结构。

- 遍历顺序并不是数据结构固有的。
	通过递增索引来访问数据是特定于数组类型的方式，并不适 用于其他具有隐式顺序的数据结构。


ES5 新增了 Array.prototype.forEach()方法，向通用迭代需求迈进了一步（但仍然不够理想）：

这个方法解决了 单独记录索引 和 通过数组对象取得值 的问题。不过，没有办法标识迭代何时终止。 因此这个方法只适用于数组，而且回调结构也比较笨拙。


可迭代对象iterable的简单for/of循环也可以写成如下这种复杂的形式：

let iterable = [1,2,3,4];
let iterator = iterable[Symbol.iterator](); // 通过iterable的迭代器方法 获取可迭代对象
for(let rs = iterator.next(); !rs.done; rs = iterator.next()) {
    console.log('迭代数值：', rs)
}

迭代器模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
	迭代器模式（特别是在 ECMAScript 这个语境下）描述了一个方案，即可以把有些结构称为“可迭 代对象”（iterable），因为它们实现了正式的 Iterable 接口，而且可以通过迭代器 Iterator 消费。


1、可迭代协议
	实现 Iterable 接口（可迭代协议）要求同时具备两种能力：
    -（1）支持迭代的自我识别能力和创建实现 Iterator 接口的对象的能力。在 ECMAScript 中，这意味着必须暴露一个属性作为“默认迭代器”，而 且这个属性必须使用特殊的 Symbol.iterator 作为键。
    -（2）这个默认迭代器属性必须引用一个迭代器工厂 函数，调用这个工厂函数必须返回一个新迭代器。

    很多内置类型都实现了 Iterable 接口：
	 字符串  数组 映射  集合  arguments 对象  NodeList 等 DOM 集合类型

	Number、Object默认没有实现迭代器工厂函数
    let num = 1;
	let str = 'ss';
	num[Symbol.iterator] ;// undefined
	str[Symbol.iterator] ;// undefined
	
	调用工厂函数会生成一个迭代器
    str[Symbol.iterator]();//StringIterator {}

	实现迭代协议的所有类型都会自动兼容接收可迭代对象的任何语言特性。接收可迭代对象的原生语言特性包括：
for-of 循环 
     数组解构 
     扩展操作符 
Array.from() 
     创建集合 
     创建映射 
Promise.all()接收由期约组成的可迭代对象 
Promise.race()接收由期约组成的可迭代对象 
yield*操作符，在生成器中使用

2、迭代器协议
	迭代器是一种一次性使用的对象，用于迭代与其关联的可迭代对象。
    使用 next() 返回的迭代器对象 
    	IteratorResult :{done:false, value:'xxx'};// done为true时，迭代完成



	迭代器维护着一个指向可迭代对象的引用，因此迭代器会阻止垃圾回收程序回收可 迭代对象。

	
3、自定义迭代器
	与 Iterable 接口类似，任何实现 Iterator 接口的对象都可以作为迭代器使用。
    迭代器包括 ：
    	interface Iterable {
            [Symbol.iterator](): Iterator
        }
        interface Iterator{
            next(): IteratorResult
        }
        interface IteratorResult{
            done:Boolean,
            value:any
        }
    class Counter { 
        constructor(limit) { 
            this.limit = limit; 
        } 
        [Symbol.iterator]() { 
            let count = 1, 
                limit = this.limit; 
            return { 
                next() { 
                    if (count <= limit) { 
                        return { done: false, value: count++ };
                    } else { 
                        return { done: true, value: undefined }; 
                    } 
                },
                //for of 中 break循环，抛出错误时，调用
                return() { 
                    console.log('Exiting early'); 
                    return { done: true }; 
                }

            }; 
        } 
    } 
let counter = new Counter(3); 
for (let i of counter) { console.log(i); } // 1 // 2 // 3 




/*
*Range 对象表示一个数值范围 {x: from <= x <= to}
*RAnge 定义了has()方法，用于测试给定数值是不是该范围的成员
*Range 是可迭代的，迭代其范围内的所有整数
*/

class Range {
    constructor(from, to) {
        this.from = from;
        this.to = to;
    }
    has(num) {
        return num <= this.to && num >= this.from
    }
    toString() {
        reeturn `${this.from}-${this.to}`
    }
    [Symbol.iterator](){
        let next = Math.ceil(this.from);//向上取整
        let last = this.to;
        return {
            next() {
                return (next > last)? {value: last, done: true}: {value: next++, done: false}
            },
            [Symbol.iterator]() {
                return this;
            }
        };
    }
}

let r1 = new Range(1,10)

console.log(r1)
for(let i of r1){
    console.log(i)
}

4、提前终止迭代器
	可选的 return()方法用于指定在迭代器提前关闭时执行的逻辑。执行迭代的结构在想让迭代器知 道它不想遍历到可迭代对象耗尽时，就可以“关闭”迭代器。
    这个return()方法必须返回一个迭代器结果对象。这个对象的属性会被忽略，但返回非对象值会导致报错。
    
for-of 循环通过 break、continue、return 或 throw 提前退出时会触发 迭代器 return 方法

	eg:
		for (let i of counter) { 
            if(i === 2){
			  break;
            }
            console.log(i); 
        }// 1  Exiting early
		
[注意]：（如 数组迭代器不能关闭 只能终止 下次遍历从终止位置开始）
	因为 return()方法是可选的，所以并非所有迭代器都是可关闭的。要知道某个迭代器是否可关闭， 可以测试这个迭代器实例的 return 属性是不是函数对象。
	不过，仅仅给一个不可关闭的迭代器增加这 个方法并不能让它变成可关闭的。这是因为调用 return()不会强制迭代器进入关闭状态。即便如此， return()方法还是会被调用。


5、实现范围
	//输出 起始范围数字
	function *(start, end){
        while(end > start){
        	yield start++;      
        }
    }

生成器

生成器是 ECMAScript 6 新增的一个极为灵活的结构，拥有在一个函数块内暂停和恢复代码执行的 能力。这种新能力具有深远的影响，比如，使用生成器可以自定义迭代器和实现协程。

生成器是一种使用强大的新ES6语法定义的迭代器，特别适合要迭代的值不是某个数据结构的元素，而是计算结果的场景。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
1、基础用法
	函数名称前加 * 表示它是一个生成器。可定义函数的地方就能定义生成器
	//函数声明
	function* generatorFn(){} 
	//表达式
	let generatorFn = function* () {}
	//对象字面量
    let foo = { * generatorFn() {} }
    //类方法
    class Bar { 
        * generatorFn(){}
    }
    //静态方法
    class Bar { 
        static *generatorFn(){}
    }

	【注】箭头函数不能定义为 生成器函数， 标识 * 不受两侧空格影响

2、基本使用
	function * generatorFn(){
        console.log('start')
    }
	//调用生成器函数会产生一个生成器对象,但它不会执行
    //调用生成器函数并不会实际执行函数体，而是返回一个生成器对象。
	const g = generatorFn();

	//执行next方法后 开始执行
	//调用它的next()方法会导致生成器函数的函数体从头（或从当前位置）开始执行，直至遇见一个yield语句。yield（回送）是ES6的新特性，类似于return语句。yield语句的值会成为调用迭代器的next()方法的返回值。
	g.next();// start

3、yield
	中断执行，函数作用域的状态会被保留。停止执行的生成器只能通过在生成器对象上调用next 方法恢复
	function * generatorFn(){
        console.log('start1');
        yield 1;
        console.log('start2');
        yield 2;
        console.log('start3');
	    return 'out'
        console.log('start4');
		
    }
	const g = generatorFn();
	//yield 关键字 有点像 函数中的返回值 只能在生成器内部使用， 它生成的值 会出现在 next（）方法返对象里面
	g.next();//start1 {value: 1, done: false}
	g.next();//start1 {value: 2, done: false}
	g.next();// {value: out, done: true}
	g.next();// {value: undefined, done: true}

	【注】yield 关键字 必须直接位于 生成器函数中 位于非生成器中会抛出语法错误
    
4、把生成器对象作为可迭代对象
	
	function* nTimes(n) { 
        //yield 1;
        //yield 2;
        //yield 3;
        yield* [1,2,3];//与上面写法 效果一至
        while(n--) { 
            yield; 
        } 
    }
	
	for (let _ of nTimes(3)) { console.log('foo'); } // foo // foo // foo

	-递归
	function* nTimes(n) { 
        if (n > 0) { 
            yield* nTimes(n - 1); 
            yield n - 1; 
        } 
    }


	// 回送指定可迭代对象的前n个元素
	/*
	*params(number) n 迭代多少个/次 
	*params(Object) iterable 可迭代对象/生成器
	*/
	function * take(n, iterable) {
        let it = iterable[Symbol.iterator];// 取得可迭代对象的 迭代器
        while(n-- > 0) {
            let next = it.next();// 从迭代器取得下一项
            if(next.done) return // 没有更多的值直接返回
            else yield next.value// 否则，回送这个值
        }
    }


5、yield 实现输出和输入
	-输入
		//第一次调用 next()传入的值不会被使用，因为这一次调用是为了开始执行生成器函数：
		next(x);中传入的 x 极为输入。 它会变成yield的返回值。
	-输出
		yield xxx; 会在调用next 后， 返回 {value:xxx, done:false/true}
	-eg
    function* generatorFn(initial) { 
        console.log(initial); 
        console.log(yield 1); 
        console.log(yield 2); 
    } 

    let generatorObject = generatorFn('foo'); 

    generatorObject.next('bar'); //bar参数不会被使用  foo 1
    generatorObject.next('baz'); // baz 2
    generatorObject.next('qux'); // undefined

	
	function * test01() {
        console.log('第一次调用')
        let r1 =  yield 1;
        console.log('第二次调用:',r1)
        let r2 =  yield 2;
        console.log('第三次调用后:',r2)
        let r3 =  yield 3;
        console.log('第四次调用后:',r3)
        let r4 =  yield 4;
        console.log('第五次调用后:',r4)
        let r5 =  yield 5;
        console.log('第六次调用后:',r5)
        return 6
        console.log('最后')
    }
	let t1 = test01();
	t1.next(111);// 第一次调用
	t1.next(222);// 第二次调用:222
	t1.next(333);// 第二次调用:333
	t1.next(444);// 第二次调用:444
	t1.next(555);// 第二次调用:555
	t1.next(666);// 第二次调用:666
	t1.next(777);



6、生成器作为默认迭代器
	因为生成器对象实现了 Iterable 接口，而且生成器函数和默认迭代器被调用之后都产生迭代器， 所以生成器格外适合作为默认迭代器。
	class Foo { 
        constructor() { 
            this.values = [1, 2, 3]; 
        }
        * [Symbol.iterator]() { 
            yield* this.values; 
        } 
    } 
	const f = new Foo(); 
	for (const x of f) { 
        console.log(x); 
    } // 1 // 2 // 3
	
	-一个实现 Iterator 接口的对象一定有 next() 方法，还有一个可选的 return() 方法用于停止迭代器。
    生成器除了有这两个方法，还有第三个方法：throw()
	
	-return 
    	所有生成器都有return方法， 提供给 return()方法的值，就是终止迭代器对象的值。进入关闭状态就无法恢复。后续调用next()会返回 {done:true},且提供的任何返回值都不会被储存或传播
		
        console.log(f.return(4)); // { done: true, value: undefined }

	-throw
    	
		throw()方法会在暂停的时候将一个提供的错误注入到生成器对象中。如果错误未被处理，生成器 就会关闭：

		-外部处理：
        	try { 
                f.throw('foo'); 
            } catch (e) { 
                console.log(e); // foo 
            }
		-内部处理
			错误处理会跳过对应的yield，恢复执行
			function* generatorFn() { 
                for (const x of [1, 2, 3]) { 
                    try { 
                        yield x; 
                     } catch(e) {
                         
                     } 
                 } 
             }

			const g = generatorFn(); 
             console.log(g.next()); // { done: false, value: 1}
             g.throw('foo'); 
             console.log(g.next()); // { done: false, value: 3}

	【注】注意 如果生成器对象还没有开始执行，那么调用 throw()抛出的错误不会在函数内部被 捕获，因为这相当于在函数块外部抛出了错误。



7、其他应用
    1）function* task() {
       const resp = yield fetch("https://developer.duyiedu.com/edu/groupChat/getMsgList")
        const result = yield resp.json();
        console.log(result);
    }

    run(task)

    function run(generatorFunc) {
        const generator = generatorFunc();
        let result = generator.next(); //启动任务（开始迭代）, 得到迭代数据
        handleResult();
        //对result进行处理
        function handleResult() {
            if (result.done) {
                return; //迭代完成，不处理
            }
            //迭代没有完成，分为两种情况
            //1. 迭代的数据是一个Promise
            //2. 迭代的数据是其他数据
            if (result.value instanceof Promise) {
                //1. 迭代的数据是一个Promise
                //等待Promise完成后，再进行下一次迭代
                result.value.then(data => {
                    result = generator.next(data)
                    handleResult();
                })
            } else {
                //2. 迭代的数据是其他数据，直接进行下一次迭代
                result = generator.next(result.value)
                handleResult();
            }
        }
    }
 2）处理异步函数 [此做法已不推荐，es6新增 async await 解决异步问题]

function himmel(gen){
    const item = gen.next();
    
	if(item.done){
        return item.value;
    }
    const {value, done} = item;
    if(value instanceof Promise){
        value.then(e=> himmel(gen))
    } else {
        himmel(gen)
    }
}

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

侠客行
作者：李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
救赵挥金槌，邯郸先震惊。
千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。
谁能书阁下，白首太玄经。