JavaScript中的迭代器通过next()方法返回value和done属性实现惰性求值,生成器函数以function*定义并使用yield暂停执行,二者结合可高效处理大量数据。
JavaScript 中的迭代器和生成器函数是处理数据序列的强大工具,尤其在面对大量或动态生成的数据时,能有效提升性能并简化代码逻辑。它们的核心优势在于实现“惰性求值”——只有在需要时才计算下一个值,而不是一次性生成所有结果。
迭代器是一个对象,遵循迭代器协议:拥有一个 next() 方法,返回包含 value 和 done 两个属性的对象。
手动创建一个简单的计数器迭代器:
function createCounter(max) {
let count = 0;
return {
next() {
if (count < max) {
return { value: count++, done: false };
} else {
return { done: true };
}
}
};
}
const counter = createCounter(3);
counter.next(); // { value: 0, done: false }
counter.next(); // { value: 1, done: false }
counter.next(); // { value: 2, done: false }
counter.next(); // { done: true }
虽然可以手动实现,但使用生成器函数更简洁、不易出错。
生成器函数用 function* 定义,调
用后返回一个生成器对象,该对象既是可迭代对象,也是迭代器。
它通过 yield 暂停执行,并在下次调用 next() 时恢复。这使得我们可以写出看起来像同步的代码,却能控制执行节奏。
用生成器重写上面的计数器:
function* counterGenerator(max) {
for (let i = 0; i < max; i++) {
yield i;
}
}
const gen = counterGenerator(3);
gen.next(); // { value: 0, done: false }
gen.next(); // { value: 1, done: false }
gen.next(); // { value: 2, done: false }
gen.next(); // { done: true }
还可以在 for...of 循环中直接使用:
for (const num of counterGenerator(3)) {
console.log(num); // 依次输出 0, 1, 2
}
生成器特别适合以下场景:
function* fibonacci() {
let a = 0, b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
}
const fib = fibonacci();
fib.next().value; // 0
fib.next().value; // 1
fib.next().value; // 1
fib.next().value; // 2
function* fetchPages(pageSize) {
let page = 1;
while (true) {
const data = await fetch(`/api/items?page=${page}&limit=${pageSize}`);
const json = await data.json();
if (json.items.length === 0) break;
yield json.items;
page++;
}
}
// 注意:生成器内不能用 async*,需封装处理
基本上就这些。掌握迭代器与生成器,能让代码更高效、更具表达力,尤其是在处理流式或大数据集时优势明显。