1. 程式人生 > >深入理解js中的yield

深入理解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語言,他們又同為動態語言,所以原理都是相同的,用處也一樣。