JavaScript의 생성기 함수 수율 표현식 예에 대한 자세한 설명

이 글에서는 JavaScript에 대한 관련 지식을 주로 소개합니다. Generator 함수는 ES6에서 제공하는 비동기 프로그래밍 솔루션입니다. 모두를 돕습니다.

【관련 권장 사항: JavaScript 비디오 튜토리얼, web front-end】

제너레이터 함수란 무엇입니까

Javascript에서는 함수가 실행되기 시작하면 끝까지 실행되거나 실행될 때 종료됩니다. 실행 중에 다른 코드가 이를 방해할 수 없으며 외부에서 함수 본문으로 값을 전달할 수도 없습니다.

제너레이터 함수(생성기)의 출현으로 함수의 전체 실행을 중단할 수 있으며, 구문 동작은 기존 함수와 동일합니다. 완전히 다릅니다.

제너레이터 함수는 ES6에서 제공하는 비동기 프로그래밍 솔루션이기도 합니다. 형식적으로도 일반적인 함수이지만 몇 가지 주목할만한 기능이 있습니다.

• 별표가 있습니다. * 함수 키워드와 함수 이름 사이. " (함수 키워드 옆에 권장)
• 함수 본문에서 항복 표현식을 사용하여 다양한 내부 상태를 정의합니다(여러 항복이 있을 수 있음)
• 생성기 함수를 직접 호출하면 실행되지도 않고 실행 결과도 반환되지 않습니다. Iterator 객체를 반환합니다
• Generator 함수 내부의 모든 상태를 순회하려면 Iterator 객체의 다음 메서드를 호출하세요

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

위 코드에서 볼 수 있듯이 기존 함수와 Generator 함수의 동작은 전혀 다릅니다. 예, 기존 함수는 호출 직후에 실행되고 반환 값이 출력됩니다. Generator 함수는 실행되지 않고 Iterator 객체를 반환하며, 다음 메서드를 호출하여 순회합니다. Iterator 객체. 함수 본문의 실행은 "쫓겨나는 것"과 비슷합니다. 이동하는 데 한 단계만 걸리는 것처럼 느껴집니다.

  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}

위 코드는 두 개의 항복 표현식과 하나의 반환 문을 포함하는 생성기 함수를 정의합니다. 즉, 세 가지 상태가 생성됩니다)

Iterator 객체의 다음 메소드가 호출될 때마다 내부 포인터는 다음 항복 표현식 또는 return 문을 만날 때까지 함수의 헤드 또는 마지막으로 중지된 위치에서 실행을 시작합니다. 그리고 잠시 멈춘다. 즉, Generator 함수는 섹션 단위로 실행되고, Yield 표현식은 실행을 일시 중지하는 표시이며, next 메소드가 4번째 호출되면 함수가 순회 및 실행을 완료했기 때문에 실행을 재개할 수 있습니다. , 다른 상태는 없습니다. 따라서 {value: undefine, done: true}가 반환됩니다. 다음 메소드를 계속 호출하면 이 값이 반환됩니다

yield 표현식

yield 표현식은 Generator 함수에서만 사용할 수 있으며 다른 곳에서 사용하면 오류가 발생합니다

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

yield 표현식에서 사용하면 오류가 발생합니다. 다른 표현식은 괄호 안에 들어가야 합니다

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 해당 표현식은 매개변수로 사용되거나 대입 표현식의 오른쪽에 배치되며 괄호는 필요하지 않습니다

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

yield 표현식과 반환문의 차이점

은 유사: 둘 다 다음을 반환할 수 있습니다. 문 뒤의 표현식 값

차이:

yield를 만날 때마다 함수는 실행을 일시 중지하고 다음 번에는 return 문이 없는 동안 해당 위치에서 뒤로 계속 실행합니다. 위치를 기억하는 함수

• a 이 함수는 return 문을 한 번만 실행할 수 있으며, Generator 함수에는 Yield
• yield* 표현식이 얼마든지 있을 수 있습니다

Generator 함수에서 다른 Generator 함수를 호출하면, 기본적으로 아무런 효과가 없습니다

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 예제에서 for...of를 사용하여 bar 함수에 의해 생성된 traverser 개체를 순회하면 bar 자체의 상태 값 두 개만 반환됩니다. 이때 bar에서 foo를 올바르게 호출하려면 Yield* 표현식을 사용해야 합니다.

yield* 표현식은 제너레이터 함수의 또 다른 제너레이터 함수

 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

next() 메소드를 실행하는 데 사용됩니다. 매개변수

yield 표현식 자체에는 반환 값이 없거나 항상 정의되지 않은 값을 반환합니다. 다음 메소드는 매개변수를 받을 수 있으며, 이는 이전 항복 표현식의 반환 값으로 간주됩니다

  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}

다음 메소드에 매개변수가 제공되면 반환 결과는 완전히 달라집니다

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

Iterator 인터페이스와의 관계

ES6 기본 Iterator 인터페이스는 데이터 구조의 Symbol.iterator 속성에 배포되도록 규정되어 있습니다. 즉, 데이터 구조에 Symbol.iterator 속성이 있는 한 "탐색 가능한" 것으로 간주될 수 있습니다( 반복 가능).

Symbol.iterator 속성 자체는 현재 데이터 구조의 기본 반복자 생성 함수인 함수입니다. 이 함수를 실행하면 순회자가 반환됩니다.

Generator 함수를 실행하면 실제로 반복자가 반환되므로 객체가 Iterator 인터페이스를 갖도록 Generator를 객체의 Symbol.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前端】

위 내용은 JavaScript의 생성기 함수 수율 표현식 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!