深刻理解ES6--8.迭代器与生成器

时间 2019-11-29

原文原文链接

主要知识点：迭代器、生成器、可迭代对象以及for-of循环、迭代器的高级功能以及建立异步任务处理器数组

1. 迭代器

何为迭代器？异步

迭代器是被设计专用于迭代的对象，带有特定接口。全部的迭代器对象都拥有 next() 方法，会返回一个结果对象。该结果对象有两个属性：对应下一个值的 value ，以及一个布尔类型的 done ，其值为 true 时表示没有更多值可供使用。迭代器持有一个指向集合位置的内部指针，每当调用了 next() 方法，迭代器就会返回相应的下一个值。函数

2. 生成器

何为生成器？fetch

生成器（generator ）是能返回一个迭代器的函数。生成器函数由放在 function 关键字以后的一个星号（ * ）来表示，并能使用新的 yield 关键字。将星号紧跟在 function 关键字以后，或是在中间留出空格，都是没问题的。例如：this

function*generator(){

	yield 1;
	yield 2;
	yield 3;
}

let iterator = generator();
console.log(iterator.next().value);//1
console.log(iterator.next().value);//2
复制代码

生成器函数最有意思的地方是它们会在每个yield语句后中止，例如在上面的代码中执行yield 1后，该函数不会在继续往下执行。等待下一次调用next()后，才会继续往下执行yield 2。spa

除了使用函数声明的方式建立一个生成器外，还可使用函数表达式来建立一个生成器。因为生成器就是一个函数，一样可使用对象字面量的方式，将对象的属性赋值为一个生成器函数。设计

3. 可迭代对象与for-of循环

可迭代对象是包含Symbol.iterator属性的对象，这个Symbol.iterator属性对应着可以返回该对象的迭代器的函数。在ES6中，全部的集合对象（数组、Set和Map）以及字符串都是可迭代对象，所以它们都被指定了默认的迭代器。可迭代对象能够与ES6中新增的for-of循环配合使用。指针

迭代器解决了for循环中追踪索引的问题，而for-of循环，则是彻底删除追踪集合索引的须要，更能专一于操做集合内容。for-of循环在循环每次执行时会调用可迭代对象的next()方法，并将结果对象的value值存储在一个变量上，循环过程直到结果对象done属性变成true为止：code

let arr = [1,2,3];
for(let num of arr){
	console.log(num);
}
输出结果为：1，2，3
复制代码

for-of循环首先会调用arr数组中Symbol.iterator属性对象的函数，就会获取到该数组对应的迭代器，接下来iterator.next()被调用，迭代器结果对象的value属性会被放入到变量num中。数组中的数据项会依次存入到变量num中，直到迭代器结果对象中的done属性变成true为止，循环就结束。cdn

访问可迭代对象的默认迭代器

可使用可迭代对象的Symbol.iterator来访问对象上可返回迭代器的函数：

let arr = [1,2,3];
//访问默认迭代器
let iterator = arr[Symbol.iterator]();
console.log(iterator.next().value); //1
console.log(iterator.next().value); //2
复制代码

经过Symbol.iterator属性获取到该对象的可返回迭代器的函数，而后执行该函数获得对象的可迭代器一样的，但是使用Symbol.iterator属性来检查对象是不是可迭代对象。

建立可迭代对象

数组，Set等集合对象是默认的迭代器，固然也能够为对象建立自定义的迭代器，使其成为可迭代对象。那么迭代器如何生成？咱们已经知道，生成器就是一个能够返回迭代器的函数，所以自定义迭代器，就是写一个生成器函数。同时，可迭代对象必须具备Symbol.iterator属性，而且该属性对应着一个可以返回迭代器的函数，所以只须要将这个生成器函数赋值给Symbol.iterator属性便可：

//建立可迭代对象

let obj = {
	items:[],

	*[Symbol.iterator](){
		for(let item of this.items){
			yield item;
		}
	}
}

obj.items.push(1);
obj.items.push(2);

for(let num of obj){
	console.log(num);
}

