迭代、迭代器、生成器的前世今生

僻嘶 · 2025-6-3 00:17:45

什么是迭代

类似于遍历遍历：有多个数据组成的集合数据结构（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[i],
done:i>arr.length - 1
}
i++;
return obj;
}
}
}
var iterator = createIterator([1,3,5,7,9]);
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 = {
[Symbol.iterator]: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[Symbol.iterator]();
function* createArrayIterator(array){
for (let index = 0; index < array.length; index++) {
const item = array[index];
console.log(`第${index}次迭代`);
yield item;
}
}
const arrayIterator = createArrayIterator([1,2,3,4,5,6]);

复制代码

//生成器函数调用该函数返回一个生成器该生成器即使是一个迭代器又是一个可迭代对象（满足可迭代协议）
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 更常用于异步编程，但生成器在定制化迭代器协议、性能优化框架中仍不可替代

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册