文章目录
Iterrator什么是Iterrator接口工作原理Iterrator的基本用法给对象添加Interator接口
Generator基本概念yield 与 nextGenerator 函数用法
Iterrator
什么是Iterrator接口
Symbol.iterator属性本身是一个函数可以为各种不同的数据结构提供统一的访问机制该接口主要供for…of来进行使用，即可以使用for…of进行遍历的就会具有Iterrator接口
工作原理
Iterator的遍历过程是这样的:
创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。不断调用指针对象的next方法，直到它指向数据结构的结束位置。
每一次调用next方法，都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。
Iterrator的基本用法
{
let arr
= ['hello', 'world'];
let map
= arr
[Symbol
.iterator
]();
console
.log(map
.next());
console
.log(map
.next());
console
.log(map
.next());
}
{
let arr
= ['hello', 'world'];
for (let value
of arr
){
console
.log(value
);
}
}
给对象添加Interator接口
let obj
= {
name
: "XX",
age
: 20,
job
: 'teacher',
[Symbol
.iterator
](){
const _this
= this;
const keys
= Object
.keys(_this
)
let index
= 0;
return {
next(){
if (index
< keys
.length
){
return {
value
: _this
[keys
[index
++]],
done
: false
}
}else {
return {
value
: undefined
,
done
: true
}
}
}
}
}
}
for(let key
of obj
){
console
.log(key
);
}
Generator
基本概念
generator其特点是可以中断函数的执行，我们需要在暂停的地方使用yield语句标明；不同普通函数的返回，
执行 Generator函数返回一个遍历器对象（一个指向内部状态的指针对象）调用遍历器对象的next方法，使得指针移向下一个状态。每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止
yield 与 next
yield关键字让 Generator内部的逻辑能够切割成多个部分每次调用 next方法，会返回一个对象，表示当前阶段的信息（ value 属性和 done属性）。value 属性是 yield语句后面表达式的值，表示当前阶段的值；done属性是一个布尔值，表示 Generator 函数是否执行完毕，即是否还有下一个阶段。
{
let tell = function* (){
yield 'a';
yield 'b';
return 'c';
}
let k
= tell();
console
.log(k
.next());
console
.log(k
.next());
console
.log(k
.next());
console
.log(k
.next());
}
Generator 函数用法
下面是使用Generator函数实现的一个长轮询
{
let ajax = function* (){
yield new Promise((resolve
, reject
) => {
setTimeout(() => {
resolve({code
:0});
}, 200);
})
}
let pull = function(){
let generator
= ajax();
let step
= generator
.next();
step
.value
.then(d
=> {
if (d
.code
!== 0){
setTimeout(() => {
console
.info('wait');
pull();
}, 1000);
}else {
console
.log(d
);
}
})
}
pull();
}
文章参考： JS的ES6的iterator JS为对象添加Iterator接口 Generator 函数的含义与用法 js异步编程之Generator