输出：1，2
复制代码

4. 内置的迭代器

ES6中许多内置类型已经包含了默认的迭代器，只有当默认迭代器知足不了时，才会建立自定义的迭代器。若是新建对象时，要想把该对象转换成可迭代对象的话，通常才会须要自定义迭代器。

集合迭代器

ES6中有三种集合对象：数组、Map和Set，这三种类型都拥有默认的迭代器：

entries()：返回一个包含键值对的迭代器；
values()：返回一个包含集合中的值的迭代器；
keys()：返回一个包含集合中的键的迭代器；

调用entries()迭代器会在每次调用next()方法返回一个双项数组，此数组表明集合数据项中的键和值：对于数组来讲，第一项是数组索引；对于Set来讲，第一项是值（由于Set的键和值相同），对于Map来讲，就是键值对的值；
values()迭代器可以返回集合中的每个值；
keys()迭代器可以返回集合中的每个键；

集合的默认迭代器

当for-of循环没有显式指定迭代器时，集合对象会有默认的迭代器。values()方法是数组和Set默认的迭代器，而entries()方法是Map默认迭代器。

字符串的迭代器

ES6旨在为Unicode提供了彻底支持，字符串的默认迭代器就是解决字符串迭代问题的一种尝试，这样一来，借助字符串默认迭代器就能处理字符而非码元：

//字符串默认迭代器
let str ='A   B';
for(let s of str){
	console.log(s); //A  B
}
复制代码

扩展运算符与非数组的可迭代对象

扩展运算符能做用于全部可迭代对象，而且会使用默认迭代器来判断须要哪些值。在数组字面量中可使用扩展运算符将可迭代对象填充到数组中：

//扩展运算符可做用到全部可迭代对象
let arr = [1,2,3];
let array = [...arr];
console.log(array); [1,2,3]
复制代码

而且，能够不限次数在数组字面量中使用扩展运算符，并且能够在任意位置用扩展运算符将可迭代对象填充到数组中：

let arr = [1,2,3];
let arr2 = [7,8,9];
let array = [...arr,5,...arr2];
console.log(array); //1,2,3,5,7,8,9
复制代码

5. 迭代器高级功能

可以经过next()方法向迭代器传递参数**，当一个参数传递给next()方法时，该参数就会成为生成器内部yield语句中的变量值。**

//迭代器的高级功能
function * generator(){
	let first = yield 1;
	let second = yield first+2;
	let third = yield second+3;
}

let iterator = generator();
console.log(iterator.next()); //{value: 1, done: false}
console.log(iterator.next(4)); //{value: 6, done: false}
console.log(iterator.next(5)); //{value: 8, done: false}
console.log(iterator.next()); //{value: undefined, done: true}
复制代码

示例代码中，当经过next()方法传入参数时，会赋值给yield语句中的变量。

在迭代器中抛出错误

能传递给迭代器的不只是数据，还能够是错误，迭代器能够选择一个throw()方法，用于指示迭代器应在恢复执行时抛出一个错误：

//迭代器抛出错误

function * generator(){
	let first = yield 1;		
	let second = yield first+2;		
	let third = yield second+3;
}


let iterator = generator();
console.log(iterator.next()); //{value: 1, done: false}
console.log(iterator.next(4)); //{value: 6, done: false}
console.log(iterator.throw(new Error('Error!'))); //Uncaught Error: Error!
console.log(iterator.next()); //不会执行
复制代码

在生成器中一样可使用try-catch来捕捉错误：

function * generator(){
	let first = yield 1;
	let second;
	try{
		second = yield first+2;
	}catch(ex){
		second = 6
	}	
	let third = yield second+3;
}


let iterator = generator();
console.log(iterator.next()); //{value: 1, done: false}
console.log(iterator.next(4)); //{value: 6, done: false}
console.log(iterator.throw(new Error('Error!'))); //{value: 9, done: false}
console.log(iterator.next()); //{value: undefined, done: true}
复制代码

生成器的return语句

