生成器

可用

2.1 生成器语法

在JavaScript中,生成器是一种特殊的函数,允许我们控制代码的执行。 它们可以暂停执行并在以后恢复,这使得它们在处理异步代码、迭代器和其他复杂任务时非常强大。

生成器通过 function* 定义(注意星号)。 在生成器内部,使用 yield 操作符来暂停执行并返回值。

生成器的声明:

JavaScript
function* generatorFunction() {
  yield 1;
  yield 2;
  yield 3;
}

创建生成器对象

调用生成器不会立即执行其主体。相反,它返回一个生成器对象, 可以用来迭代获取值:

JavaScript
const gen = generatorFunction();

2.2 使用生成器

next() 方法

next() 方法用于恢复生成器的执行直到下一个 yield 操作符。 它返回一个包含两个属性的对象:

  • value: 由 yield 操作符传递的值
  • done: 布尔值,指示生成器是否完成(true)或未完成(false

使用 next() 方法的示例:

JavaScript
function* generatorFunction() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = generatorFunction();

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()); // { value: undefined, done: true }

迭代生成器

可以使用 for...of 循环来迭代生成器的值。

迭代生成器的示例:

JavaScript
function* generatorFunction() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = generatorFunction();

for (const value of gen) {
  console.log(value);
}

// 输出: 1
// 输出: 2
// 输出: 3

返回值的示例

生成器可以用 return 操作符返回值:

JavaScript
function* generatorFunction() {
  yield 1;
  yield 2;
  return 3;
  yield 4; // 此 yield 永远不会执行
}

const gen = generatorFunction();

console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: true }
console.log(gen.next()); // { value: undefined, done: true }

2.3 复杂的生成器使用

与生成器交互

next() 方法可以接受一个参数,该参数传递给生成器并在内部使用。

传递值给生成器的示例:

JavaScript
function* generatorFunction() {
  const value1 = yield 1;
  const value2 = yield value1 + 2;
  yield value2 + 3;
}

const gen = generatorFunction();

console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next(10)); // { value: 12, done: false }
console.log(gen.next(20)); // { value: 23, done: false }
console.log(gen.next()); // { value: undefined, done: true }

错误处理

生成器允许使用 try...catch 块来处理错误。

错误处理示例:

JavaScript
function* generatorFunction() {
  try {
    yield 1;
    yield 2;
  } catch (error) {
    console.log('捕获到错误:', error);
  }
}

const gen = generatorFunction();

console.log(gen.next()); // { value: 1, done: false }
console.log(gen.throw(new Error('出了点问题'))); // 捕获到错误: Error: 出了点问题

// { value: undefined, done: true }

生成无限序列的示例

生成器可以用于创建无限值序列:

JavaScript
function* infiniteSequence() {
  let i = 0;
  while (true) {
    yield i++;
  }
}

const gen = infiniteSequence();

console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2

// 继续...

2.4 实际应用示例

示例 1: 用生成器迭代对象

JavaScript
function* objectEntries(obj) {
  const keys = Object.keys(obj);
  for (const key of keys) {
    yield [key, obj[key]];
  }
}

const obj = { a: 1, b: 2, c: 3 };
const gen = objectEntries(obj);

for (const [key, value] of gen) {
  console.log(`${key}: ${value}`);
}

// 输出:
// a: 1
// b: 2
// c: 3

示例 2: 实现简单迭代器的生成器

JavaScript
const myIterable = {
  *[Symbol.iterator]() {
    yield 1;
    yield 2;
    yield 3;
  }
};

for (const value of myIterable) {
  console.log(value);
}

// 输出: 1
// 输出: 2
// 输出: 3

在JavaScript中,生成器是一个强大的工具,用于管理代码的执行、创建迭代器和处理异步操作。理解生成器的语法和使用帮助创建更灵活和可读性更好的代码,特别是在处理数据序列和异步任务时。

1
任务
Frontend SELF ZH,  第 45 级课程 1
已锁定
数字生成器
数字生成器
1
任务
Frontend SELF ZH,  第 45 级课程 1
已锁定
动态生成器
动态生成器
评论
  • 受欢迎
你必须先登录才能发表评论
此页面还没有任何评论