JavaScript 迭代器:实现可迭代对象与迭代器协议

迭代器协议要求对象有next方法返回{value, done},可迭代协议要求对象实现Symbol.iterator方法;2. for…of通过Symbol.iterator获取迭代器并调用next遍历;3. 示例Counter类通过Symbol.iterator返回带next方法的对象实现遍历。

javascript 迭代器:实现可迭代对象与迭代器协议

在 JavaScript 中,迭代器(Iterator)和可迭代对象(Iterable)是处理集合数据的核心机制。它们让数组、字符串、Map 等原生类型可以被 for…of 循环遍历,同时也为自定义数据结构提供统一的迭代方式。理解并实现迭代器协议,有助于写出更灵活、兼容性更强的代码。

什么是迭代器协议与可迭代协议?

JavaScript 使用两个相关但不同的协议来定义如何遍历对象:

可迭代协议(Iterable Protocol):规定一个对象是否可被遍历。只要对象实现了 Symbol.iterator 方法,它就是可迭代的。 迭代器协议(Iterator Protocol):定义一个对象如何逐个返回值,并表明是否遍历完成。迭代器必须有 next() 方法,返回格式为 { value: any, done: boolean } 的对象。

当你在 for…of 中使用一个对象时,JavaScript 会自动调用它的 [Symbol.iterator]() 方法获取迭代器,然后反复调用该迭代器的 next() 方法,直到 done: true。

手动实现一个可迭代对象

下面是一个简单的计数器类,它既是可迭代对象,也返回一个符合迭代器协议的对象:

立即学习“Java免费学习笔记(深入)”;

class Counter {  constructor(start, end) {    this.start = start;    this.end = end;  }  [Symbol.iterator]() {    let current = this.start;    const end = this.end;    return {      next() {        if (current <= end) {          return { value: current++, done: false };        } else {          return { value: undefined, done: true };        }      }    };  }}// 使用示例const counter = new Counter(1, 3);for (const num of counter) {  console.log(num); // 输出 1, 2, 3}

这里,Counter 类实现了 [Symbol.iterator] 方法,每次调用都返回一个新的迭代器对象。这样就能支持多次遍历,互不干扰。

让自定义数据结构可迭代

假设你写了一个简单的范围类 Range,表示一个整数区间。为了让它能被 for…of 遍历,只需加上 [Symbol.iterator]:

class Range {  constructor(from, to) {    this.from = from;    this.to = to;  }  [Symbol.iterator]() {    let value = this.from;    return {      next: () => {        if (value <= this.to) {          return { value: value++, done: false };        }        return { done: true };      }    };  }}const range = new Range(5, 8);console.log([...range]); // [5, 6, 7, 8]

现在 Range 实例可以用于展开运算符、for…of、Array.from() 等所有接受可迭代对象的地方。

迭代器的复用与状态管理

注意,每个 [Symbol.iterator]() 调用应返回一个独立的迭代器。这保证了多个循环不会互相影响:

const r = new Range(1, 2);const iter1 = r[Symbol.iterator]();const iter2 = r[Symbol.iterator]();console.log(iter1.next()); // { value: 1, done: false }console.log(iter2.next()); // { value: 1, done: false } —— 不受影响

如果返回的是同一个迭代器实例,第二次遍历时可能已经结束。因此通常在 [Symbol.iterator] 内部创建并返回新的迭代器对象,确保状态隔离。

基本上就这些。掌握迭代器协议后,你可以让任何数据结构融入 JavaScript 的遍历生态,写出更自然、更通用的 API。不复杂但容易忽略。

以上就是JavaScript 迭代器:实现可迭代对象与迭代器协议的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1535888.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
MongoDB日期存储时区偏移问题解析与解决方案
上一篇 2025年12月21日 02:49:19
js中join连接多个数组
下一篇 2025年12月21日 02:49:32

相关推荐

发表回复

登录后才能评论
关注微信