静态网站托管平台,上海注册公司核名在哪个网站,114在线查询电话,网络运维工程师证Generator 一、Generator 是什么#xff1f;1.1 与普通函数写法不一样#xff0c;有两个不同 二、Generator 使用2.1 书写方法 三、yield语句3.1 yield和return3.2 注意事项3.3 yield*语句3.4 yield*应用 四、next方法4.1参数4.2 运行逻辑 五、异步解决方案六、Generator相关… Generator 一、Generator 是什么1.1 与普通函数写法不一样有两个不同 二、Generator 使用2.1 书写方法 三、yield语句3.1 yield和return3.2 注意事项3.3 yield*语句3.4 yield*应用 四、next方法4.1参数4.2 运行逻辑 五、异步解决方案六、Generator相关面试题1. 对Iterator、Generator、Async/Await的理解2. Generator 是怎么做到中断和恢复 总结 一、Generator 是什么
Generator 函数是 ES6 提供的一种异步编程解决方案最大特点交出函数的执行权。
和普通函数不一样的是必须调用next()才会执行函数。
1.1 与普通函数写法不一样有两个不同
function与函数名之间有个*号 不同于普通函数可暂停执行所以加*区别。Generator 函数体内部使用yield语句可以定义不同的内部状态其实就是数据不同。 函数内部的状态就是函数内部的值它在不同的时候是不一样的。
本质上整个Generator函数就是一个封装的异步任务或者说是异步任务的容器。 yield的命令是异步不同阶段的分界线有时把yield的当成return。
二、Generator 使用
2.1 书写方法 函数名和方法中间有个 *号但没规定放置的位置一般跟在function后面 调用Generator 函数函数并不执行返回的是一个指向内部状态指针的对象遍历器对象 function* test(){let n 1;yield n;yieldn;yield--n;return n;
}let t test();
console.log(t); //test {suspended}返回的是一个对象并且有next, returnthrow方法 想打印值必须调用next方法使指针下一个状态。也就是每次调用都从上一个指针状态yield开始,遇到下一个yield或return语句为止。也就是一段段段执行yield暂停next继续执行。 下面调用6次一个yield一个状态。返回一个对象value代表值done代表是否遍历结束true结束false未结束
done为true已经代表函数结束再打印几次值都为undefined
console.log(t.next()); //{value: 1, done: false}
console.log(t.next()); //{value: 2, done: false}
console.log(t.next()); //{value: 1, done: false}
console.log(t.next()); //{value: 1, done: true}
console.log(t.next()); //{value: undefined, done: true}
console.log(t.next()); //{value: undefined, done: true}三、yield语句
yield语句就是暂停标志。
3.1 yield和return
相同点
都能返回后面表达式的值。
不同点
yield的函数暂停执行时下一次会从该位置继续向后执行并且一个函数可有多个yield语句。return返回就相当于结束函数一个函数只有一个return。
3.2 注意事项
yield后面n1不会执行只有调用next方法才会执行。
function* test() {let n 1;yield n 1;console.log(n);
}
test(); //此时打印是空白的//必须调用next方法才会执行
console.log(test().next()); //{value: 2, done: false}2.可以不用yield但是必须调用next方法才会执行
function* test() {let n 1;console.log(n);
}
let t test();
console.log(t.next());yield语句不能用在普通函数中。
function test() {yield 1;
}
console.log(test()); // Unexpected number3.3 yield*语句
Generator 函数内部调用另一个Generator 函数默认情况无效。
function* A(){yield 1;yield 2;
}
function* B(){yield 3;A();yield 4;
}
for(let i of B()){console.log(i)
}
//3
//4虽然在B函数中调用了A但只能打印出3,4。如果想要调用就要在前面使用yield*语句。
function* A(){yield 1;yield 2;
}
function* B(){yield 3;yield* A();yield 4;
}
for(let i of B()){console.log(i)
}
//3
//1
//2
//4yield*是for…of…的一种简写形式我们知道for…of…可以遍历出具有iterator接口的数据结构数组类数组对象字符串nodelist等
3.4 yield*应用
数组扁平化
let a [1,[1,2],[1,2,3]]
function* iterTree(arr){if(Array.isArray(arr)){for(let i 0;iarr.length;i){yield* iterTree(arr[i]);}}else{yield arr;}
}
for(let i of iterTree(a)){console.log(i)
}遍历完全二叉树
// 构建树
function Tree(left,middle,right){this.left left;this.middle middle;this.right right;
}
// 中序遍历函数
function* inorder(t){if(t){yield* inorder(t.left);yield t.middle;yield* inorder(t.right);}
}
// 生成二叉树
function make(array){if(array.length 1) return new Tree(null,array[0],null);return new Tree(make(array[0]),array[1],make(array[2]));
}
let tree make([[[a],b,[c]],d,[[e],f,[g]]]);
// 遍历二叉树
var result [];
for(let node of inorder(tree)){result.push(node);
}
console.log(result) //[a, b, c, d, e, f, g]四、next方法
next方法是使指针指向下一个状态。除了for…of遍历出来必须调用next才能打印出yield值。
4.1参数
yield语句本身没有返回值或者总返回undefined。next方法可以带一个参数这个参数会被当上一个yield语句的返回值。
function* test(x) {var a yield x-1;var b yield (a2);return ab;
}
let t test(4);
console.log(t.next()) //{value: 3, done: false}
console.log(t.next(10)) //{value: 12, done: false}
console.log(t.next(4)) //{value: 14, done: true}第一步传个4进去x-13打印出来为3 第二步传个10进去这个参数会被当上一个yield语句的返回值也就是a的值为10a2,打印出来为12。 第三步传个4进去上一个参数b的值为4a的值为之前的10ab为14。
4.2 运行逻辑
遇到yield表达式就暂停执行后面的操作并将紧跟在yield后面的那个表达式的值作为返回的对象的value属性值。下一次调用next方法时再继续往下执行直到遇到下一个yield表达式。 如果没有再遇到新的yield表达式就一直运行到函数结束直到return语句为止并将return语句后面的表达式的值作为返回的对象的value属性值。如果该函数没有return语句则返回的对象的value属性值为undefined
五、异步解决方案
我们之前知道有以下几种异步解决方案
回调函数 所谓回调函数就是把任务的第二段单独写在一个函数里面等到重新执行这个任务的时候再调用这个函数。
fs.readFile(/etc/fstab, function (err, data) {if (err) throw err;fs.readFile(/etc/shells, function (err, data) {if (err) throw err;console.log(data);});
});readFile函数的第三个参数就是回调函数等到操作系统返回了/etc/fstab这个文件以后回调函数才会执行。
Promise 对象 Promise就是为了解决回调地狱而产生的将回调函数的嵌套改成链式调用。
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);});});
};readFile(/etc/fstab).then(data {console.log(data)return readFile(/etc/shells)
}).then(data {console.log(data)
})async/await
const asyncReadFile async function () {const f1 await readFile(/etc/fstab);const f2 await readFile(/etc/shells);console.log(f1.toString());console.log(f2.toString());
};generator 函数 yield表达式可以暂停函数执行next方法用于恢复函数执行这使得Generator函数非常适合将异步任务同步化。
const gen function* () {const f1 yield readFile(/etc/fstab);const f2 yield readFile(/etc/shells);console.log(f1.toString());console.log(f2.toString());
};区别 通过上述代码进行分析将promise、Generator、async/await进行比较 promise和async/await是专门用于处理异步操作的 Generator并不是为异步而设计出来的它还有其他功能对象迭代、控制输出、部署Interator接口… promise编写代码相比Generator、async更为复杂化且可读性也稍差 Generator、async需要与promise对象搭配处理异步情况 async实质是Generator的语法糖相当于会自动执行Generator函数 async使用上更为简洁将异步代码以同步的形式进行编写是处理异步编程的最终方案
六、Generator相关面试题
1. 对Iterator、Generator、Async/Await的理解
1. Iterator
Iterator 是一个循环接口任何实现了此接口的数据都可以被 for of 循环遍历;
我们常用的 for…of 循环都是通过调用被循环对象的一个特殊函数 Iterator 来实现的但是以前这个函数是隐藏的我们无法访问从 Symbol 引入之后我们就可以通过 Symbol.iterator 来直接读写这个特殊函数。
循环语句来说他并不关心被循环的对象到底是什么他只负责调用 data[Symbol.iterator] 函数然后根据返回值来进行循环。
let obj {}
obj[Symbol.iterator] function() {let index 1;return {next() {return {done: index 5,value: index}}}
}
for (var i of obj) {console.log(i,obj);
}2. Generator
Generator 可以看做是一个更加灵活的 Iterator 他们之间是可以互相替代的但是 Generator 由于可以通过 yield 随时暂停因此可以很方便进行流程控制和状态管理而 Iterator 就可能需要你写更多的代码进行相同的操作。
3. Async/Await async是Generator 的一个语法糖 async 对应的是 *await 对应的是 yield
async function count () {let a await 1;let b await 2;return ab
}2. Generator 是怎么做到中断和恢复
通过使用 yield 表达式来实现中断和恢复执行的功能。
当 Generator 函数被调用时它并不会立即执行而是返回一个迭代器对象。每次调用迭代器对象的 next() 方法时Generator 函数会从上一次执行的位置继续执行直到遇到下一个 yield 表达式或函数结束。此时Generator 函数将返回一个包含当前值和执行状态的对象其中 value 属性表示 yield 表达式的结果done 属性表示是否执行完毕。 总结
Generator 函数是一种异步编程解决可以更好的控制函数执行。其中yield是同步的调用next()才能打印出值。
函数返回的是一个对象而next方法返回的也是一个对象其中有value值done是否遍历完。
一个next对应一个yield语句当最后done为true时再调用next方法值都是undefined。全部遍历可使用for…of其原理还是数据结构内部有iterator接口。