因为生成器是函数，你能够在它内部使用 return 语句，既可让生成器早一点退出执行，也能够指定在 next() 方法最后一次调用时的返回值。大多数状况，迭代器上的 next() 的最后一次调用都返回了 undefined ，但你还能够像在其余函数中那样，使用 return 来指定另外一个返回值。在生成器内， return 代表全部的处理已完成，所以 done 属性会被设为 true ，而若是提供了返回值，就会被用于 value 字段。好比，利用return让生成器更早的退出：

function * gene(){
	yield 1;
	return;
	yield 2;
	yield 3;
}

let iterator = gene();
console.log(iterator.next());//{value: 1, done: false}
console.log(iterator.next());//{value: undefined, done: true}
console.log(iterator.next());//{value: undefined, done: true}
复制代码

因为使用return语句，可以让生成器更早结束，所以在第二次以及第三次调用next()方法时，返回结果对象为：{value: undefined, done: true}。

还可使用return语句指定最后返回值：

function * gene(){
	yield 1;
	return 'finish';
}

let iterator = gene();
console.log(iterator.next());//{value: 1, done: false}
console.log(iterator.next());//{value: "finish", done: true}
console.log(iterator.next());//{value: undefined, done: true}
复制代码

当第二次调用next()方法时，返回了设置的返回值：finish。第三次调用 next() 返回了一个对象，其 value 属性再次变回undefined ，你在 return 语句中指定的任意值都只会在结果对象中出现一次，此后 value 字段就会被重置为 undefined 。

生成器委托

生成器委托是指：将生成器组合起来使用，构成一个生成器。组合生成器的语法须要yield和*，*落在yield关键字与生成器函数名之间便可：

