JavaScript迭代协议通过Symbol.iterator让对象可迭代，实现该方法并返回带next()的迭代器对象，即可用for…of或展开运算符遍历；生成器函数（function*）配合yield能更简洁地创建迭代器，自动管理状态与next()逻辑，提升代码可读性与灵活性。
JavaScript中的迭代协议，说白了，就是一套约定，它让任何对象都能定义自己的遍历行为。核心在于实现一个特定的方法：
[Symbol.iterator]
。只要一个对象有这个方法，并且这个方法能返回一个符合迭代器协议的对象，那它就是“可迭代对象”。这意味着你可以用
for...of
循环它，或者用展开运算符（
...
）来解构它，就像处理数组一样。这套机制让数据消费变得非常统一和灵活。
迭代协议的实现机制
要让一个JavaScript对象变得可迭代，你需要给它添加一个名为
[Symbol.iterator]
的方法。这个方法必须是一个函数，并且它被调用时，必须返回一个“迭代器”对象。
那么，什么是迭代器呢？迭代器本身也是一个对象，它必须包含一个
next()
方法。每次调用这个
next()
方法时，它都应该返回一个包含两个属性的对象：
value
: 这是当前迭代到的值。
done
: 这是一个布尔值，表示迭代是否已经完成。如果迭代结束，
done
就应该是
true
；否则，就是
false
。
举个例子，假设我们想创建一个简单的计数器，让它能从某个数字开始，数到另一个数字：
function createCounter(start, end) { let current = start; return { [Symbol.iterator]() { // 这就是可迭代协议的关键 return { // 返回一个迭代器对象 next() { // 迭代器对象必须有next方法 if (current <= end) { return { value: current++, done: false }; } else { return { value: undefined, done: true }; } } }; } };}const myCounter = createCounter(1, 3);for (const num of myCounter) { console.log(num); // 输出 1, 2, 3}// 也可以用展开运算符const numsArray = [...createCounter(5, 7)];console.log(numsArray); // 输出 [5, 6, 7]
这里可以看到，
createCounter
返回的对象就是可迭代的，因为它实现了
[Symbol.iterator]
。而
[Symbol.iterator]
方法返回的那个带有
next()
的对象，就是迭代器。这种分离的设计很常见，让你可以控制迭代的状态。
for...of
for...of
循环是如何与迭代协议协同工作的？
for...of
循环是ES6引入的，它专门用来遍历可迭代对象。它的工作原理其实非常直接，但又很巧妙。当你写下
for (const item of someIterableObject)
时，JavaScript引擎在幕后做了几件事：
它会首先尝试调用
someIterableObject
的
[Symbol.iterator]()
方法。如果这个方法不存在，或者返回的不是一个迭代器对象，那么就会抛出一个错误，告诉你这个对象不是可迭代的。
如果成功获取到迭代器，
for...of
就会反复调用这个迭代器的
next()
方法。每次调用，它都会检查
next()
返回的对象中的
done
属性。
如果
done
是
false
，那么
value
属性的值就会被赋给
item
变量，然后循环体内的代码会被执行。如果
done
是
true
，这意味着迭代已经完成，
for...of
循环就会终止。
这与传统的
for...in
循环形成鲜明对比。
for...in
是用来遍历对象属性名的，它会枚举对象自身以及原型链上的可枚举属性。而
for...of
则完全聚焦于数据集合的“值”本身，它不关心属性名，只关心通过迭代协议暴露出来的数据序列。这使得
for...of
在处理数组、字符串、Map、Set以及你自定义的任何可迭代数据结构时，都能提供一种统一且直观的遍历方式。在我看来，这是现代JavaScript中处理数据流非常基础且强大的一个抽象。
如何利用生成器函数更简洁地创建可迭代对象？
手动实现迭代器的
next()
方法，尤其是当迭代逻辑比较复杂时，可能会显得有些冗长和容易出错。JavaScript为此提供了一个语法糖，也就是“生成器函数”（Generator Function），它能极大地简化可迭代对象的创建过程。
生成器函数使用
function*
语法定义，并且在函数体内部，你可以使用
yield
关键字来“产出”值。每次
yield
一个值，生成器函数就会暂停执行，并返回这个值作为迭代器结果的
value
，同时
done
会被自动设为
false
。当再次调用迭代器的
next()
方法时，生成器函数会从上次暂停的地方继续执行，直到遇到下一个
yield
或函数结束。如果函数执行完毕（没有更多的
yield
），那么返回的
done
就会是
true
。
这意味着，一个生成器函数本身在被调用时，就会返回一个迭代器对象，这个对象已经自动实现了
next()
方法。所以，要创建一个可迭代对象，你只需要让它的
[Symbol.iterator]
方法是一个生成器函数即可。
// 还是那个计数器，用生成器函数实现function createCounterWithGenerator(start, end) { return { [Symbol.iterator]: function* () { // [Symbol.iterator] 现在是一个生成器函数 for (let i = start; i <= end; i++) { yield i; // 每次yield一个值，就会暂停并返回 } } };}const myGenCounter = createCounterWithGenerator(10, 12);for (const num of myGenCounter) { console.log(num); // 输出 10, 11, 12}// 或者更直接地，生成器函数本身就是迭代器function* simpleGenerator() { yield 'Hello'; yield 'World'; yield '!';}const gen = simpleGenerator(); // 调用生成器函数直接返回一个迭代器console.log(gen.next()); // { value: 'Hello', done: false }console.log(gen.next()); // { value: 'World', done: false }console.log(gen.next()); // { value: '!', done: false }console.log(gen.next()); // { value: undefined, done: true }// 甚至可以直接用for...of遍历生成器函数返回的迭代器for (const item of simpleGenerator()) { console.log(item); // 输出 Hello, World, !}
在我看来，生成器函数简直是迭代器协议的“最佳拍档”。它把复杂的迭代逻辑，特别是那些需要维护内部状态的遍历，用一种更接近同步代码的直观方式表达出来。你不再需要手动管理
value
和
done
，
yield
关键字和生成器函数的执行流程帮你把这些都处理好了。这不仅提升了代码的可读性，也大大降低了实现自定义迭代器的心智负担。当你需要处理任何形式的数据流，无论是从文件读取、网络请求分块，还是简单的数字序列，生成器函数都能提供一种非常优雅的解决方案。
以上就是JS如何实现迭代协议？可迭代对象的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1517206.html
微信扫一扫 
支付宝扫一扫 
