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应用场景举例

你可能感兴趣的:(WEB前端高级教程,生成器,迭代器,遍历器,Iterator,generator)