ES6 新特性之Generator

更新日期: 2019-07-27阅读: 2.5k标签: Generator

1:基本概念

实际上Generator就是遍历器的一个生成器,我们可以用Generator来生成一个遍历器。Generator有两个明显的特点:第一个是function关键字与函数名之间有一个星号,一般而言是将两者写在一起的。第二个是在函数体内部有一个yield的关键字。

    function* generator(){
        yield 1;
        yield 2;
        return 3;  //return代表next的结束,对应着Generator遍历器的结束
    }
    const firstGenerator = generator();
    //
    firstGenerator.next()
    { value: 1, done: false }
    firstGenerator.next()
    { value: 2, done: false }
    firstGenerator.next()
    { value: 3, done: true }
    firstGenerator.next()
    { value: undefined, done: true }
    firstGenerator.next()
    { value: undefined, done: true }

2:执行过程

调用Generator函数后并不执行,第一次调用不执行,只有在调用next的时候才会真正的执行。

    function* generator(){
        console.log(1);
        yield 1;
        console.log(2);
        yield 2;
        console.log(3)
        return 3;
        console.log(4);
    }
    const gen = generator();

调用next方法开始执行,指针移向下一个状态

    function* generator(){
        console.log(1);
        yield 1;
        console.log(2);
        yield 2;
        console.log(3)
        return 3;
        console.log(4);
    }
    const gen = generator();
    gen.next();
    
    // 1
       { value: 1, done: false }

执行到yield或者是return语句,每一个next只能走到下一个yield或者是直接跨到了return。

    function* generator() {
      console.log(1);
      yield 1;
      console.log(2);
      yield 2;
      console.log(3);
      return 3;
      console.log(4);
    }
    const g = generator();
    g.next();
    g.next();
    
    // 1
       2
       { value: 2, done: false }

当next时,会从上一次暂停位置开始执行,直到return,return是退出next的一个标志。

    function* generator() {
      console.log(1);
      yield 1;
      console.log(2);
      yield 2;
      console.log(3);
      return 3;
      console.log(4);
    }
    
    const g = generator();
    g.next();
    g.next();
    g.next();
    g.next();
    
    // 1
       2
       3
       { value: undefined, done: true }

3:Generator方法

next,如果传了参数被当作上一个yield表达式的返回值,说明next是可以传参数的,如果没传时undefined。
function* generator(x) {
  var y = 3 * (yield (x + 3));
  var z = yield (y / 2);
  return (x + y + z) * 2;
}

const gen1 = generator();

// gen1.next(); 
   { value: NaN, done: false } 
   gen1.next();
   { value: NaN, done: false } */
   gen1.next();
   { value: NaN, done: false } */
   gen1.next();
   { value: undefined, done: true }
function* generator(x) {
  var y = 3 * (yield (x + 3));
  var z = yield (y / 2);
  return (x + y + z) * 2;
}

const gen2 = generator(10);
gen2.next();
// { value: 13, done: false } 
/*
x = 10
13 = 10 + 3
*/

gen2.next(10);
// { value: 15, done: false }
/*
y = 30
15 = 3 * 10 / 2
*/

gen2.next(10);
// { value: 100, done: false }
/*
z = 10
100 = (10 + 10 + 30) * 2
*/
throw,函数外抛出错误在Generator函数体内捕获
function* generator(x) {
  try {
    yield;
  } catch (err) {
    console.log('inner error', err);
  }
}

const g = generator();
g.next();
// { value: undefined, done: false }

g.throw(new Error('123'))
// inner error Error: 123
return ,终结当前的Generator函数。


4:Generator函数应用

yield*,在Generator函数内部调用另一个Generator函数,无需手动遍历。
function* generator1(){
  yield* [1, 2, 3];
}
generator1().next();
// { value: 1, done: false } 

function* generator2(){
  for (var value of [1, 2, 3]) {
    yield value;
  }
}
generator2().next();
// { value: 1, done: false } 

function* generator3(){
  yield [1, 2, 3];
}
generator3().next();
// { value: Array(3), done: false }

5:Generator函数应用

for of,遍历return前的数据
function* generator() {
  yield 1;
  yield 2;
  yield 3;
  return 4;
}

for (let s of generator()) {
  console.log(s);
}
//  1
    2
    3
	```	
状态机
const status = function* () {
  while (true) {
    console.log('On');
    yield true;
    console.log('Off');
    yield false;
  }
}();
status.next();

// On
   {value: true, done: false}
网络请求
import axios from 'axios';

function* generator(){
  const url = 'https://xxx.xxx.com';
  const result = yield fetch(url);
  return result();
}


链接: https://fly63.com/article/detial/4953

JavaScript异步编程:Generator与Async

Generator与async function都是返回一个特定类型的对象:Generator: 一个类似{ value: XXX, done: true }这样结构的Object,Async: 始终返回一个Promise,使用await或者.then()来获取返回值

es6中生成器Generator的使用场景

由于Generator可以暂停函数执行,返回任意表达式的值,这使得 Generator有多种应用场景,这篇文章简单整理一些Generator的使用场景:异步操作的同步化表达、控制流管理、部署 Iterator 接口、作为数据结构

Generator函数

Generator 函数有多种理解角度。语法上,首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历 Generator 函数内部的每一个状态。

ES6 - Generator函数

Generator函数是ES6标准中提出的一种异步编程的解决方案。这种函数与普通函数最大的区别在于它可以暂停执行,又可以从暂停的位置恢复继续执行。从语法上看,Generator函数就是一个状态机,封装了许多内部状态。

es6 generator函数的异步编程

es6 generator函数,我们都知道asycn和await是generator函数的语法糖,那么genertaor怎么样才能实现asycn和await的功能呢?thunk函数 将函数替换成一个只接受回调函数作为参数的单参数函数

Generator函数的语法和应用

状态机,封装了多个内部状态;返回一个遍历器对象,通过改对象可以一次遍历Generator函数内部的每一个状态;带*号,yeild表达式定义不同的内部状态;调用 Generator 函数后,该函数并不执行,返回的也不是函数运行结果

Js Generators使用指南

最近,为了更好地理解Redux Sagas的工作原理,我重学了JavaScript generators的知识,我把从网上收集到的各种知识点浓缩到一篇文章里,我希望这篇文章既通俗易懂,又足够严谨,可以作为初学者的generators使用指南。

如何实现Generator 执行器?

虽然现在使用 async 函数 就可以替代 Generator 执行器了,不过了解下 Generator 执行器的原理还是挺有必要的。如果你不了解 Generator,那么你需要看这里。

ES6深度解析:Generators

这是一只会说话的猫的一些代码,可能是当今互联网上最重要的一种应用。它看起来有点像一个函数,对吗?这被称为生成器-函数,它与函数有很多共同之处。但你马上就能看到两个不同之处。

JS生成器简介

可以把生成器看作一个值的生产者,我们通过迭代器接口的next 调用一次提取出一个值,所以严格来讲,生成器本身并不是 iterrable,尽管执行一个生成器就得到了一个迭代器

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!