Explication détaillée de l'exemple d'expression de rendement de fonction génératrice en JavaScript

Cet article vous apporte des connaissances pertinentes sur JavaScript. Il vous présente principalement l'exemple détaillé de l'expression de rendement de la fonction JS Generator. La fonction Generator est une solution de programmation asynchrone fournie par ES6, examinons-la ensemble. aide tout le monde.

【Recommandations associées : Tutoriel vidéo JavaScript, front-end Web】

Qu'est-ce que la fonction Générateur

En Javascript, une fois qu'une fonction commence à s'exécuter, elle s'exécutera jusqu'à la fin ou se terminera lorsqu'elle les rencontres reviennent. Aucun autre code ne peut l'interrompre pendant l'exécution, et les valeurs ne peuvent pas non plus être transmises de l'extérieur dans le corps de la fonction

L'émergence de la fonction Générateur (générateur) permet d'interrompre l'exécution complète de la fonction, et son comportement syntaxique est le même que celui des fonctions traditionnelles Complètement différent

La fonction Générateur est une solution de programmation asynchrone fournie par ES6 C'est aussi une fonction ordinaire dans la forme, mais possède plusieurs fonctionnalités notables :

• Il y a un astérisque ". * entre le mot-clé de la fonction et le nom de la fonction. " (Recommandé à côté du mot-clé de la fonction)
• Utilisez des expressions de rendement dans le corps de la fonction pour définir différents états internes (il peut y avoir plusieurs rendements)
• Appelez directement la fonction Générateur et elle le fera. ne sera pas exécuté et le résultat en cours d'exécution ne sera pas renvoyé. Il renvoie un objet Iterator
• Appelez tour à tour la méthode suivante de l'objet Iterator pour parcourir chaque état à l'intérieur de la fonction Generator

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

Vous pouvez voir à partir du code ci-dessus que le le fonctionnement des fonctions traditionnelles et des fonctions Generator est complètement différent Oui, la fonction traditionnelle est exécutée immédiatement après avoir été appelée et la valeur de retour est sortie la fonction Generator n'est pas exécutée mais renvoie un objet Iterator et est parcourue en appelant la méthode suivante du Objet itérateur. L'exécution dans le corps de la fonction ressemble plus à "être expulsé". On a l'impression qu'il ne faut qu'une seule étape pour se déplacer"

  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}

Le code ci-dessus définit une fonction Generator, qui contient deux expressions de rendement et une instruction return (qui c'est-à-dire que trois états sont générés)

Chaque fois que la méthode suivante de l'objet Iterator est appelée, le pointeur interne commencera l'exécution à partir de la tête de la fonction ou de l'endroit où il s'est arrêté la dernière fois, jusqu'à ce qu'il rencontre la prochaine expression de rendement ou instruction de retour et fait une pause. En d'autres termes, la fonction Générateur est exécutée par sections, l'expression de rendement est une marque pour suspendre l'exécution et la méthode suivante peut reprendre l'exécution lorsque la méthode suivante est appelée pour la quatrième fois, puisque la fonction a terminé le parcours et l'exécution. , il n'y a pas d'autre état. Par conséquent, {value : undefined, done : true} est renvoyé. Si vous continuez à appeler la méthode suivante, cette valeur sera renvoyée

expression de rendement

l'expression de rendement ne peut être utilisée que dans la fonction Générateur, et une erreur sera signalée si elle est utilisée à d'autres endroits

function (){
    yield 1;
  })()
  // SyntaxError: Unexpected number
  // 在一个普通函数中使用yield表达式，结果产生一个句法错误

expression de rendement si elle est utilisée dans une autre expression doit être placée entre parenthèses

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

yield L'expression est utilisée comme paramètre ou placée à droite de l'expression d'affectation, et les parenthèses ne sont pas obligatoires

function* demo() {
    foo(yield 'a', yield 'b'); // OK
    let input = yield; // OK
  }

yield La différence entre l'expression et l'instruction return

est similaire : les deux peuvent renvoyer ce qui suit La valeur de l'expression après l'instruction

