初探 yield

前言

  在先前的 初探 JavaScript 的 Iterator 介紹 Iterator ，查了一下發現 Iterator  需要搭配另一個語法 yield 來使用，它們有什麼關係呢?仔此把學習的過程做個紀錄。

內容

  範例如下

function* count(){
  yield 0;
  yield 1;
}
//
let conItor = count();
console.log( conItor.next() );//{ done: false , value: 0 }
console.log( conItor.next() );//{ done: false , value: 1 }
console.log( conItor.next() );//{ done: true , value: undefined }
//
for( val of count() )
  console.log( val );
//
// 0
// 1

yield 的用法類似於 return ，並且要使用 yield  的 Function 要在宣告前加上 function* ，範例的 count() 前方就是。這個 Function 如何使用呢?喚起它並用一個變數接住回傳值，接著就可以利用這個回傳值不斷喚起 next() ，這和之前的容器的 Iterator 的用法是一樣，可以看到每次 next() 的回傳內容一樣是 value 與 done，有 yield 的在每次喚起 next() 時從上一次的 yield 的結束來執行，如果是第一次喚起就從 Funciton 的開頭來執行，當第一次喚起 next() 時，從 Funciton 的開頭執行，碰到 yield 0  ，執行到這就不再執行下去，接著當地二次喚起 next() 時，就從 yield 0 之後開始執行，而不是 Funciton 的開頭，所以會執行到 yield 1 ，當地三次喚起 next() 時，就從 yield 1 之後開始執行，執行到 Function 的結尾，可以看到這次的回傳結果是 undefiend ，最後，用 for ... of 語法來看結果可以比較簡潔。 

參考資料

[ developer.mozilla.org ] yield

相關文章與資料

初探 JavaScript 的 Iterator

客製化 JavaScript 的 Iterator