JavaScript迭代器与生成器原理

迭代器是实现next方法并返回value和done的对象,用于遍历数据序列;2. 实现symbol.iterator方法可使对象可迭代,支持for…of遍历;3. 生成器函数通过yield简化迭代器创建,自动提供next方法。

JavaScript迭代器与生成器原理

javaScript中的迭代器和生成器是处理数据序列的重要工具,理解它们的原理有助于写出更高效、可读性更强的代码。

迭代器(Iterator)是什么

迭代器是一种设计模式,它允许你访问一个集合中的元素,而不需要暴露其底层结构。在javascript中,迭代器是一个对象,它实现了 next() 方法,该方法返回一个包含 valuedone 两个属性的对象:

  • value:当前步骤的值,可以是任意类型
  • done:布尔值,表示遍历是否结束

done 为 true 时,表示迭代完成,此时 value 可能存在也可能为 undefined

要让一个对象变成可迭代的,需要实现 [Symbol.iterator] 方法,该方法必须返回一个迭代器对象。数组、字符串map、Set 等原生对象都内置了这个方法,因此可以用 for…of 遍历。

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

手动创建一个迭代器

下面是一个简单的计数器迭代器示例:

 function createCounter(max) {   let count = 0;   return {     next() {       if (count < max) {         return { value: count++, done: false };       } else {         return { done: true };       }     },     [Symbol.iterator]() {       return this;     }   }; } <p>const counter = createCounter(3); for (const n of counter) { console.log(n); // 输出 0, 1, 2 }</p>

这个例子中,我们手动实现了 next 和 Symbol.iterator,使对象支持 for…of 循环

生成器(Generator)简化迭代器创建

生成器是 es6 引入的特殊函数,它可以暂停执行并恢复,极大简化了迭代器的编写。生成器函数用 function* 定义,内部使用 yield 暂停并返回值。

JavaScript迭代器与生成器原理

uBrand Logo生成器

uBrand Logo生成器是一款强大的ai智能LOGO设计工具

JavaScript迭代器与生成器原理57

查看详情 JavaScript迭代器与生成器原理

调用生成器函数不会立即执行,而是返回一个生成器对象——这个对象既是迭代器,也是可迭代对象

 function* numberGen() {   yield 1;   yield 2;   yield 3; } <p>const gen = numberGen(); console.log(gen.next()); // { value: 1, done: false } console.log(gen.next()); // { value: 2, done: false } console.log(gen.next()); // { value: 3, done: false } console.log(gen.next()); // { done: true }</p>

每次调用 next(),函数会从上次 yield 的位置继续执行,直到下一个 yield 或函数结束。

生成器的优势与实际用途

生成器不只是写迭代器更方便,还能用于:

  • 惰性求值:只在需要时计算下一个值,适合处理大数据或无限序列
  • 控制异步流程:结合 yield 和 promise,曾是 async/await 出现前的异步方案
  • 状态机管理:函数可以在多个 yield 之间保持状态

例如,实现一个无限斐波那契序列:

 function* fibonacci() {   let a = 0, b = 1;   while (true) {     yield a;     [a, b] = [b, a + b];   } } <p>const fib = fibonacci(); console.log(fib.next().value); // 0 console.log(fib.next().value); // 1 console.log(fib.next().value); // 1 console.log(fib.next().value); // 2</p>

由于是惰性生成,即使序列无限也不会崩溃。

基本上就这些。迭代器提供统一遍历接口,生成器让创建迭代器变得简单自然。两者配合,构成了现代 JavaScript 中处理序列数据的核心机制。

上一篇
下一篇
text=ZqhQzanResources