JavaScript迭代器与生成器使用详解
本文详细解析JavaScript中的迭代器（Iterator）与生成器（Generator）。介绍迭代器接口的工作原理、Symbol.iterator属性的使用，以及生成器函数的语法特性。通过next方法传递参数、处理异步回调地狱、错误捕获（throw）和提前终止（return）等实战案例，帮助开发者掌握ES6异步编程的高级技巧。
迭代器 (Iterator)
迭代器（Iterator）也被称为遍历器，它是一种统一的接口机制，旨在为不同的数据结构提供一致的访问方式。在JavaScript中，原本表示“集合”的数据结构主要包括数组（Array）和对象（Object）。ES6标准引入了Map和Set，使得数据集合类型扩展为四种。
当需要混合使用多种数据结构（例如数组元素为对象，或对象属性包含Map）时，单一的访问方式难以满足需求。此时，迭代器的作用凸显：它为各类数据结构提供统一且简便的访问接口，确保成员按特定顺序排列，并为ES6新增的for...of遍历语法提供底层支持。
Iterator工作原理
🧑在进行自定义数据遍历时，理解迭代器的工作机制至关重要。其核心原理如下：
首先创建一个指针对象，该指针初始指向数据结构的起始位置。
首次调用指针对象的next方法时，指针自动移动至数据结构的第一个成员。
随后持续调用next方法，指针依次向后移动，直至指向最后一个成员。
🏃每次调用next方法，均返回一个包含value和done属性的对象。
<script>
// 声明一个数组
const animals = ['大象','狮子','老虎','猎豹','猴子']
// 创建一个指针对象
let iterator = animals[Symbol.iterator]()
// 调用对象的next方法
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
</script>
next()方法返回一个表示当前数据成员信息的对象。该对象包含两个属性：value属性返回当前位置的成员值；done属性为布尔值，用于指示遍历是否结束（即是否还需继续调用next()方法）。
自定义遍历数据
当使用for...of循环遍历特定数据结构时，该循环会自动查找Iterator接口。该接口默认部署在Symbol.iterator属性上。Symbol.iterator本身是一个函数，即当前数据结构默认的遍历器生成函数。执行此函数即可返回一个遍历器对象。
<script>
// 声明一个对象
const classroom = {
name:'终极一班',
team: [
'汪大东',
'金宝三',
'花灵龙',
'中万钧',
'雷婷'
],
[Symbol.iterator](){
// 索引变量
let index = 0
// 引入函数外的this
let _this = this
return {
next:function(){
if(index<_this.team.length){
const result = {value:_this.team[index],done:false}
// 下标自增
index++
// 返回结果
return result
}else{
return {value:undefined,done:true}
}
}
// 对于遍历器对象来说，done: false和value: undefined属性都是可以省略的，因此上面的makeIterator函数可以简写成下面的形式
// next:function(){
// return index<_this.team.length ? {value:_this.team[index++]}:{done:true}
// }
}
}
}
// 遍历这个对象
for(let con of classroom){
console.log(con);
}
</script>
生成器 (Generator)
生成器函数是ES6引入的一种异步编程方案，其语法行为与传统函数截然不同。传统的异步编程主要依赖纯回调函数。生成器函数与普通函数的区别在于：function关键字与函数名之间需添加星号（*），且函数体内部使用yield表达式。具体案例如下：
<script>
// 生成器其实就是一个特殊的函数，在function与函数名中间补上一个星号
// yield就是一个函数分隔符，使生成器函数执行暂停，,yield关键字后面的表达式的值返回给生成器的调用者
function * person() {
console.log('hello world');
yield '第一分隔线'
console.log('hello world 1');
yield '第二分隔线'
console.log('hello world 2');
yield '第三分隔线'
}
let iterator = person()
// console.log(iterator); 打印的就是一个迭代器对象，里面有一个 next() 方法，我们借助next方法让它运行
iterator.next()
iterator.next()
iterator.next()
</script>
上述代码生成的是一个迭代器对象，我们可以直接使用for...of对其进行遍历操作。
<script>
function * person() {
yield '第一分隔线'
yield '第二分隔线'
yield '第三分隔线'
}
for(let v of person()){
console.log(v);//打印是yield后面字符串的内容
}
console.log('-----------------');
// 方法补充：yield* 后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口。
let generator = function* () {
yield 1;
yield* [2,3,4];
yield 5;
};
var iterator = generator();
console.log(iterator.next());// { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: 4, done: false }
console.log(iterator.next()); // { value: 5, done: false }
console.log(iterator.next()); // { value: undefined, done: true }
</script>生成器参数传递
生成器支持参数传递，但必须借助next方法实现。next方法同样可以接收参数，这些参数将作为上一个yield表达式的返回值。换言之，外部传入的参数会覆盖yield处的原始值。
<script>
function * person(arg) {
console.log(arg);
let one = yield 111
console.log(one);
let two = yield 222
console.log(two);
let three = yield 333
console.log(three);
}
// 执行获取迭代器对象
let iterator = person('AAA')
console.log(iterator.next());
// next方法传入实参
console.log(iterator.next('BBB'));
console.log(iterator.next('CCC'));
console.log(iterator.next('DDD'));
</script>
当Generator函数从暂停状态恢复运行时，其上下文状态（context）保持不变。通过next方法的参数，可以在Generator函数启动后，继续向函数体内部注入值。这意味着可以在Generator运行的不同阶段，从外部注入不同值以调整函数行为。
使用生成器实现回调地狱功能
在ES6诞生之前，异步编程主要采用四种方式：回调函数、事件监听、发布/订阅模式以及Promise对象。以下案例展示了如何利用生成器解决回调地狱问题：
<script>
// 案例： 1s打印111，2s打印222，3s打印333
// 回调地狱
setTimeout(()=>{
console.log(111);
setTimeout(()=>{
console.log(222);
setTimeout(()=>{
console.log(333);
},3000)
},2000)
},1000)
// 生成器
function one(){
setTimeout(()=>{
console.log(111);
iterator.next()
},1000)
}
function two(){
setTimeout(()=>{
console.log(222);
iterator.next()
},2000)
}
function three(){
setTimeout(()=>{
console.log(333);
iterator.next()
},3000)
}
function * gen(){
yield one()
yield two()
yield three()
}
let iterator = gen()
iterator.next()
</script>
生成器函数实例
生成器函数在异步任务处理方面表现出显著优势。
<script>
// 案例：用户信息 商品信息 商品价格
function getUsers (){
setTimeout(()=>{
let data = '用户信息'
iterator.next(data)
},1000)
}
function getGoods (){
setTimeout(()=>{
let data = '商品信息'
iterator.next(data)
},1000)
}
function getPrice (){
setTimeout(()=>{
let data = '商品价格'
iterator.next(data)
},1000)
}
// 生成器
function * gen(){
let users = yield getUsers()
console.log(users);
let goods = yield getGoods()
console.log(goods);
let price = yield getPrice()
console.log(price);
}
// 调用生产器函数
let iterator = gen()
iterator.next()
</script>
生成器—throw()
Generator函数返回的遍历器对象均包含一个throw方法，允许在函数体外抛出错误，并在Generator函数体内捕获。若Generator函数内部未部署try...catch代码块，抛出的错误将直接被外部的catch代码块捕获。若内部和外部均未部署try...catch，程序将报错并直接中断执行。
<script>
var g = function* () {
try {
yield;
} catch (e) {
console.log('内部捕获', e);//a
}
};
var i = g();
i.next();
try {
i.throw('a');
i.throw('b');
} catch (e) {
console.log('外部捕获', e);//b
}
</script>生成器—return()
生成器的return方法用于返回指定值，并立即终结对Generator函数的遍历。
<script>
function* gen() {
yield 1;
yield 2;
yield 3;
}
var g = gen();
console.log(g.next()) // { value: 1, done: false }
// 遍历器对象g调用return()方法后，返回值的value属性就是return()方法的参数foo。并且，Generator 函数的遍历就终止了
console.log(g.return('foo')) // { value: "foo", done: true }
console.log(g.next()) // { value: undefined, done: true }
// 如果return()方法调用时，不提供参数，则返回值的value属性为undefined。
function* gen1() {
yield 1;
yield 2;
yield 3;
}
var g1 = gen1();
console.log(g1.next()) // { value: 1, done: false }
console.log(g1.return()) // { value: undefined, done: true }
</script>若Generator函数内部包含try...finally代码块，且当前正在执行try代码块，调用return()方法会立即跳转至finally代码块。执行完finally块后，整个函数才会结束。此时，return()方法指定的返回值将在finally执行完毕后返回，而try块中剩余的代码将不再执行。
<script>
function* numbers () {
yield 1;
try {
yield 2;
yield 3;
} finally {
yield 4;
yield 5;
}
yield 6;
}
var g = numbers();
console.log(g.next()) // { value: 1, done: false }
console.log(g.next()) // { value: 2, done: false }
console.log(g.return(7)) // { value: 4, done: false }
console.log(g.next()) // { value: 5, done: false }
console.log(g.next()) // { value: 7, done: true }
</script>生成器简写
若对象的属性为Generator函数，可采用如下简写形式：
<script>
let obj = {
// myGeneratorMethod: function * (){}
// 上面代码可以简写成如下形式，在属性前加一个 Generator 函数即可。
* myGeneratorMethod(){}
}
</script>到此这篇关于JavaScript迭代器与生成器使用详解的文章就介绍到这了,更多相关JS迭代器与生成器内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
JS中使用位运算(~~)和一元加号(+)快速转换字符串为整数
2026-11-03 22:41:12
怎么使用命令行批量格式化项目中的JS文件
2026-11-03 19:04:42
JS代码美化后报错怎么办？常见格式化冲突解决方法
2026-11-03 18:47:01
不用moment.js，怎么用原生JS Intl API格式化时间戳
2026-11-03 18:10:30
原生JS与dayjs获取当前日期的代码对比
2026-11-03 17:57:26