客製化 JavaScript 的 Iterator

前言

  上次的 初探 JavaScript 的 Iterator 基本的使用 Iterator ，這次來學習客製化 Iterator ，在此把學習的過程做個紀錄。

內容

  範例如下

let ar = [ 1 , 2 , 3 , 4 , 5];
ar[Symbol.iterator] = function () {
  let nextIndex = 0;
  return {
    next() {
      return nextIndex < ar.length
        ? {
            value: ar[nextIndex++] * 2,
            done: false,
          }
        : {
            value: undefined,
            done: true,
          };
    },
  };
};
//
for( ele of ar) {  
  console.log( ele ); 
}
// 2
// 4
// 6
// 8
// 10
//
let itor2 = ar[ Symbol.iterator ]();
console.log( itor2.next() );//{ done: false , value: 2 }
console.log( itor2.next() );//{ done: false , value: 4 }
console.log( itor2.next() );//{ done: false , value: 6 }
console.log( itor2.next() );//{ done: false , value: 8 }
console.log( itor2.next() );//{ done: false , value: 10 }
console.log( itor2.next() );//{ done: true , value: undefined }
//
for( let i=0;i<ar.length;i++)
  console.log( ar[i] );
//
// 1
// 2
// 3
// 4
// 5

客製化 Iterator 時，要注意 Funciton 要回傳一個"物件"，因為是重定義一個物件，範例重定義了 next() ，在每次回傳結果時都將結果乘 2 ，接著透過 for ... of 來瀏覽 ar ，會發現結果已被改成乘 2 的結果，透過最基本的 Iterator.next() 來瀏覽也會得到一樣的結果，不過，如果使用傳統的 for 來瀏覽還是可以得到原本陣列的內容，不受客製化 Iterator 的引響。

參考資料

[ developer.mozilla.org ] Iterator

[ pjchender.dev ] [JS] JavaScript 疊代器（Iterator）

相關文章與資料

初探 JavaScript 的 Iterator