Es6 Generator函数详细解析
程序员文章站
2022-07-05 16:30:43
ecmascript 6 (简称 es6 )作为下一代 javascript 语言,将 javascript 异步编程带入了一个全新的阶段。
generator函数跟普通...
ecmascript 6 (简称 es6 )作为下一代 javascript 语言,将 javascript 异步编程带入了一个全新的阶段。
generator函数跟普通函数的写法有非常大的区别:
一是,function关键字与函数名之间有一个星号;
二是,函数体内部使用yield语句,定义不同的内部状态(yield在英语里的意思就是“产出”)。
本文重点给大家介绍es6 generator函数,具体内容如下所示:
/* 一、generator函数的定义 1.generator 函数是 es6 提供的一种异步编程解决方案,语法行为与传统函数完全不同 2.形式上,generator 函数是一个普通函数,但是有两个特征。一是,function关键字与函数名之间有一个星号;二是,函数体内部使用yield表达式,定义不同的内部状态 */ //定义一个generator函数 其内部有3种状态 var hellogenerator = function *() { var next1 = yield 'hello'; yield 'world' + next1; return 'ending'; } //调用generator 函数和普通函数一样,直接加上双括号 () 但是跟普通函数的区别是generator不会立即执行, 返回的也不是函数的结果,而是内部的一个指针。 var newgenerator = hellogenerator(); //generator 函数是分段执行的 会从头部直到遇到下一个yield 表达式的时候停止下来。 console.log(newgenerator.next('hahh')); //object {value: "hello", done: false} console.log(newgenerator.next()); // {value: "worldhahh", done: false} console.log(newgenerator.next()); //{value: "ending", done: true} done true| false true代表的意思内部yield 表达式已经执行完毕 false则相反 console.log(newgenerator.next()); //{value: "undefined", done: true} /* 总结一下,调用 generator 函数,返回一个遍历器对象,代表 generator 函数的内部指针。以后,每次调用遍历器对象的next方法,就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值,是yield表达式后面那个表达式的值;done属性是一个布尔值,表示是否遍历结束。 */ /* 二、yield 表达式 1.由于 generator 函数返回的遍历器对象,只有调用next方法才会遍历下一个内部状态,所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。 遍历器对象的next方法的运行逻辑如下。 (1)遇到yield表达式,就暂停执行后面的操作,并将紧跟在yield后面的那个表达式的值,作为返回的对象的value属性值。 (2)下一次调用next方法时,再继续往下执行,直到遇到下一个yield表达式。 (3)如果没有再遇到新的yield表达式,就一直运行到函数结束,直到return语句为止,并将return语句后面的表达式的值,作为返回的对象的value属性值。 (4)如果该函数没有return语句,则返回的对象的value属性值为undefined。 2.yield 表达式和 return 语句的区别: return 不具有记忆功能, yield 具有记忆功能,下次调用next()方法的时候会接着往下执行。 一个函数里面只能执行一个return 语句 可以执行多个yield 表达式。 yield 函数只能用在generator 函数里面不能用在其他函数里面,不然会报错。 */ /* 三、与 iterator 接口的关系 任意一个对象的symbol.iterator方法,等于该对象的遍历器生成函数,调用该函数会返回该对象的一个遍历器对象。由于 generator 函数就是遍历器生成函数,因此可以把 generator 赋值给对象的symbol.iterator属性,从而使得该对象具有 iterator 接口。 */ var myiterable = {}; myiterable[symbol.iterator] = function* () { yield 1; yield 2; yield 3; }; console.log([...myiterable]) // [1, 2, 3] /* 四、next 方法的参数 yield表达式本身没有返回值,或者说总是返回undefined。next方法可以带一个参数,该参数就会被当作上一个yield表达式的返回值。 意义:可以在 generator 函数运行的不同阶段,从外部向内部注入不同的值,从而调整函数行为。 */ function* foo(x) { var y = 2 * (yield (x + 1)); var z = yield (y / 3); return (x + y + z); } var a = foo(5); a.next() // object{value:6, done:false} a.next() // object{value:nan, done:false} a.next() // object{value:nan, done:true} var b = foo(5); b.next() // { value:6, done:false } b.next(12) // { value:8, done:false } b.next(13) // { value:42, done:true } /* 五、for...of 循环 for...of循环可以自动遍历 generator 函数时生成的iterator对象,且此时不再需要调用next方法。(有点类似于 ... 对象的扩展运算符) */ function* foo() { yield 1; yield 2; yield 3; yield 4; yield 5; return 6; } for (let v of foo()) { console.log(v); } // 1 2 3 4 5 //上面代码使用for...of循环,依次显示 5 个yield表达式的值。这里需要注意,一旦next方法的返回对象的done属性为true,for...of循环就会中止,且不包含该返回对象,所以上面代码的return语句返回的6,不包括在for...of循环之中。 //除了for...of循环以外,扩展运算符(...)、解构赋值和array.from方法内部调用的,都是遍历器接口。这意味着,它们都可以将 generator 函数返回的 iterator 对象,作为参数。 function* numbers () { yield 1 yield 2 return 3 yield 4 } // 扩展运算符 [...numbers()] // [1, 2] // array.from 方法 array.from(numbers()) // [1, 2] // 解构赋值 let [x, y] = numbers(); x // 1 y // 2 // for...of 循环 for (let n of numbers()) { console.log(n) } // 1 // 2 /* 六、generator.prototype.throw() */ function *testerror(){ try{ yield ; }catch (e){ console.log(e) } } var teste = testerror(); teste.throw(new error('会出错吗?'));// 会出错吗? 这个错误是由generator 函数的内部捕获的。 /* 七、generator.prototype.return() generator 函数返回的遍历器对象,还有一个return方法,可以返回给定的值,并且终结遍历 generator 函数。 */ function* gen() { yield 1; yield 2; yield 3; } var g = gen(); g.next() // { value: 1, done: false } g.return('foo') // { value: "foo", done: true } g.next() // { value: undefined, done: true }
总结
以上所述是小编给大家介绍的es6 generator函数详细解析,希望对大家有所帮助
上一篇: 帅哥你这是在干嘛呢
下一篇: Windows10用cmd命令查看系统盘