迭代、迭代器、生成器的前世今生
什么是迭代类似于遍历 遍历：有多个数据组成的集合数据结构（map、set、array等其他类数组），需要从该结构中依次取出数据进行某种处理。 迭代：按照某种逻辑，依次取出下一个数据进行处理。
什么是迭代器 iterator
JS语言规定，如果一个对象具有next方法，并且next方法满足一定的约束，则该对象是一个迭代器（iterator）。 next方法的约束：该方法必须返回一个对象，该对象至少具有两个属性：
[*]value：any类型，下一个数据的值，如果done属性为true，通常，会将value设置为undefined
[*]done：bool类型，是否已经迭代完成
[*]通过迭代器的next方法，可以依次取出数据，并可以根据返回的done属性，判定是否迭代结束。
案例如下：
/**
* 迭代器
* 必须有个next函数
* 该函数必须返回一个对象 包括 value 属性 和 done属性
* value:本次迭代的返回值
* done:true 或者 false 本次迭代是否结束
* */
const iterator = {
total:3,
index:1,
next(){
const obj = {
value:this.index > this.total?undefined:Math.random(),
done:this.index > this.total
}
this.index++;
return obj;
}
}
//一个一个迭代直到不能迭代为止
let result = iterator.next();
while(!result.done){
console.log(result);
result = iterator.next();
}
//输出斐波拉数列的数据
//1 1 2 3 5 8 13 21
const sequenceItereator = {
a:1,
b:1,
curIndex:1, //当前从1开始算
next(){
if(this.curIndex == 1 || this.curIndex == 2){
this.curIndex++;
return {
value:1,
done:false
}
}
var c = this.a + this.b;
this.curIndex++;
this.a = this.b;
this.b = c;
return {
value:c,
done:false
}
}
}
for(var i = 0;i<50;i++){
console.log(sequenceItereator.next());
}
什么是可迭代协议
ES6中出现了for-of循环，该循环就是用于迭代某个对象的，因此，for-of循环要求对象必须是可迭代的（对象必须满足可迭代协议） 可迭代协议是用于约束一个对象的，如果一个对象满足下面的规范，则该对象满足可迭代协议，也称之为该对象是可以被迭代的。 可迭代协议的约束如下：
[*]对象必须有一个知名符号属性（Symbol.iterator）
[*]done：bool类型，是否已经迭代完成
[*]该属性必须是一个无参的迭代器创建函数
案例如下：
//迭代器创建函数
function createIterator(arr){
var i = 0;
return {
next(){
var obj = {
value:arr,
done:i>arr.length - 1
}
i++;
return obj;
}
}
}
var iterator = createIterator();
console.log(iterator);
什么是生成器
生成器：由构造函数Generator创建的对象，该对象既是一个迭代器，同时，又是一个可迭代对象（满足可迭代协议的对象）
**注意：Generator构造函数，不提供给开发者使用，仅作为JS引擎内部使用**
生成器函数（生成器创建函数）：该函数用于创建一个生成器。
ES6新增了一个特殊的函数，叫做生成器函数，只要在函数名与function关键字之间加上一个*号，则该函数会自动返回一个生成器
生成器函数的特点：
[*]调用生成器函数，会返回一个生成器，而不是执行函数体（因为，生成器函数的函数体执行，收到生成器控制）
[*]每当调用了生成器的next方法，生成器的函数体会从上一次yield的位置（或开始位置）运行到下一个yield
[*]yield关键字只能在生成器内部使用，不可以在普通函数内部使用
[*]它表示暂停，并返回一个当前迭代的数据
[*]如果没有下一个yield，到了函数结束，则生成器的next方法得到的结果中的done为true
[*]yield关键字后面的表达式返回的数据，会作为当前迭代的数据
[*]生成器函数的返回值会作最终的value的值 但是当在进行next时 value是undefined
[*]生成器在调用next的时候可以传递参数，该参数会作为上一次yield整个表达式的返回结果
案列如下：
//可迭代协议
var robj = {
:function(){
var total = 3;
var i = 1;
return {
next(){
var oop = {
value:i>total?undefined:Math.random(),
done:i>total
}
i++;
return oop;
}
}
}
};
for (const element of robj) {
console.log(element);
}//生成器函数调用该函数返回一个生成器该生成器即使是一个迭代器 又是一个可迭代对象（满足可迭代协议）
function* createGenerator(){
console.log('函数体执行 - 开始');
yield 1; //会作为本次迭代的value值 {value:1,done:false}
console.log("函数体执行 - 1")
yield 2;//会作为本次迭代的value值 {value:2,done:false}
console.log('函数体执行 - 2');
yield 3;//会作为本次迭代的value值 {value:3,done:false}
console.log("函数体执行 - 3");
return "结束"//会作为本次迭代的value值 {value:"结束",done:true}
}
//掉用只会返回一个生成器 不会执行函数体
var generator = createGenerator();
//当调用next的时候会从开始位置到第一个yield处执行执行到yield位置就会卡住（不会继续执行）， 等到下一次next的时候
//生成器的函数体会从上一次yield的位置（或开始位置）运行到下一个yield
console.log(generator.next);
const iterator = generator();
function* createArrayIterator(array){
for (let index = 0; index < array.length; index++) {
const item = array;
console.log(`第${index}次迭代`);
yield item;
}
}
const arrayIterator = createArrayIterator();//生成器函数调用该函数返回一个生成器该生成器即使是一个迭代器 又是一个可迭代对象（满足可迭代协议）
function* createGenerator(){
console.log('函数体执行 - 开始');
let result = yield 1; //会作为本次迭代的value值 {value:1,done:false}
console.log("函数体执行 - 1",result)
result = yield 2;//会作为本次迭代的value值 {value:2,done:false}
console.log('函数体执行 - 2',result);
result = yield 3;//会作为本次迭代的value值 {value:3,done:false}
console.log("函数体执行 - 3",result);
return "结束"//会作为本次迭代的value值 {value:"结束",done:true}
}
let itereator = createGenerator();
let res = itereator.next();
function run(){
if(!res.done){
//如果在调用next的时候 给 next传递参数该参数会作为 yield 整个表达式的值返回
//执行步骤
//第一次调用就不care了第一次调用碰到yield 1; 就会卡住不会往下执行这个时候还不执行赋值操作
//第二次调用next 传递上一次迭代的值作为参数传递这个时候 就会从上一次 yield的位置 运行到下一个yield （这个时候就会进行赋值操作）
//整个yield 表达式的返回值 就是给next函数传递的参数
//依次类推
console.log(res);
res = itereator.next("张三:"+Math.random());
run();
}
}
run();var i = 0;
function asyncData(){
return new Promise((resolve,reject)=>{
setTimeout(() => {
i++;
//3秒后完成 完成的数据
resolve('完成'+i);
}, 10000);
})
}
//调用next()方法时传入的值会作为上一个yield表达式的返回值
//创建一个生成器函数 调用时返回一个生成器
function* task(){
console.log("开始获取数据");
let data = yield asyncData();
console.log('获取到的数据',data);
data = yield asyncData();
console.log("又获取到了数据",data);
data = yield 1;
console.log('又获取到了数据',data);
return '结束';
}
//没封装之前的写法
/*function run(createGenerator){
const generator = createGenerator();
let res = generator.next();
function next(){
if(!res.done){
console.log(res);
const value = res.value;
if(typeof value.then === 'function'){
value.then((data)=>{
res = generator.next(data);
next();
});
}else{
res = generator.next(value);
next();
}
}
}
next();
}*/
//封装后的写法
function run(createGenerator){
const generator = createGenerator();
console.log(generator);
next();
function next(nextValue){
const res = generator.next(nextValue);
if(res.done){
console.log('生成器迭代结束');
return;
}
const value = res.value;
if(typeof value.then === 'function'){
//如果返回的是promise将promise完成时的数据作为参数
//作为上一次yield表达式的返回值
value.then((data)=>{
return next(data)
})
}else{
console.log('走这里了')
//将上一次迭代获取到的value的值作为参数 传递给上一次yield表达式的返回值
next(res.value);
}
}
}
run(task);
总结：
生成器的核心价值在于其延迟执行与状态保持能力，适用于：
[*]需要按需生成数据的迭代场景（如分页、树遍历）
[*]资源敏感型任务（如大文件处理、流式传输）
[*]复杂流程控制（如多步骤交互、状态机）
[*]尽管 async/await 更常用于异步编程，但生成器在定制化迭代器协议、性能优化框架中仍不可替代
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]