详解 ECMAScript 2016 的 Generator 函数及其应用场景-JavaScript中文网-JavaScript教程资源分享门户

Generator 函数是 ECMAScript 2016 中的新增特性，在前端开发中具有重要的应用场景。本文将详细介绍 Generator 函数及其应用场景，并提供示例代码。

什么是 Generator 函数？

Generator 函数是一种特殊的函数，它可以暂停执行并将控制权交出去，随后再恢复执行。Generator 函数可以通过 function* 声明来定义，其中包含了一个或多个 yield 表达式。每当执行到 yield 表达式时，Generator 函数会暂停执行，并返回一个包含了 value 和 done 两个属性的迭代器对象。value 属性表示当前的值，done 属性表示是否已经执行完毕。

以下是一个简单的 Generator 函数示例：

// javascriptcn.com 代码示例
function* generatorFunction() {
  yield 'first yield';
  yield 'second yield';
  yield 'third yield';
}

const generator = generatorFunction();

console.log(generator.next()); // { value: 'first yield', done: false }
console.log(generator.next()); // { value: 'second yield', done: false }
console.log(generator.next()); // { value: 'third yield', done: false }
console.log(generator.next()); // { value: undefined, done: true }

从上面的示例代码中可以看出，每当调用 generator.next() 方法时，Generator 函数会执行一次，并在遇到 yield 表达式时暂停执行并返回迭代器对象。

Generator 函数的应用场景

异步操作

Generator 函数可以用于异步操作，特别是处理异步操作的回调函数嵌套问题。例如，在使用 XMLHttpRequest 进行异步请求时，可以使用 Generator 函数来实现以下功能：

// javascriptcn.com 代码示例
function* ajaxGen() {
  let response1 = yield ajax("http://www.example.com/response1");
  let response2 = yield ajax(`http://www.example.com/response2?${response1}`);
  let response3 = yield ajax(`http://www.example.com/response3?${response2}`);
  return response3;
}

function ajax(url) {
  return new Promise(resolve => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        resolve(xhr.responseText);
      }
    };
    xhr.send();
  });
}

const ajaxIterator = ajaxGen();

ajaxIterator.next().value.then(response1 =>
  ajaxIterator.next(response1).value.then(response2 =>
    ajaxIterator.next(response2).value.then(response3 =>
      console.log(response3)
    )
  )
);

从代码中可以看出，Generator 函数可以将异步操作进行同步化的表达。

非连续的操作

Generator 函数还适用于非连续的操作。例如，当需要计算一个比较复杂的公式时，可以通过将每个操作拆分成多个部分并利用 Generator 函数来实现。以下是一个简单的示例代码：

// javascriptcn.com 代码示例
function* complexFormula() {
  let number = 0;
  while (true) {
    const operator = yield number;
    const operand = yield undefined;
    switch (operator) {
      case '+':
        number += operand;
        break;
      case '-':
        number -= operand;
        break;
      case '*':
        number *= operand;
        break;
      case '/':
        number /= operand;
        break;
    }
  }
}

const formula = complexFormula();

console.log(formula.next().value); // 0
formula.next('+' ).value; formula.next(1   ).value;
formula.next('-' ).value; formula.next(0.1 ).value;
formula.next('*' ).value; formula.next(10  ).value;
console.log(formula.next('/').value); // 10

从代码中可以看出，Generator 函数可以将复杂的计算操作进行拆分并同步化，使其变得更易于理解。

总结

通过本文的介绍，大家应该对 Generator 函数及其应用场景有了更深刻的理解。Generator 函数可以帮助我们解决异步操作的问题，同时也可用于拆分复杂的计算操作。在实际开发中，大家可以针对具体场景选择是否使用 Generator 函数。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6530ccb57d4982a6eb25cd6d