ES6：ジェネレーターとシナリオアプリケーションの概要

---

1.ジェネレーター機能

JavaScriptでは、関数の実行が開始されると、関数は最後まで実行されるか、returnが発生したときに実行され、関数の実行中に実行を一時停止できるコードはありません。
ジェネレータージェネレーター機能の出現は、そのような不可能を可能にします。
ジェネレーター関数はES6が提供する非同期プログラミングソリューションであり、その形式は通常の関数とは少し異なります。

• functionキーワードの後に​​アスタリスク（*）が続く
• yieldステートメントは関数を一時停止できます

function* fn(x) {
    
    
	yield ++x	//第一个暂停点
	yield ++x	//第二个暂停点
	yield ++x	//第三个暂停点
}
let g = fn(0)
g.next() // {value: 1, done: false}
g.next() // {value: 2, done: false}
g.next() // {value: 3, done: false}
g.next() // {value: undefined, done: true}

上記の例から次のことがわかります。

• fnジェネレーター関数では、yieldキーワードを使用して3つの一時停止ポイントが生成されます。
• また、fn関数を呼び出すと、トラバーサーオブジェクトgが返され、トラバーサーオブジェクトにはnextメソッドがあり、nextメソッドは実行を再開でき、yield式は実行を一時停止するためのマークです。
• 次の関数が呼び出されるたびに、オブジェクトが返され、オブジェクトにはvalue属性とdone属性（valueは一時停止ポイント式の値（yield後の値）を示し、doneはトラバーサルが完了）

実際、Generator関数はIteratorインターフェイスを備えたオブジェクトを返します。Generatorジェネレーターについては主にここで説明します。興味がある場合は、この記事を読んでIteratorインターフェイスとは何かを理解してください。https：//blog.csdn.net / weixin_60297362 / article / details / 122838780

次の方法

通常の状況では、次のメソッドがパラメーターを渡さない場合、yield式の戻り値は未定義です。パラメータがnextに渡されると、そのパラメータは前のステップでのyieldの戻り値として使用されます。

function* fn(x) {
    
    
	var x = yield ++x	//第一个暂停点
	console.log(x);
	var y = yield ++x	//第二个暂停点
	console.log(y);
	var z = yield ++x	//第三个暂停点
}
let g = fn(0)
console.log(g.next())
console.log(g.next(1))
console.log(g.next(2))

returnメソッド

returnメソッドは、指定された値を返し、Generator関数のトラバーサルを終了します。
returnメソッドがパラメーターを提供する場合はパラメーターを返し、パラメーターが提供されない場合はundefinedを返します。

function* fn(x) {
    
    
  yield ++x	//第一个暂停点
  yield ++x	//第二个暂停点
  yield ++x	//第三个暂停点
}
let g = fn(0)
g.next(0) // {value: 1, done: false}
g.return('foo') // {value: 'foo', done: true}
g.next()  // {value: undefined, done: true}

2.アプリケーション：Js非同期プログラミングを解く（コールバック地獄）

要件：1秒後に111を印刷、2秒後に222を印刷、3秒後に333を印刷

1.発電機なし

setTimeout(() => {
    
    
	console.log(111);
	setTimeout(() => {
    
    
		console.log(222);
    	setTimeout(() => {
    
    
			console.log(333);
		}, 3000)
	}, 2000)
}, 1000)

2.ジェネレータージェネレーターを使用する

function one() {
    
    
  setTimeout(() => {
    
    
    console.log(111);
    iterator.next() //执行第二个暂停点
  },1000)
}
function two() {
    
    
  setTimeout(() => {
    
    
    console.log(222);
    iterator.next() //执行第三个暂停点
  },2000)
}
function three() {
    
    
  setTimeout(() => {
    
    
    console.log(333);
  },3000)
}

function * gen() {
    
    
    yield one()
    yield two()
    yield three()
}
let iterator = gen()
iterator.next() //执行第一个暂停点