js中yield引數應用範例深入理解

yield是什麼

• yield是ES6的新關鍵字，使生成器函數執行暫停，yield關鍵字後面的表示式的值返回給生成器的呼叫者。它可以被認為是一個基於生成器的版本的return關鍵字。
• yield關鍵字實際返回一個IteratorResult（迭代器）物件，它有兩個屬性，value和done，分別代表返回值和是否完成。
• yield無法單獨工作，需要配合generator(生成器)的其他函數，如next，懶漢式操作，展現強大的主動控制特性。

yield應用的簡單例子

demo1

• 如果你看到某個函數中有yield，說明這個函數已經是個生成器了
• yield可以用來加強控制，懶漢式載入
• 呼叫函數指標和呼叫生成器是兩碼事，注意上面的執行結果，countAppleSales和myArr。
• 需要next()函數配合使用，每次呼叫返回兩個值：分別是value和done，代表迭代結果和是否完成
• 函數next()是個迭代器物件，傳參可以預設，預設呼叫函數。

錯誤的呼叫

demo2

上述錯誤的呼叫中，會的到如下結果

{ value: 7, done: false }

{ value: undefined, done: true }

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

一些說明

• yield並不能直接生產值，而是產生一個等待輸出的函數
• 除IE外，其他所有瀏覽器均可相容（包括win10 的Edge）
• 某個函數包含了yield，意味著這個函數已經是一個Generator
• 如果yield在其他表示式中，需要用()單獨括起來
• yield表示式本身沒有返回值，或者說總是返回undefined(由next返回)
• next()可無限呼叫，但既定迴圈完成之後總是返回undeinded

next()函數及引數

• 在js中，雖然借鑑了python的函數，但是也進行了自己的改造，由於沒有send()函數，所以無法直接傳遞yield的值。
• next()可以帶一個引數，該引數會被認為是上一個yield整體的返回值，稍後將在程式碼中展示。
• 在某種程度上，next()可以直接當做send()使用

它的意義在於，可以在不同階段從外部直接向內部注入不同的值來調整函數的行為(這一點是其他迴圈很難做到的，或要付出較大的代價才可以做到)

yield引數的對比

js

python

• 對js中generator函數進行改造，對比右邊的python中的yield，它們原理一樣，只是呼叫方式不同
• 呼叫next()，會產生許多i的值, 但是不會影響reset，因為yield直接將值return出來了。
• 當傳值true後，yield及他的引數整體變為true賦值給reset，這是reset會被執行，從而滿足迴圈內的判斷條件
• 這裡的使用 next(引數) 已經達到了send(引數)的效果
• 這並不會平白增加回圈的時間複雜度，因為不傳參的時候，並不會佔用更多的記憶體

更深層次的理解yield

如果剛才沒有讓你有一個清晰的認識，那麼這個例子一定會讓你徹底明白的

傳參

分析

next() 傳參是對yield整體的傳參，否則yield類似於return

A組

• x恆為5，所以第一次呼叫傳空沒問題，可得到對應的第一個yield返回值:yield (x + 1)
• 第二次呼叫，無引數傳入，所以y為NaN(2* undefined)，自然得不到z
• 第三次呼叫同上分析

B組

• x恆為5，所以第一次呼叫傳空沒問題，可得到對應的第一個yield返回值:yield (x + 1)
• 第二次呼叫，傳入12，所以y為24(yield (x + 1)=入參)，得到第二個yield: yield (y / 3)=8
• 第三次呼叫同上分析,得到最後的z值並return=42

目前專案中的可用性

在前端專案中，用的機會很少，完全可以忽略他的存在，但是在後臺專案中，就顯得比較重要了，因為其優越的可控性，可是極大的提升執行緒的效率。

目前只是根據官網，ES6規範，大站等總結出來的，但是很遺憾，目前我們的專案中由於node專案較簡單，並不需要進行實際改造。

如果需要範例的話，可參考github上的一些python後端專案，呼叫方式稍有不同，由於js參考的python語言，他們又同為動態語言，所以原理都是相同的，用處也一樣。

以上就是js中yield引數應用範例深入理解的詳細內容，更多關於js yield引數應用的資料請關注it145.com其它相關文章！