每天對自己多問幾個為什么，總是有著想象不到的識訓， 一個菜鳥小白的成長之路（copyer）
前言
? 今天是國慶節的第二天，回到家中，還是比較的無聊，還是寫寫代碼吧，畢竟是個代碼小白，需要學習的東西還是很多的，加油吧！
? 最近在學習redux-saga這個中間件，它其中的內部代碼的原理就是 ES6中的 generator，但是呢？我對其中的ES6的generator就有點陌生，還是不是很理解，所以還是先學習基本的語法吧，
? 其中的很多話，就是摘抄與阮一峰的ES6的講解（都標識了參考的）
基本認識
Generator 函式是 ES6 提供的一種異步編程解決方案，語法行為與傳統函式完全不同，
簡單理解：
Generator 函式是一個狀態機，封裝了多個內部狀態，
執行 Generator 函式會回傳一個
遍歷器物件，也就是說，Generator 函式除了狀態機，還是一個遍歷器物件生成函式，回傳的遍歷器物件，可以依次遍歷 Generator 函式內部的每一個狀態
generator函式的基本定義
function * foo(x, y) { ··· }
function *foo(x, y) { ··· }
function* foo(x, y) { ··· }
function*foo(x, y) { ··· }
但是呢，比較的推薦第三種，因為在vscode 的一些插件中，格式化的時候，就是格式化成第三種，
基本實體
function * foo() {
yield 'james'
yield 'kobe'
}
let it = foo()
console.log(it);
- 呼叫函式，跟普通的函式一樣
foo() - 回傳物件：一個指向內部狀態的指標物件
遍歷器物件（Iterator Object）
拿取函式內部的狀態，就必須要呼叫遍歷器物件的next()方法
必須呼叫遍歷器物件的
next方法，使得指標移向下一個狀態，也就是說，每次呼叫next方法，內部指標就從函式頭部或上一次停下來的地方開始執行，直到遇到下一個yield運算式（或return陳述句）為止，
it.next()
// { value: 'james', done: false }
it.next()
// { value: 'kobe', done: false }
it.next()
// { value: undefined, done: true }
從上面可以看出
從上面的代碼中，可以看出，上面的generator函式是有三種狀態的，所以需要呼叫三次的next()，
generator函式的執行順序
如果想要最后一次有值，不為undefined，就return一個值出來，
next的引數
-
yield運算式本身沒有回傳值，或者說總是回傳undefined， -
next方法可以帶一個引數，該引數就會被當作上一個yield運算式的回傳值，
沒有引數的情況
function* foo(x) {
var y = 2 * (yield (x + 1));
var z = yield (y / 3);
return (x + y + z);
}
let a = foo(5);
a.next() // Object{value:6, done:false}
a.next() // Object{value:NaN, done:false}
a.next() // Object{value:NaN, done:true}
第一次 next ： value為6
第二次next： yield的回傳值值undefined，y = 2 * undefined， y = NaN， value為 undefined
第三次next: y, z都是undefined， value 為 undefined
有引數的情況
let b = foo(5);
b.next() // { value:6, done:false }
b.next(12) // { value:8, done:false }
b.next(13) // { value:42, done:true }
第一次 next ： value為6
第二次next： ，y = 2 * 12， y = 24， value為 8
第三次next: yield的回傳值值13， y = 24, z = 13, x = 5， value 為 42
generator函式和promise的結合使用
function* foo() {
const result = yield new Promise((resolve, reject) => {
setTimeout(() => {
resolve('hello world')
}, 3000)
})
console.log(result);
}
const it = foo()
it.next().value.then(res => {
it.next(res)
})
現象： 異步代碼實作同步 ，也就是result的代碼是同步的
代碼決議
// 回傳一個遍歷器物件
it.next()
// 拿到promise物件
it.next().value
// 拿到異步的 resolve的結果 res
it.next().value.then(res => { ... })
// 把 res傳遞給第二次next，return出去
it.next().value.then(res => {
it.next(rex)
})
這樣res就是最新的代碼
結語
generator的基本用法大致就是這樣了，看看還是比較好理解的，
學習使我快樂，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/305474.html
標籤：其他
上一篇：JavaScript（七）—— BOM 瀏覽器物件模型
下一篇：JS陣列方法