JavaScript のジェネレーター関数の詳細な理解

この記事では、JavaScript のジェネレーター関数について詳しく説明します。一定の参考値があります。困っている友人は参照してください。お役に立てれば幸いです。

この記事は、ES6 のジェネレーター関数の概要と理解について説明しています...

ジェネレーター関数の定義

Ruan Yifeng 先生の The本にはこう書かれています:
ジェネレーター関数には複数の理解角度があります。構文的には、Generator 関数が複数の内部状態をカプセル化するステート マシンであることがまず理解できます。 Generator 関数を実行すると、トラバーサー オブジェクトが返されます。つまり、Generator 関数は、ステート マシンに加えて、トラバーサー オブジェクト生成関数でもあります。返されたトラバーサー オブジェクトは、ジェネレーター関数内の各状態を順番にトラバースできます。

私の理解:
ジェネレーター関数は次のように理解できます。関数の内部は複数の小さな関数で構成されており、関数の内部を複数のブロック領域に分割するために yield キーワードが使用されます。関数が実行されると、yield に遭遇すると停止し、yield の後に式の結果を出力します (もちろん next() メソッドは外部から呼び出す必要があります); 次回 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 キーワードの理解について

yield pass value

yield Output value

## 栗をあげます:

     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 の async 関数のような簡単な例です。 ; 彼はジェネレータです 関数の応用であり、実際にはジェネレータ関数の糖衣構文です。

ES6 入門から例を借用: ファイルを読み取る 2 つの方法

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 関数は、Generator 関数のアスタリスク (*) を async に置き換え、 yield を置き換えます。 await を使用すると、使用が大幅に容易になります。

async await を使用して、通常の非同期コードを実装できます...

たとえば、データを取得するための vue での ajax リクエスト

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

この記事はここで終了ですこれですべて終了です。その他のエキサイティングなコンテンツについては、PHP 中国語 Web サイトの J

JavaScript チュートリアル ビデオ 列に注目してください。

以上がJavaScript のジェネレーター関数の詳細な理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。