function*
这种声明方式(function
关键字后跟一个星号)会定义一个生成器函数 (generator function),它返回一个 Generator
对象。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
你也可以使用构造函数 function* expression
定义生成器函数 。
语法
function* name([param[, param[, ... param]]]) { statements }
-
name
- 函数名
-
param
- 要传递给函数的一个参数的名称,一个函数最多可以有255个参数。
-
statements
- 普通JS语句。
描述
生成器函数在执行时能暂停,后面又能从暂停处继续执行。
调用一个生成器函数并不会马上执行它里面的语句,而是返回一个这个生成器的 迭代器 (iterator )对象。当这个迭代器的 next()
方法被首次(后续)调用时,其内的语句会执行到第一个(后续)出现yield*
(多了个星号),则表示将执行权移交给另一个生成器函数(当前生成器暂停执行)。
next()
方法返回一个对象,这个对象包含两个属性:value 和 done,value 属性表示本次 yield
表达式的返回值,done 属性为布尔类型,表示生成器后续是否还有 yield
语句,即生成器函数是否已经执行完毕并返回。
调用 next()
方法时,如果传入了参数,那么这个参数会传给上一条执行的 yield语句左边的变量,例如下面例子中的 x
:
function *gen(){ yield 10; x=yield 'foo'; yield x; } var gen_obj=gen(); console.log(gen_obj.next());// 执行 yield 10,返回 10 console.log(gen_obj.next());// 执行 yield 'foo',返回 'foo' console.log(gen_obj.next(100));// 将 100 赋给上一条 yield 'foo' 的左值,即执行 x=100,返回 100 console.log(gen_obj.next());// 执行完毕,value 为 undefined,done 为 true
当在生成器函数中显式 return
时,会导致生成器立即变为完成状态,即调用 next()
方法返回的对象的 done
为 true
。如果 return
后面跟了一个值,那么这个值会作为当前调用 next()
方法返回的 value 值。
示例
简单示例
function* idMaker(){ var index = 0; while(index<3) yield index++; } var gen = idMaker(); console.log(gen.next().value); // 0 console.log(gen.next().value); // 1 console.log(gen.next().value); // 2 console.log(gen.next().value); // undefined
生成器也可以接收参数:
function* idMaker(){ var index = arguments[0] || 0; while(true) yield index++; } var gen = idMaker(5); console.log(gen.next().value); // 5 console.log(gen.next().value); // 6
yield*的示例
function* anotherGenerator(i) { yield i + 1; yield i + 2; yield i + 3; } function* generator(i){ yield i; yield* anotherGenerator(i);// 移交执行权 yield i + 10; } var gen = generator(10); console.log(gen.next().value); // 10 console.log(gen.next().value); // 11 console.log(gen.next().value); // 12 console.log(gen.next().value); // 13 console.log(gen.next().value); // 20
传递参数
function *createIterator() { let first = yield 1; let second = yield first + 2; // 4 + 2 // first =4 是next(4)将参数赋给上一条的 yield second + 3; // 5 + 3 } let iterator = createIterator(); console.log(iterator.next()); // "{ value: 1, done: false }" console.log(iterator.next(4)); // "{ value: 6, done: false }" console.log(iterator.next(5)); // "{ value: 8, done: false }" console.log(iterator.next()); // "{ value: undefined, done: true }"
显式返回
function* yieldAndReturn() { yield "Y"; return "R";//显式返回处,可以观察到 done 也立即变为了 true yield "unreachable";// 不会被执行了 } var gen = yieldAndReturn() console.log(gen.next()); // { value: "Y", done: false } console.log(gen.next()); // { value: "R", done: true } console.log(gen.next()); // { value: undefined, done: true }
生成器函数不能当构造器使用
function* f() {} var obj = new f; // throws "TypeError: f is not a constructor"
使用迭代器遍历二维数组并转换成一维数组:
function* iterArr(arr) { //迭代器返回一个迭代器对象 if (Array.isArray(arr)) { // 内节点 for(let i=0; i < arr.length; i++) { yield* iterArr(arr[i]); // (*)递归 } } else { // 离开 yield arr; } } // 使用 for-of 遍历: var arr = ['a', ['b', 'c'], ['d', 'e']]; for(var x of iterArr(arr)) { console.log(x); // a b c d e } // 或者直接将迭代器展开: var arr = [ 'a', ['b',[ 'c', ['d', 'e']]]]; var gen = iterArr(arr); arr = [...gen]; // ["a", "b", "c", "d", "e"]
规范
Specification | Status | Comment |
---|---|---|
ECMAScript 2015 (6th Edition, ECMA-262) function* |
Standard | Initial definition. |
ECMAScript Latest Draft (ECMA-262) function* |
Draft |
浏览器兼容性
Desktop | Mobile | Server | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
function* |
Chrome Full support 39 | Edge Full support 13 | Firefox Full support 26 | IE No support No | Opera Full support 26 | Safari Full support 10 | WebView Android Full support Yes | Chrome Android Full support 39 | Firefox Android Full support 26 | Opera Android Full support Yes | Safari iOS Full support 10 | Samsung Internet Android Full support 4.0 | nodejs Full support 4.0.0
|
IteratorResult object instead of throwing |
Chrome Full support 49 | Edge Full support 13 | Firefox Full support 29 | IE No support No | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support 49 | Firefox Android Full support 29 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes | nodejs Full support Yes |
Not constructable with new (ES2016) |
Chrome Full support 50 | Edge Full support 13 | Firefox Full support 43 | IE No support No | Opera Full support 37 | Safari Full support 10 | WebView Android Full support 50 | Chrome Android Full support 50 | Firefox Android Full support 43 | Opera Android Full support 37 | Safari iOS Full support 10 | Samsung Internet Android Full support 5.0 | nodejs Full support Yes |
Trailing comma in parameters | Chrome Full support 58 | Edge Full support 14 | Firefox Full support 52 | IE No support No | Opera Full support 45 | Safari ? | WebView Android Full support 58 | Chrome Android Full support 58 | Firefox Android Full support 52 | Opera Android Full support 43 | Safari iOS ? | Samsung Internet Android Full support 7.0 | nodejs Full support 8.0.0 |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- User must explicitly enable this feature.
- User must explicitly enable this feature.
Firefox浏览器具体事项
Firefox 26之前的生成器和迭代器
旧版本的Firefox实施了旧版本的生成器提案。旧版中用普通的function关键字定义
(没有星号).
IteratorResult
不再抛出错误
从Gecko 29 (Firefox 29 / Thunderbird 29 / SeaMonkey 2.26)开始,完成的生成器函数不再抛出bug 958951)。
相关链接
function* expression
GeneratorFunction
object- 迭代器协议
yield
yield*
Function
objectfunction declaration
function expression
Functions and function scope
- 其他网络资源:
- Regenerator an ES2015 generator compiler to ES5
- Forbes Lindesay: Promises and Generators: control flow utopia -- JSConf EU 2013
- Hemanth.HM: The New gen of *gen(){}
- Task.js