Java教程

generator的分享

本文主要是介绍generator的分享,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

generator

generator yield配合使用

一、generator介绍

​ 1.generator函数式es6引入的,用于异步编程

​ 2.最大特点是可以交出函数的执行权(暂停函数)

​ 3.和普通函数写法区别

function关键字和函数名之间有一个星号
内部使用yield,定义不同的状态

本质上generator函数是一个异步任务的容器,yield命令是不同状态的分界线。

function* gen(){
	yield 'a';
	yield 'b';
	yield 'c';
	return 'd'
	
}

二、执行generator(next)

让generator执行起来,需要.next()方法(函数的启动方法),分阶段执行函数。

每次调用.next,会返回一个对象{value:any,done:boolean}

​ done:函数是否执行完

function* gen(){
	yield 'a';
	yield 'b';
	yield 'c';
	return 'd'
}

const _gen = gen();
console.log(_gen.next() );
console.log(_gen.next() );
console.log(_gen.next() );
console.log(_gen.next() );
console.log(_gen.next() );

三、next的传参

yield表达式本身没有返回值,或者说总是返回undefined。next方法可以带一个参数,该参数就会被当作上一个yield表达式的返回值,覆盖上一个yield的返回值

function* gen(){
	var n = 1;
  var x = yield n + 10;
  console.log(x,'pause1')
  yield ++n;
  console.log(x,'pause2')
	yield ++n;
}
const _gen = gen();
console.log(_gen.next() );
console.log(_gen.next('aaa'));
console.log(_gen.next() );

作用:分阶段的注入数据,让函数不同阶段给出不同的返回值。

四、迭代器(Iterator)

_gen就是一个迭代器,Generator 函数就是迭代器生成函数。不能存在于普通函数

多个迭代器之间作用域独立

五、for of

for...of循环可以自动遍历 Generator 函数运行时生成的Iterator对象,且此时不再需要调用next方法。

for (const iterator of _gen) {
  console.log(iterator,'iterator11')
}

一旦next方法的返回对象的done属性为truefor...of循环就会中止,且不包含该返回对象,所以上面代码的return语句返回的d,不包括在for...of循环之中。

六、Generator.prototype.throw()

throw方法,可以在函数体外抛出错误,然后在 Generator 函数体内捕获,可加参数

var gen = function* () {
  try {
    yield 2;
  } catch (e) {
    console.log('内部捕获', e);
  }
};

var _gen = gen();
_gen.next();


try {
  _gen.throw('a');
  _gen.throw('b');
  _gen.throw('c');
} catch (e) {
  console.log('外部捕获', e);
}
// 内部捕获 a
// 外部捕获 b

1._gen.throw抛出错误以后,没有任何try...catch代码块可以捕获这个错误,导致程序报错,中断执行。

2.throw方法抛出的错误要被内部捕获,前提是必须至少执行过一次next方法。

3…throw方法被捕获以后,会附带执行下一条yield表达式。也就是说,会附带执行一次next方法。

var gen = function* gen(){
  try {
    yield console.log('a');
  } catch (e) {
    // ...
  }
  yield console.log('b');
  yield console.log('c');
}

var _gen = gen();
_gen.next() // a
_gen.throw() // b
_gen..next() // c

七、Generator.prototype.return()

迭代器有一个return()方法,可以返回给定的值,并且终结 Generator 函数。

function* gen() {
  yield 1;
  yield 2;
  yield 3;
}

var g = gen();

console.log( g.next() )          // { value: 1, done: false }
console.log( g.return('foo')) // { value: "foo", done: true }
console.log( g.next() )       // { value: undefined, done: true }

如果return()方法调用时,不提供参数,则返回值的value属性为undefined

八、Generator的this

ES6 规定这个迭代器是 Generator 函数的实例,也继承了 Generator 函数的prototype对象上的方法。但是,如果把g当作普通的构造函数,并不会生效,因为g返回的总是遍历器对象,而不是this对象。

function* g() {
  this.a = 11;
}

g.prototype.hello = function () {
  return 'hi!';
};

let obj = g();

console.log(obj.a)
console.log(obj.hello())

九、应用

1.异步操作的同步化表达
function* loadUI() {
  showLoadingScreen();
  yield loadUIDataAsynchronously();
  hideLoadingScreen();
}
var loader = loadUI();
// 加载UI
loader.next()

// 卸载UI
loader.next()

上面代码中,第一次调用loadUI函数时,该函数不会执行,仅返回一个遍历器。下一次对该遍历器调用next方法,则会显示Loading界面(showLoadingScreen),并且异步加载数据(loadUIDataAsynchronously)。等到数据加载完成,再一次使用next方法,则会隐藏Loading界面。可以看到,这种写法的好处是所有Loading界面的逻辑,都被封装在一个函数,按部就班非常清晰。

这篇关于generator的分享的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!