JavaScript의 Generator 기능에 대한 자세한 이해

이 글은 자바스크립트의 제너레이터 기능에 대한 자세한 이해를 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

이 글은 ES6의 제너레이터 함수에 대한 요약과 이해에 관한 것입니다...

제너레이터 함수의 정의

# 🎜 🎜#Ruan Yifeng 선생님의 책에는 다음과 같이 나와 있습니다.

생성기 기능은 다양한 이해 각도를 가지고 있습니다. 구문론적으로, 생성기 함수는 여러 내부 상태를 캡슐화하는 상태 머신이라는 점을 먼저 이해할 수 있습니다. Generator 함수를 실행하면 Traverser 객체가 반환됩니다. 즉, 상태 머신 외에도 Generator 함수도 Traverser 객체 생성 함수입니다. 반환된 순회 객체는 Generator 함수 내부의 각 상태를 순서대로 순회할 수 있습니다.

나의 이해:

생성기 함수는 다음과 같이 이해될 수 있습니다: 함수 내부는 여러 개의 작은 함수로 구성되며, Yield 키워드는 함수 내부를 여러 개로 나누는 데 사용됩니다. 블록 영역; 함수가 실행될 때 항복이 발생하면 중지되고 항복 후 표현식 결과가 출력됩니다(물론 다음 번에 next() 메서드를 외부에서 호출해야 함). 호출되면 실행이 중지된 위치부터 시작됩니다. (이는 함수에 메모리 함수가 있음을 의미합니다.) 다시 산출물이 발생하지 않으면 함수의 반환 값은 반복 가능한 객체입니다. 순회 객체); 저는 그것을 반복 가능한 객체 또는 탐색 가능한 객체라고 부르고 싶습니다...

반복 가능한 객체(반복자)의 next() 메서드에 대해 이야기합시다

function CreateIterator(iterator) {
    // 定义一个初始下标用来判断
    let nextIndex = 0;

    // 返回对象: 包含的next方法, 
    return {
        next: function () {
            // 返回一个对象: value是当前对象下标对应的值, done是是否遍历完成
            return nextIndex  <p style="white-space: normal;">제너레이터 함수의 사용법<strong> </strong></p><pre class="brush:php;toolbar:false">generator生成器函数的使用:
function *fn() {
    代码1; 
    yield; 
    代码2;
}
普通函数: 执行到底
生成器函数: 遇到yield会暂停,交出执行权,下次执行从上次的停止的位置继续
生成器函数返回值为: 生成器对象
生成器对象.next()方法才能执行 函数体中的代码
// 可以解决函数回调嵌套的问题; 解决耗时操作
function *func() {
    // 请求数据.
    // yield ajax() 
    // 处理数据
} 
// generator函数本质上 分割成多个小函数来执行... yield关键字前后
// 遇到yield就暂停; 没有就往下执行...
// yield 起到了 暂停函数执行的作用

수익률 키워드의 이해

yield pass value

yield 출력 값

예:

     function *g2(x, y) {        
    let sum = x+y;
    yield sum; // sum是第一个输出结果
        
    let agv = sum / 2;
    yield agv; // agv 是第二个输出的结果
    
    return {"和": sum, "平均数": agv}; // 最后一个结果
}
    
let gg2 = g2(100, 20);        
console.log(gg2.next().value);  // 120
console.log(gg2.next().value);  // 60
console.log(gg2.next().value);  // { '和': 120, '平均数': 60 }

#🎜🎜 #Generator 애플리케이션#🎜🎜 #

다음은 우리가 일반적으로 사용하는 ES7의 비동기 함수와 같은 간단한 예입니다. Generator 함수의 구문 설탕.

ES6 소개에서 예를 빌리세요: 파일을 읽는 두 가지 방법

const fs = require('fs');

const readFile = function (fileName) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fileName, function(error, data) {
      if (error) return reject(error);
      resolve(data);
    });
  });
};

// 1.使用生成器函数 读取文件
const gen = function* () {
  const f1 = yield readFile(__dirname + '/first.json');
  const f2 = yield readFile(__dirname + '/second.json');

  console.log(f1.toString());  // 没有输出; 因为 f1 拿到是一个 Iterator 对象 
  console.log(f2.toString());
};

// 使用 async + await 读取; 注意两种需配合使用
const asyncReadFile = async function () {
    const f1 = await readFile(__dirname + '/first.json');
    const f2 = await readFile(__dirname + '/second.json');

    console.log(f1.toString());  //async函数的返回值是 Promise 对象
    console.log(f2.toString());
};

gen(); // 没有值, 需要用 next()方法去取值
asyncReadFile() // 返回值 {"hello": "first"} {"hello": "second"}

여기서는 비동기 함수가 별표입니다(제너레이터 함수의 *). 비동기 및 항복을 사용하면 사용이 훨씬 쉬워집니다.

일반적인 비동기 코드를 구현하기 위해 async + Wait를 사용할 수 있습니다...

예를 들어, 데이터를 얻기 위해 vue에서 ajax 요청

methods: {
    async getApi() {
        let res = await axios.get('url')
        // 这里的执行顺序是同步的...
        console.log(res)
    }
}

이 문서는 다음과 같습니다. 더 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트의 J
avaScript 튜토리얼 비디오

컬럼을 주목하세요!

위 내용은 JavaScript의 Generator 기능에 대한 자세한 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!