ES6 语法详解(Generator函数)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type="text/javascript"> /** * Generator函数 * 1. ES6提供的解决异步编程方案之一 * 2. Generator函数是一个状态机,内部封装了不同状态的数据 * 3. 用来生成遍历器对象 * 4. 可以暂停函数(惰性求值), yield 可暂停 , next 方法可以启动, 每次返回的是yield后的表达式结果 * 特点: * 1. function 与函数名之间有一个星号 * 2. 内部使用yield表达式来定义不同的状态 */ // 列如 /* function* generatorFun(){ let result = yield 'hello' yield 'generator' } */ /** * 3. generator 函数返回的是指针对象(接之前的iterator),而不会执行函数内部逻辑 * 4. 调用next方法函数内部逻辑开始执行,遇到yield表达式停止,返回{value: yield后的表达式结果/undefined, done:如果后面还有yield返回false,否则返回true} * 5. 再次调用next方法会从上一次停止时的yield处开始,直到最后 * 6. yield语句返回结果通常为undefined,当调用next方法时传参内容会作为启动时yield语句的返回值 */ // 使用generator函数 function* generatorFunction(){ // 开始执行函数 console.log('function start execute!') // 第一次暂停返回 // 定义的params不是用于接收yield的返回值的,而是接收调用next方法时传入的参数的 let params = yield 'first yield' console.log(params) // 函数执行中 console.log('function executing!') // 第二次暂停返回 yield 'second yield' // 函数执行完成 console.log('function stop') return 'x stop' } // 调用generator函数,函数并不会开始执行,而是会返回一个调用指针 let point = generatorFunction() // 第一次调用next方法时开始执行,执行到调用yield的时候暂停,并返回yield后的代码执行结果或表达式结果,如果没有结果就是undefined // {value:值|undefined,done:true|false} let firstValue = point.next() console.log(firstValue) // 当yield暂停返回后如果要继续执行,就需要再次调用next函数 // 调用next传入参数 let secondValue = point.next({username: 'flower'}) console.log(secondValue) // 再次调用next 因为后面没有yield了,所以返回的是return的值 let threeValue = point.next() console.log(threeValue) /** * 对象 默认是不可以使用for of 遍历的 * 如果想要使用for of遍历 需要手动部署 iterator 函数 */ // 定义对象 let obj = { username: 'flower', age: 18, sex: 'man' } // 手动部署iterator接口 obj[Symbol.iterator] = function* (){ yield this.username yield this.age yield this.sex } // 使用for of遍历 for (let item of obj) { console.log(item) } </script> </html>
作者：彼岸舞
时间：2021\08\16
内容关于：前端知识库
本文属于作者原创,未经允许,禁止转发