function * gene1(){
	yield 'red';
	yield 'green';

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

function * combined(){
	yield * gene1();
	yield * gene2();
}

let iterator = combined();
console.log(iterator.next());//{value: "red", done: false}
console.log(iterator.next());//{value: "green", done: false}
console.log(iterator.next());//{value: 1, done: false}
console.log(iterator.next());//{value: 2, done: true}
console.log(iterator.next());//{value: undefined, done: true}
复制代码

此例中将生成器gene1和gene2组合而成生成器combined，每次调用combined的next()方法时，实际上会委托到具体的生成器中，当gene1生成器中全部的yield执行完退出以后，才会继续执行gene2，当gene2执行完退出以后，也就意味着combined生成器执行结束。

在使用生成器委托组合新的生成器时，前一个执行的生成器返回值能够做为下一个生成器的参数：

//利用生成器返回值

function * gene1(){
	yield 1;
	return 2;
}

function * gene2(count){

	for(let i=0;i<count;i++){
		yield 'repeat';
	}
}

function * combined(){
	let result = yield * gene1();
	yield result;
	yield*gene2(result);
}
let iterator = combined();
console.log(iterator.next());//{value: 1, done: false}
console.log(iterator.next());//{value: 2, done: false}
console.log(iterator.next());//{value: "repeat", done: false}
console.log(iterator.next());//{value: "repeat", done: false}
console.log(iterator.next());//{value: undefined, done: true}
复制代码

此例中，生成器gene1的返回值，就做为了生成器gene2的参数。

6. 异步任务

一个简单的任务运行器

生成器函数中yield能暂停运行，当再次调用next()方法时才会从新往下运行。一个简单的任务执行器，就须要传入一个生成器函数，而后每一次调用next()方法就会“一步步”往下执行函数：

//任务执行器
function run(taskDef) {
	// 建立迭代器，让它在别处可用
	let task = taskDef();
	// 启动任务
	let result = task.next();
	// 递归使用函数来保持对 next() 的调用
	function step() {
	// 若是还有更多要作的
	if (!result.done) {
		result = task.next();
		step();
	}
	} 
	// 开始处理过程
	step();
}


run(function*() {
	console.log(1);
	yield;
	console.log(2);
	yield;
	console.log(3);
});
复制代码

run() 函数接受一个任务定义（即一个生成器函数）做为参数，它会调用生成器来建立一个迭代器，并将迭代器存放在 task 变量上。第一次对 next() 的调用启动了迭代器，并将结果存储下来以便稍后使用。step() 函数查看result.done 是否为 false，若是是就在递归调用自身以前调用 next() 方法。每次调用 next() 都会把返回的结果保存在 result 变量上，它老是会被最新的信息所重写。对于 step() 的初始调用启动了处理过程，该过程会查看 result.done 来判断是否还有更多要作的工做。

可以传递数据的任务运行器

若是须要传递数据的话，也很容易，也就是将上一次yield的值，传递给下一次next()调用便可，仅仅只须要传送结果对象的value属性：

//任务执行器
function run(taskDef) {
	// 建立迭代器，让它在别处可用
	let task = taskDef();
	// 启动任务
	let result = task.next();
	// 递归使用函数来保持对 next() 的调用
	function step() {
		// 若是还有更多要作的
		if (!result.done) {
			result = task.next(result.value);				
			console.log(result.value); //6 undefined
			step();
		}
	} 
	// 开始处理过程
	step();
}


run(function*() {
	let value = yield 1;
	yield value+5;
});
复制代码

异步任务

上面的例子是简单的任务处理器，甚至仍是同步的。实现任务器也主要是迭代器在每一次调用next()方法时彼此间传递静态参数。若是要将上面的任务处理器改装成异步任务处理器的话，就须要yield可以返回一个可以执行回调函数的函数，而且回调参数为该函数的参数便可。

什么是有回调函数的函数？

有这样的示例代码：

function fetchData(callback) {
	return function(callback) {
		callback(null, "Hi!");
	};
}
复制代码

函数fetchData返回的是一个函数，而且所返回的函数可以接受一个函数callback。当执行返回的函数时，其实是调用回调函数callback。但目前而言，回调函数callback仍是同步的，能够改形成异步函数：

function fetchData(callback) {
	return function(callback) {
			setTimeout(function() {
				callback(null, "Hi!");
		}, 50);
	};
}
复制代码

一个简单的异步任务处理器：

//异步任务处理器

function run(taskDef){

	//执行生成器，建立迭代器
	let task = taskDef();
	//启动任务
	let result = task.next();

	function step(){
		while(!result.done){
			if(typeof(result.value)==='function' ){
				result.value(()=>{
					console.log('hello world');
				})
			}					
			result = task.next();
			step();
		}			
	}
	step();
}




run(function *(){
	//返回一个可以返回执行回调函数的函数，而且回调函数仍是该
	//函数的参数
	yield function(callback){
		setTimeout(callback,3000);
	}
});
复制代码

上面的示例代码就是一个简单的异步任务处理器，有这样几点要点：

使用生成器构造迭代器，因此在run方法中传入的是生成器函数；
生成器函数中yield关键字，返回的是一个可以执行回调函数的函数，而且回调函数是该函数的一个参数；

7. 总结

使用迭代器能够用来遍历集合对象包含的数据，调用迭代器的next()方法能够返回一个结果对象，其中value属性表明值，done属性用来表示集合对象是否已经到了最后一项，若是集合对象的值所有遍历完后，done属性为true；
Symbol.iterator属性被用于定义对象的默认迭代器，使用该属性能够为对象自定义迭代器。当Symbol.iterator属性存在时，该对象能够被认为是可迭代对象；
可迭代对象可使用for-of循环，for-of循环不须要关注集合对象的索引，更能专一于对内容的处理；
数组、Set、Map以及字符串都具备默认的迭代器；
扩展运算符能够做用于任何可迭代对象，让可迭代对象转换成数组，而且扩展运算符能够用于数组字面量中任何位置中，让可迭代对象的数据项一次填入到新数组中；
生成器是一个特殊的函数，语法上使用了*，yield可以返回结果，并能暂停继续往下执行，直到调用next()方法后，才能继续往下执行。使用生成器委托可以将两个生成器合并组合成一个生成器；
可以使用生成器构造异步任务处理器；