js 中的yield

yield是什麼

• yield是ES6的新關鍵字，使生成器函數執行暫停，yield關鍵字後面的表達式的值返回給生成器的調用者。它能夠被認爲是一個基於生成器的版本的return關鍵字。
• yield關鍵字實際返回一個IteratorResult（迭代器）對象，它有兩個屬性，value和done，分別表明返回值和是否完成。
• yield沒法單獨工做，須要配合generator(生成器)的其餘函數，如next，懶漢式操做，展示強大的主動控制特性。

yield應用的簡單例子

 

demo1

1. 若是你看到某個函數中有yield，說明這個函數已是個生成器了
2. yield能夠用來增強控制，懶漢式加載
3. 調用函數指針和調用生成器是兩碼事，注意上面的運行結果，countAppleSales和myArr。
4. 須要next()函數配合使用，每次調用返回兩個值：分別是value和done，表明迭代結果和是否完成
5. 函數next()是個迭代器對象，傳參能夠缺省，默認調用函數。

錯誤的調用

 

demo2

上述錯誤的調用中，會的到以下結果
{ value: 7, done: false }
{ value: undefined, done: true }

由於在while判斷中的next也會進行消耗，致使輸出結果與預期不符，獲得的只是符合條件的偶數項

一些說明

1. yield並不能直接生產值，而是產生一個等待輸出的函數
2. 除IE外，其餘全部瀏覽器都可兼容（包括win10 的Edge）
3. 某個函數包含了yield，意味着這個函數已是一個Generator
4. 若是yield在其餘表達式中，須要用()單獨括起來
5. yield表達式自己沒有返回值，或者說老是返回undefined(由next返回)
6. next()可無限調用，但既定循環完成以後老是返回undeinded

next()函數及參數

1. 在js中，雖然借鑑了python的函數，可是也進行了本身的改造，因爲沒有send()函數，因此沒法直接傳遞yield的值。

2. next()能夠帶一個參數，該參數會被認爲是上一個yield總體的返回值，稍後將在代碼中展現。

3. 在某種程度上，next()能夠直接當作send()使用

它的意義在於，能夠在不一樣階段從外部直接向內部注入不一樣的值來調整函數的行爲(這一點是其餘循環很難作到的，或要付出較大的代價才能夠作到)

yield參數的對比

 

js

 

python

1. 對js中generator函數進行改造，對比右邊的python中的yield，它們原理同樣，只是調用方式不一樣
2. 調用next()，會產生許多i的值, 可是不會影響reset，由於yield直接將值return出來了。
3. 當傳值true後，yield及他的參數總體變爲true賦值給reset，這是reset會被執行，從而知足循環內的判斷條件
4. 這裏的使用 next(參數) 已經達到了send(參數)的效果
5. 這並不會平白增長循環的時間複雜度，由於不傳參的時候，並不會佔用更多的內存

更深層次的理解yield

若是剛纔沒有讓你有一個清晰的認識，那麼這個例子必定會讓你完全明白的

 

傳參

分析

next() 傳參是對yield總體的傳參，不然yield相似於return

A組

1. x恆爲5，因此第一次調用傳空沒問題，可獲得對應的第一個yield返回值:yield (x + 1)
2. 第二次調用，無參數傳入，因此y爲NaN(2* undefined)，天然得不到z
3. 第三次調用同上分析

B組

1. x恆爲5，因此第一次調用傳空沒問題，可獲得對應的第一個yield返回值:yield (x + 1)
2. 第二次調用，傳入12，因此y爲24(yield (x + 1)=入參)，獲得第二個yield: yield (y / 3)=8
3. 第三次調用同上分析,獲得最後的z值並return=42

目前項目中的可用性

在前端項目中，用的機會不多，徹底能夠忽略他的存在，可是在後臺項目中，就顯得比較重要了，由於其優越的可控性，但是極大的提高線程的效率。

目前只是根據官網，ES6規範，大站等總結出來的，可是很遺憾，目前咱們的項目中因爲node項目較簡單，並不須要進行實際改造。

若是須要實例的話，可參考github上的一些python後端項目，調用方式稍有不一樣，因爲js參考的python語言，他們又同爲動態語言，因此原理都是相同的，用處也同樣。

轉載自：世外大帝
連接：https://www.jianshu.com/p/36c74e4ca9eb
來源：簡書