初探 JavaScript 的 Iterator

前言

  JavaScript 自 2025 提供 Iterator 的功能，可以在 Array 、 Map  ...  等不同容器用一樣的方式來操作，這樣可以達成操作時不用管容器的型態，不過整體機制比較複雜，這次先入個門，只是用 Iterator 來瀏覽容器，在此把學習的過程做個紀錄。

內容

  範例如下

let ar = [ 1 , 2 , 3 , 4 , 5];
let itor1 = Iterator.from( ar );
console.log( itor1.next() );//{ done: false , value: 1 }
console.log( itor1.next() );//{ done: false , value: 2 }
console.log( itor1.next() );//{ done: false , value: 3 }
console.log( itor1.next() );//{ done: false , value: 4 }
console.log( itor1.next() );//{ done: false , value: 5 }
console.log( itor1.next() );//{ done: true , value: undefined }
//
let itor2 = ar[ Symbol.iterator ]();
console.log( itor2.next() );//{ done: false , value: 1 }
console.log( itor2.next() );//{ done: false , value: 2 }
console.log( itor2.next() );//{ done: false , value: 3 }
console.log( itor2.next() );//{ done: false , value: 4 }
console.log( itor2.next() );//{ done: false , value: 5 }
console.log( itor2.next() );//{ done: true , value: undefined }

要瀏覽容器要先取得 Iterator ，可以透過 Iterator.from() 或是 Symbol.iterator 來取得，透過 Symbol.iterator 取得時要注意它是個 Function ，所以要在最後加個  () 喚起，取得 Iterator  後就可以利用 Iterator.next() 來瀏覽，每次喚起都會推出一個新的內容，注意推出來的物件裡有 value 與 done ，value 就是這次瀏覽到的內容，done 則是記錄是否瀏覽結束，如果瀏覽結束，value 的值應該是 undefined。

參考資料

[ developer.mozilla.org ] Iterator