迭代器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}