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】

Was ist die Generator-Funktion?

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)

• Jedes Mal, wenn die nächste Methode des Iterator-Objekts aufgerufen wird, beginnt der interne Zeiger mit der Ausführung am Kopf der Funktion oder dort, wo er das letzte Mal angehalten hat, bis er auf den nächsten Yield-Ausdruck oder die nächste Return-Anweisung trifft und hält inne. Mit anderen Worten: Die Generatorfunktion wird abschnittsweise ausgeführt, der Yield-Ausdruck ist eine Markierung für das Anhalten der Ausführung und die nächste Methode kann die Ausführung fortsetzen, wenn die nächste Methode zum vierten Mal aufgerufen wird, da die Funktion den Durchlauf und die Ausführung abgeschlossen hat , es gibt keinen anderen Zustand. Daher wird {Wert: undefiniert, erledigt: wahr} zurückgegeben. Wenn Sie die nächste Methode weiterhin aufrufen, wird dieser Wert zurückgegeben
• Ertragsausdruck
• Ertragsausdruck kann nur in der Generatorfunktion verwendet werden, und bei Verwendung an anderen Stellen wird ein Fehler gemeldet

  // 传统函数
  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 表示遍历结束

• Ertragsausdruck bei Verwendung in Ein anderer Ausdruck muss in Klammern gesetzt werden

  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:

Jedes Mal, wenn sie auf yield stößt, unterbricht die Funktion die Ausführung und führt die Ausführung beim nächsten Mal rückwärts von dieser Position aus fort, während dies bei der return-Anweisung nicht der Fall ist die Funktion zum Speichern der Position

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 geben

Wenn Sie in der Generatorfunktion eine andere Generatorfunktion aufrufen, Es hat standardmäßig keine Auswirkung

function* demo() {
    console.log('Hello' + yield); // SyntaxError
    console.log('Hello' + yield 123); // SyntaxError
    console.log('Hello' + (yield)); // OK
    console.log('Hello' + (yield 123)); // OK
  }

Up Wenn im Beispiel for...of zum Durchlaufen des von der Funktionsleiste generierten Traverserobjekts verwendet wird, werden nur die beiden Statuswerte der Leiste selbst zurückgegeben. Wenn Sie zu diesem Zeitpunkt foo in bar korrekt aufrufen möchten, müssen Sie den Yield*-Ausdruck verwenden

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

Die Beziehung zur Iterator-Schnittstelle
ES6 Es ist festgelegt, dass die Standard-Iterator-Schnittstelle in der Symbol.iterator-Eigenschaft der Datenstruktur bereitgestellt wird. Mit anderen Worten: Solange eine Datenstruktur über die Symbol.iterator-Eigenschaft verfügt, kann sie als „durchquerbar“ betrachtet werden ( iterierbar).
Das Symbol.iterator-Attribut selbst ist eine Funktion, die die Standard-Iterator-Generierungsfunktion der aktuellen Datenstruktur ist. Das Ausführen dieser Funktion gibt einen Traverser zurück.

Da die Ausführung der Generator-Funktion tatsächlich einen Iterator zurückgibt, kann der Generator der Symbol.iterator-Eigenschaft des Objekts zugewiesen werden, sodass das Objekt über die Iterator-Schnittstelle verfügt.

{
  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 属性和对应的遍历器生成函数，就可以使用了

for...of 循环

由于 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.prototype.return()

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}
}

Generator 函数应用举例

应用一：假定某公司的年会上有一个抽奖活动，总共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!