一、简介

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。

Generator 函数有多种理解角度。语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。

执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。

二、基本用法

function * foo(x, y) { ··· }
function *foo(x, y) { ··· }
function* foo(x, y) { ··· }
function*foo(x, y) { ··· }

由于 Generator 函数仍然是普通函数，所以一般的写法是上面的第三种，即星号紧跟在 function 关键字后面。本书也采用这种写法。

该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象。

function* helloWorldGenerator() {yield 'hello';yield 'world';return 'ending';
}var hw = helloWorldGenerator();
console.log(hw);
console.log(hw.next());
console.log(hw.next());
console.log(hw.next());
console.log(hw.next());

helloWorldGenerator返回的是一个指针对象，可以调用 next 方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个 yield 表达式（或 return 语句）为止。

换言之，Generator 函数是分段执行的， yield 表达式是暂停执行的标记，而 next 方法可以恢复执行。

三、next传参

yield表达式本身没有返回值，或者说总是返回 undefined 。
看一个例子：

function* add(x, y){let z = yield x + y;console.log('上一个yield的结果z是：', z);return z + 1;
}
const f = add(1, 2);
console.log(f.next());
console.log(f.next());
console.log(f.next());

可以看到，使用z来接收yield(x, y)的结果，发现是undefine。

next 方法可以带一个参数，该参数就会被当作上一个 yield 表达式的返回值。
我们使用next带参数解决上面undefine问题。

function* add(x, y){let z = yield x + y;console.log('上一个yield的结果z是：', z);return z + 1;
}
const f = add(1, 2);
let z = f.next();
console.log(z);
console.log(f.next(z.value));
console.log(f.next());

四、Generator函数异步应用

ES6 诞生以前，异步编程的方法，大概有下面四种。

回调函数
事件监听
发布/订阅
Promise 对象

Generator 函数将 JavaScript 异步编程带入了一个全新的阶段。

var fetch = require('node-fetch');function* gen(){var url = 'https://api.github.com/users/github';var result = yield fetch(url);console.log(result.bio);
}var g = gen();
var result = g.next();//result.value是一个promise实例
result.value.then(function(data){return data.json();
}).then(function(data){//继续执行generator函数，传入上次结果datag.next(data);
});

而es2017提出的async函数则是 Generator 函数的语法糖，使用async配合await使得异步操作变得更加方便。

【JavaScript】Generator函数相关推荐

JavaScript 异步编程--Generator函数、async、await
JavaScript 异步编程–Generator函数 Generator(生成器)是ES6标准引入的新的数据类型,其最大的特点就是可以交出函数的执行的控制权,即:通过yield关键字标明需要暂停的语 ...
JavaScript生成器函数(generator function)
JavaScript生成器函数(generator function) 注意:数组推导式和生成器推导式建议都不要使用.都是非标准语法. 可以使用生成器函数(generator function) 语法 ...
Generator函数的语法以及异步的应用
基本概念 Generator函数是ES6提供的一种异步编程解决方案,语法行为与传统函数完全不同.Generator函数有多种理解角度.语法上,首先可以把它理解成,Generator函数是一个状态机,封 ...
Generator 函数的含义与用法
异步编程对 JavaScript 语言太重要.JavaScript 只有一根线程,如果没有异步编程,根本没法用,非卡死不可. 以前,异步编程的方法,大概有下面四种. 回调函数事件监听发布/订阅 P ...
setwindowshookex回调函数不执行_ECMAScript 6 入门教程—Generator 函数的异步应用
作者 | 阮一峰异步编程对 JavaScript 语言太重要.JavaScript 语言的执行环境是"单线程"的,如果没有异步编程,根本没法用,非卡死不可.本章主要介绍 Gener ...
Generator 函数的异步应用
异步编程对 JavaScript 语言太重要.Javascript 语言的执行环境是"单线程"的,如果没有异步编程,根本没法用,非卡死不可.本章主要介绍 Generator 函数如 ...
“睡服”面试官系列第二十篇之generator函数的异步应用（建议收藏学习）
目录 1. 传统方法 2. 基本概念 2.1异步 2.2回调函数 2.3Promise 3. Generator 函数 3.1协程 3.2协程的 Generator 函数实现 3.3Generator ...
“睡服”面试官系列第十八篇之generator函数的语法（建议收藏学习）
目录 1简介 1.1基本概念 1.2yield 表达式 1.3与 Iterator 接口的关系 2. next 方法的参数 3. for...of 循环 4. Generator.prototype. ...
async js 返回值_获取JavaScript异步函数的返回值
今天研究一个小问题: 怎么拿到JavaScript异步函数的返回值? 1.错误尝试当年未入行时,我的最初尝试: function getSomething() { var r = 0; setTim ...

【JavaScript】Generator函数

目录

一、简介

二、基本用法

三、next传参

四、Generator函数异步应用

【JavaScript】Generator函数相关推荐

最新文章

热门文章