Heim >Web-Frontend >js-Tutorial >Ausführliche Erläuterung des Beispiels für den Ertragsausdruck der Generatorfunktion in JavaScript
Dieser Artikel vermittelt Ihnen relevantes Wissen über JavaScript. Er führt Sie hauptsächlich in die detaillierte Erklärung des Yield-Ausdrucks der JS-Generator-Funktion ein. Schauen wir uns das gemeinsam an. hoffe es hilft allen.
【Verwandte Empfehlungen: JavaScript-Video-Tutorial, Web-Frontend】
In Javascript wird eine Funktion, sobald sie ausgeführt wird, bis zum Ende ausgeführt oder endet, wenn sie ausgeführt wird Begegnungen können während der Ausführung nicht unterbrochen werden, noch können Werte von außen an den Funktionskörper übergeben werden. Die Entstehung der Generatorfunktion (Generator) ermöglicht es, die vollständige Ausführung der Funktion zu unterbrechen Sein Syntaxverhalten ist das gleiche wie bei herkömmlichen Funktionen. Völlig anders
Die Generatorfunktion ist eine von ES6 bereitgestellte asynchrone Programmierlösung. Sie ist ebenfalls eine gewöhnliche Funktion, weist jedoch mehrere bemerkenswerte Merkmale auf:
Es gibt ein Sternchen „. * zwischen dem Schlüsselwort „function“ und dem Funktionsnamen weder ausgeführt noch wird das laufende Ergebnis zurückgegeben. Rufen Sie nacheinander die nächste Methode des Iterator-Objekts auf, um jeden Zustand innerhalb der Generatorfunktion zu durchlaufen. Aus dem obigen Code können Sie ersehen, dass Die Funktionsweise traditioneller Funktionen und Generatorfunktionen unterscheidet sich völlig. Ja, die traditionelle Funktion wird unmittelbar nach dem Aufruf ausgeführt und der Rückgabewert wird nicht ausgeführt, sondern gibt ein Iteratorobjekt zurück und wird durch Aufrufen der nächsten Methode durchlaufen Iterator-Objekt. Die Ausführung im Funktionskörper sieht eher aus wie „gekickt“. Es fühlt sich an, als ob es nur einen Schritt dauert, um sich zu bewegen Das heißt, es werden drei Zustände generiert)// 传统函数 function foo() { return 'hello world' } foo() // 'hello world',一旦调用立即执行 // Generator函数 function* generator() { yield 'status one' // yield 表达式是暂停执行的标记 return 'hello world' } let iterator = generator() // 调用 Generator函数,函数并没有执行,返回的是一个Iterator对象 iterator.next() // {value: "status one", done: false},value 表示返回值,done 表示遍历还没有结束 iterator.next() // {value: "hello world", done: true},value 表示返回值,done 表示遍历结束
function* gen() { yield 'hello' yield 'world' return 'ending' } let it = gen() it.next() // {value: "hello", done: false} it.next() // {value: "world", done: false} it.next() // {value: "ending", done: true} it.next() // {value: undefined, done: true}yield Der Ausdruck wird als Parameter verwendet oder auf der rechten Seite des Zuweisungsausdrucks platziert, und die Klammern sind nicht erforderlich
function (){ yield 1; })() // SyntaxError: Unexpected number // 在一个普通函数中使用yield表达式,结果产生一个句法错误yield Der Unterschied zwischen Ausdruck und Rückgabeanweisung ist ähnlich: Beide können Folgendes zurückgeben: Der Wert des Ausdrucks nach der Anweisung Unterschied:
a Die Funktion kann die Return-Anweisung nur einmal ausführen, und es kann eine beliebige Anzahl von yield
yield*-Ausdrücken in der Generatorfunktion gebenWenn Sie in der Generatorfunktion eine andere Generatorfunktion aufrufen, Es hat standardmäßig keine Auswirkungfunction* demo() { console.log('Hello' + yield); // SyntaxError console.log('Hello' + yield 123); // SyntaxError console.log('Hello' + (yield)); // OK console.log('Hello' + (yield 123)); // OK }
Der Ertragsausdruck selbst hat keinen Rückgabewert oder er gibt immer undefiniert zurück. Die nächste Methode kann einen Parameter annehmen, der als Rückgabewert des vorherigen Ertragsausdrucks betrachtet wird
function* demo() { foo(yield 'a', yield 'b'); // OK let input = yield; // OK }
Wenn der nächsten Methode ein Parameter bereitgestellt wird, ist das Rückgabeergebnis völlig anders
function* foo() { yield 'aaa' yield 'bbb' } function* bar() { foo() yield 'ccc' yield 'ddd' } let iterator = bar() for(let value of iterator) { console.log(value) } // ccc // ddd
{ let obj = {} function* gen() { yield 4 yield 5 yield 6 } obj[Symbol.iterator] = gen for(let value of obj) { console.log(value) } // 4 // 5 // 6 console.log([...obj]) // [4, 5, 6] }
传统对象没有原生部署 Iterator接口,不能使用 for...of 和 扩展运算符,现在通过给对象添加Symbol.iterator
属性和对应的遍历器生成函数,就可以使用了
由于 Generator 函数运行时生成的是一个 Iterator 对象,因此,可以直接使用 for...of 循环遍历,且此时无需再调用 next() 方法
这里需要注意,一旦 next() 方法的返回对象的 done 属性为 true,for...of 循环就会终止,且不包含该返回对象
{ function* gen() { yield 1 yield 2 yield 3 yield 4 return 5 } for(let item of gen()) { console.log(item) } // 1 2 3 4 }
Generator 函数返回的遍历器对象,还有一个 return 方法,可以返回给定的值(若没有提供参数,则返回值的value属性为 undefined),并且 终结 遍历 Generator 函数
{ function* gen() { yield 1 yield 2 yield 3 } let it = gen() it.next() // {value: 1, done: false} it.return('ending') // {value: "ending", done: true} it.next() // {value: undefined, done: true} }
应用一:假定某公司的年会上有一个抽奖活动,总共6个人可以抽6次,每抽一次,抽奖机会就会递减
按照常规做法就需要声明一个全局的变量来保存剩余的可抽奖次数,而全局变量会造成全局污染,指不定什么时候就被重新赋值了,所以往往并不被大家推荐
{ let count = 6 // 声明一个全局变量 // 具体抽奖逻辑的方法 function draw() { // 执行一段抽奖逻辑 // ... // 执行完毕 console.log(`剩余${count}次`) } // 执行抽奖的方法 function startDrawing(){ if(count > 0) { count-- draw(count) } } let btn = document.createElement('button') btn.id = 'start' btn.textContent = '开始抽奖' document.body.appendChild(btn) document.getElementById('start').addEventListener('click', function(){ startDrawing() }, false) }[object Object]
事实上,抽奖通常是每个人自己来抽,每抽一次就调用一次抽奖方法,而不是点一次就一次性就全部运行完,是可暂停的,这个不就是 Generator 函数的意义所在吗?
// 具体抽奖逻辑的方法 function draw(count) { // 执行一段抽奖逻辑 // ... console.log(`剩余${count}次`) } // 执行抽奖的方法 function* remain(count) { while(count > 0) { count-- yield draw(count) } } let startDrawing = remain(6) let btn = document.createElement('button') btn.id = 'start' btn.textContent = '开始抽奖' document.body.appendChild(btn) document.getElementById('start').addEventListener('click', function(){ startDrawing.next() }, false)
应用二:由于HTTP是一种无状态协议,执行一次请求后服务器无法记住是从哪个客户端发起的请求,因此当需要实时把服务器数据更新到客户端时通常采用的方法是长轮询和Websocket。这里也可以用 Generator 函数来实现长轮询
{ // 请求的方法 function* ajax() { yield new Promise((resolve, reject) => { // 此处用一个定时器来模拟请求数据的耗时,并约定当返回的json中code为0表示有新数据更新 setTimeout(() => { resolve({code: 0}) }, 200) }) } // 长轮询的方法 function update() { let promise = ajax().next().value // 返回的对象的value属性是一个 Promise 实例对象 promise.then(res => { if(res.code != 0) { setTimeout(() => { console.log('2秒后继续查询.....') update() }, 2000) } else{ console.log(res) } }) } update() }
【相关推荐:JavaScript视频教程、web前端】
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des Beispiels für den Ertragsausdruck der Generatorfunktion in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!