web前端高级JavaScript - JavaScript中的迭代器Iterator和生成器Generator

迭代器Iterator

迭代器（遍历器）Iterator是ES6中新增的一套语法规范，但在ES6中并没有Iterator这个类。
迭代器（Iterator）是一种机制（接口）：为各种不同的数据结构提供统一的访问机制，任何数据结构只要部署Iterator接口，就可以完成遍历操作，依次处理该数据结构的所有成员。
迭代器的特点：

• 拥有next方法用于一次遍历/迭代数据结构的成员
• 每次遍历返回的结果是一个对象 {done: false, value:xxx}
  • done记录是否遍历完成
  • value:当前遍历的结果

//模拟遍历器
class Iterator{
	constructor(assemble){
		//assemble：数字作为索引逐级的证，拥有length属性。
		this.assemble = assemble;
		this.index = 0;
	}
	next(){
		if(this.index > this.assemble.length){
			return {done: true, value:undefined};//说明已经遍历完成
		}
		return{
			done: false,
			value: this.assemble[this.index++];
		}
	}
}

ES6中虽然没有Iterator这个类，但是某些数据结构已经默认实现了具备Iterator特点的可被迭代的规范。
所有拥有Symbol.iterator属性的数据结构（值），都是可被迭代的，并且可以基于for of循环遍历。
对象默认不具备Symbol.iterator属性，所以对象属于不可遍历的数据结构
常见的数据结构有：

• 数组
• 部分类数组：arguments、NodeList、HTMLCllection…
• String
• Set
• Map
• generator object

for of内部是按照iterator.next去迭代处理的，所以只有具备Symbol.iterator属性（也就是具备Iterator迭代规范）的数据结构才
可以用for of遍历

	let arr = [1,2,3,4];
	for(let item of arr){
		console.log(item);
	}
	//结果会依次输出1 2 3 4

让对象具备可迭代特点

let obj = {
	0: 10,
	1: 20,
	2: 30,
	[Symbol.iterator]:function(){
		let self = this, index = 1;
		return{
			next(){
				if(index > self.length){
					return {done: true, value:undefined};//说明已经遍历完成
				}
				return{
					done: false,
					value: self[index++];
				}
			}
		}
	}
}

生成器Generator

生成器对象是由一个generator function返回的，并且它符合可迭代规范，具备可迭代性。
生成器函数用function* 来定义，例如 function* fn(){}
普通函数与生成器函数的区别：

• 普通函数是Function的实例，普通函数.__ proto__===Function.prototype
• 生成器函数是GeneratorFunction 的实例，生成器函数.__ proto__ === GeneratorFunction.prototype;GeneratorFunction.prototype.__ proto__ === Function.prototype
• 生成器函数具有IsGenerator属性，值为true
• 生成器函数内部的this并不是指向生成器的实例，而是指向window
• 生成器函数不允许被new，直接当做普通函数调用则会创建实例
  • 当做普通函数调用，其内部的代码并不会执行
  • 当后续调用next才会执行代码，并且每一次执行next遇到一个yield就结束
  • 每一次返回的结果是符合迭代器规范的
  • {done: true/false, value:yield后面的值或者函数的返回值}

function* func(){}
let itor = func();//函数内部的代码不会执行，当后续调用next才会执行代码
({}).toString.call(func);//[object GeneratorFunction]
({}).toString.call(itor);//[object Generator];

function* func(){
	console.log('A');
	yield 1;
	console.log('B');
	yield 2;
	console.log('C');
	yield 3;
	console.log('D');
	yield 4;
}
let itor = func();//内部代码不会执行
console.log(itor.next());//{done:false, value:1}
console.log(itor.next());//{done:false, value:2}
console.log(itor.next());//{done:false, value:3}
console.log(itor.next());//{done:true, value:4}

执行next传递参数，可以把传递的值作为上一次yield后的结果，但是yield后面跟的值是每次执行next后的value值

function* func(){
	let x = yield 1;
	console.log(x);
}
let itor = func();
console.log(itor.next(10));//遇到yield结束返回值为：{done:false, value:1}1为yield后面的值
console.log(itor.next());//从上一次yield结束的地方开始执行，即let x = 10(上个next传递的值) 
//结果输出 undefined {done:true,value:undefined}

用yield* 实现生成器套生成器，那么在调用next时，要等到yield* 后面的生成器迭代完才会继续往下执行

function* func1(){
	yield 1;
	yield 2;
}

function* func2(){
	yield 3;
	yield* func1();
	yield 4;
}
console.log(itor.next());//{done:false, value: 3}
console.log(itor.next());//{done:false, value: 1}
console.log(itor.next());//{done:false, value: 2}
console.log(itor.next());//{done:false, value: 4}
console.log(itor.next());//{done:true, value: undefined}

Generator应用场景举例