10.Generator
10.1.Generator是什么？
Generator函數(shù)是ES6提供的一種異步編程解決方案。在它的內(nèi)部封裝了多個狀態(tài)，因此，又可以理解為一種狀態(tài)機(jī)，執(zhí)行Generator函數(shù)后返回一個迭代器對象，使用這個迭代器對象可以遍歷出Generator函數(shù)內(nèi)部的狀態(tài)
Generator函數(shù)和傳統(tǒng)函數(shù)的不同點有：1 函數(shù)定義的時候，function關(guān)鍵字后面加“*”， 2 內(nèi)部使用yield關(guān)鍵字定義內(nèi)部狀態(tài)
function* HelloGenerator() {
yield "狀態(tài)1";
yield "狀態(tài)2";
yield "狀態(tài)3";
yield "狀態(tài)4";
}
let hg = HelloGenerator();
console.log(hg.next()); //{value: "狀態(tài)1", done: false}
console.log(hg.next()); //{value: "狀態(tài)2", done: false}
console.log(hg.next()); //{value: "狀態(tài)3", done: false}
console.log(hg.next()); //{value: "狀態(tài)4", done: false}
console.log(hg.next()); //{value: undefined, done: true}
Generator函數(shù)被調(diào)用后，并不會立即執(zhí)行完成，而是會在遇到y(tǒng)ield關(guān)鍵字后暫停，返回的也不是函數(shù)的運行結(jié)果，而是一個執(zhí)行內(nèi)部狀態(tài)的指針對象(Iterator對象)
注意1: next方法內(nèi)可以傳參數(shù)，這個參數(shù)的值作為上一次狀態(tài)的返回值
function* HelloGenerator() {
let result = yield "狀態(tài)1";
console.log(result);
yield "狀態(tài)2";
yield "狀態(tài)3";
yield "狀態(tài)4";
}
let hg = HelloGenerator();
console.log(hg.next());
console.log(hg.next('nodeing'));
注意2: 可以使用for...of來遍歷Generator內(nèi)部狀態(tài)
function* HelloGenerator() {
yield "狀態(tài)1";
yield "狀態(tài)2";
yield "狀態(tài)3";
yield "狀態(tài)4";
}
let hg = HelloGenerator();
for( let i of hg){
console.log(i);
}
注意3: 對象沒有Symbol.Iterator屬性，我們可以手動添加，讓其具有Iterator接口
let obj = {};
function* gen() {
yield 1;
yield 2;
yield 3;
yield 4;
}
obj[Symbol.iterator] = gen;
for(let a of obj){
console.log(a);
}
10.2.Generator應(yīng)用
1.限制抽獎次數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">抽獎</button>
<input type="text" id="ipt">
<script>
let oBtn = document.getElementById('btn');
let oIpt = document.getElementById('ipt');
let start = gen(5);
let timmer = null;
oBtn.onclick = () => {
start.next();
};
function draw(count) {
clearInterval(timmer);
let num = Math.floor(Math.random() * 30);
let prize = 0;
timmer = setInterval(()=>{
prize++;
if( num === prize){
clearInterval(timmer);
alert("還可以抽"+count+"次");
return;
}
oIpt.value = prize;
}, 100);
}
function* gen(count) {
while (count > 0){
count--;
yield draw(count);
}
}
</script>
</body>
</html>
2.異步讀取文件
const fs = require('fs');
function readFile(path) {
return new Promise((resolve, reject) => {
fs.readFile(path, (err, data) => {
if(err){
reject(err)
}else {
resolve(data)
}
})
})
}
function* asyncFile() {
yield readFile('a.txt');
yield readFile('b.txt');
yield readFile('c.txt');
}
let gen = asyncFile();
gen.next().value.then((data)=>{
console.log(data.toString());
return gen.next().value;
}).then((data2)=>{
console.log(data2.toString());
return gen.next().value;
}).then((data3)=>{
console.log(data3.toString())
});
如果覺得上面的寫法還比較麻煩的話，我們可以引入一個co模塊，讓aysncFile里面的代碼自動執(zhí)行
const co = require('co');
function* asyncFile() {
let a = yield readFile('a.txt');
let b = yield readFile('b.txt');
let c = yield readFile('c.txt');
console.log(a.toString(), b.toString(), c.toString())
}
co(asyncFile()).then(()=>{
console.log('文件讀取完成')
});