Différence :

Chaque fois qu'elle rencontre un rendement, la fonction suspend l'exécution et continue de s'exécuter à rebours à partir de cette position la prochaine fois tant que l'instruction return n'a pas ; la fonction de mémorisation de la position

• a La fonction ne peut exécuter l'instruction return qu'une seule fois, et il peut y avoir n'importe quel nombre d'expressions rendement
• yield* dans la fonction Générateur

Si vous appelez une autre fonction Générateur dans la fonction Générateur, cela n'aura aucun effet par défaut

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

Up Dans l'exemple, lors de l'utilisation de for...of pour parcourir l'objet traverseur généré par la fonction bar, seules les deux valeurs d'état de la barre elle-même sont renvoyées. À ce stade, si vous souhaitez appeler correctement foo in bar, vous devez utiliser l'expression rendement*

l'expression rendement* est utilisée pour

exécuter

une autre fonction Générateur

 function* foo() {
    yield 'aaa'
    yield 'bbb'
  }
  function* bar() {
    yield* foo()      // 在bar函数中 **执行** foo函数
    yield 'ccc'
    yield 'ddd'
  }
  let iterator = bar()
  for(let value of iterator) {
    console.log(value)
  }
  // aaa
  // bbb
  // ccc
  // ddd

méthode next() dans une fonction Générateur Le paramètre

l'expression de rendement elle-même n'a pas de valeur de retour, ou elle renvoie toujours undéfini. La méthode suivante peut prendre un paramètre, qui sera considéré comme la valeur de retour de l'expression de rendement précédente

  function* gen(x) {
    let y = 2 * (yield (x + 1))   // 注意：yield 表达式如果用在另一个表达式中，必须放在圆括号里面
    let z = yield (y / 3)
    return x + y + z
  }
  let it = gen(5)
  /*** 正确的结果在这里 ***/
  console.log(it.next())  // 首次调用next，函数只会执行到 “yield(5+1)” 暂停，并返回 {value: 6, done: false}
  console.log(it.next())  // 第二次调用next，没有传递参数，所以 y的值是undefined，那么 y/3 当然是一个NaN，所以应该返回 {value: NaN, done: false}
  console.log(it.next())  // 同样的道理，z也是undefined，6 + undefined + undefined = NaN，返回 {value: NaN, done: true}

Si un paramètre est fourni à la méthode suivante, le résultat de retour sera complètement différent

{
  function* gen(x) {
    let y = 2 * (yield (x + 1))   // 注意：yield 表达式如果用在另一个表达式中，必须放在圆括号里面
    let z = yield (y / 3)
    return x + y + z
  }
  let it = gen(5)
  console.log(it.next())  // 正常的运算应该是先执行圆括号内的计算，再去乘以2，由于圆括号内被 yield 返回 5 + 1 的结果并暂停，所以返回{value: 6, done: false}
  console.log(it.next(9))  // 上次是在圆括号内部暂停的，所以第二次调用 next方法应该从圆括号里面开始，就变成了 let y = 2 * (9)，y被赋值为18，所以第二次返回的应该是 18/3的结果 {value: 6, done: false}
  console.log(it.next(2))  // 参数2被赋值给了 z，最终 x + y + z = 5 + 18 + 2 = 25，返回 {value: 25, done: true}
}

La relation avec l'interface Iterator

ES6 Il est stipulé que l'interface Iterator par défaut est déployée dans la propriété Symbol.iterator de la structure de données, ou en d'autres termes, tant qu'une structure de données possède la propriété Symbol.iterator, elle peut être considérée comme "traversable" ( itérable).

L'attribut Symbol.iterator lui-même est une fonction, qui est la fonction de génération d'itérateur par défaut de la structure de données actuelle. L'exécution de cette fonction renverra un traverseur.

Étant donné que l'exécution de la fonction Generator renvoie en fait un itérateur, le Generator peut être attribué à la propriété Symbol.iterator de l'objet, afin que l'objet ait l'interface Iterator.

{
  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前端】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!