本文實例講述了ES6 Iterator遍歷器原理，應用場景及相關常用知識拓展。分享給大家供大家參考，具體如下：

介紹Iterator之前先列舉下js的表示數據集合結構的幾種方式：

在es6之前有 Array , Object, es6新增了 map, set，當然用戶也可以組合使用這幾種數據結構，靈活存儲數據。

但是當數據結構變得復雜后，怎樣取到里面的數據就也相對復雜，這就需要有一種讀取數據的統一的接口機制，來處理不同的數據結構。

遍歷器就是這樣一種接口機制，Iterator是一種接口，為不同數據結構提供統一的接口機制。

相應的任何數據結構只要部署Iterator接口，就可以完成遍歷操作。

Iterator的作用：

1，為各種數據結構提供一種統一的，簡單的訪問接口；

2，使得數據結構的成員能夠按照某種次序排列；

3，ES6提供了一種新的遍歷循環（for......of.....），Iterator被for......of.....循環調用；

Iterator本質：

遍歷器本質上是一種指針對象，指針對象上有next()方法，第幾次調用就指向第幾個成員

Iterator上next()方法調用返回：

1，返回當前成員的信息

2，返回遍歷是否結束

模擬實現Iterator

var it = makeIterator(['a', 'b']); it.next() // { value: "a", done: false }it.next() // { value: "b", done: false }it.next() // { value: undefined, done: true } function makeIterator(array) { var nextIndex = 0; return {  next: function() {   return nextIndex < array.length ?    {value: array[nextIndex++], done: false} :    {value: undefined, done: true};  } };}

使用Typescript

interface Iterable { [Symbol.iterator]() : Iterator,} interface Iterator { next(value?: any) : IterationResult,} interface IterationResult { value: any, done: boolean,}

關于默認的Iterator接口：

ES6 規定，默認的 Iterator 接口部署在數據結構的Symbol.iterator屬性，或者說，一個數據結構只要具有Symbol.iterator屬性，就可以認為是“可遍歷的”（iterable）。

Symbol.iterator的本質：

1，Symbol.iterator本身是一個函數，對應當前數據結構默認的遍歷器生成函數；

2，執行Symbol.iterator這個函數會返回一個遍歷器。

實例：

const obj = { [Symbol.iterator] : function () {  return {   next: function () {    return {     value: 1,     done: true    };   }  }; }};//這樣定義后對象就有了Iterator接口//執行對象obj的symbol.iterator后，返回一個遍歷器

具有原生iterator的數據結構：

Array , Map, Set, String, TypedArray, 函數的argulements對象，NodeList對象（節點對象）；

數組iterator實例

let arr = ['a', 'b', 'c'];let iter = arr[Symbol.iterator](); iter.next() // { value: 'a', done: false }iter.next() // { value: 'b', done: false }iter.next() // { value: 'c', done: false }iter.next() // { value: undefined, done: true }