TypeScript 迭代器(iterator)和生成器(generator)

⒈迭代器(iterator)

　　1.可迭代性

　　當一個對象實現了Symbol.iterator屬性時，咱們認爲它是可迭代的。 一些內置的類型如 Array，Map，Set，String，Int32Array，Uint32Array等都已經實現了各自的Symbol.iterator。 對象上的 Symbol.iterator函數負責返回供迭代的值。

　　2.for..of語句

　　for..of會遍歷可迭代的對象，調用對象上的Symbol.iterator方法。 下面是在數組上使用 for..of的簡單例子：

let array = [7, "fanqi", true]; for (let item of array) { console.log(item); // 7, "fanqi", true
}

　　3.for..of vs. for..in 語句

　　for..of和for..in都可迭代一個列表，但它們之間的區別很大，最明顯的區別莫過於它們用於迭代的值不一樣，for..in迭代的是對象鍵的列表，而for..of迭代的是對象值的列表。

　　下面的例子展現了二者之間的區別：

let list = [4, 5, 6]; for (let i in list) { console.log(i); // "0", "1", "2",
} for (let i of list) { console.log(i); // "4", "5", "6"
}

　　另外一個區別是for..in能夠操做任何對象；它提供了查看對象屬性的一種方法。 可是 for..of關注於迭代對象的值。內置對象Map和Set已經實現了Symbol.iterator方法，讓咱們能夠訪問它們保存的值。

let pets = new Set(["Cat", "Dog", "Hamster"]); pets["species"] = "mammals"; for (let pet in pets) { console.log(pet); // "species"
} for (let pet of pets) { console.log(pet); // "Cat", "Dog", "Hamster"
}

　　但這樣的特性僅僅在ES6及以上才生效。

　　當咱們將TypeScript的代碼生成目標設定爲ES5或ES3，迭代器就只容許在Array類型上使用。 在非數組值上使用 for..of語句會獲得一個錯誤，即便這些非數組值已經實現了Symbol.iterator屬性也是不能夠的。

　　編譯器會生成一個簡單的for循環作爲for..of循環，好比：

let numbers = [1, 2, 3]; for (let num of numbers) { console.log(num); }

　　生成的代碼爲：

var numbers = [1, 2, 3]; for (var _i = 0; _i < numbers.length; _i++) { var num = numbers[_i]; console.log(num); }

　　當目標設定爲兼容ECMAScipt 2015或更高的引擎時，編譯器會生成相應引擎的for..of內置迭代器實現方式。

⒉生成器(generator)

　　function* 是用來建立generator函數的語法（在MDN的文檔中generator稱爲生成器）

　　調用generator函數時會返回一個generator對象。generator對象遵循迭代器接口，即一般所見到的next、return和throw函數。

　　generator函數用於建立懶迭代器，例以下面的這個函數能夠返回一個無限整數的列表：

function* infiniteList(){ let i = 0; while(true){ yield i++; } } const iterator = infiniteList(); while(true){ console.log(iterator.next()); //{ value: xxxx, done: false }
}

　　固然，也能夠設定某個條件終止它，而不僅是永遠循環下去。以下所示：

function* infiniteList(){ let i = 0; while(i < 3){ yield i++; } } const iterator = infiniteList(); while(true){ console.log(iterator.next()); //{ value: xxxx, done: false }
}

　　能夠說這個設定是generator中最使人興奮的部分。它在實質上容許一個函數能夠暫停執行，好比當咱們執行了第一次的iterator.next()後，能夠先去作別的事，再回來繼續執行iterator.next()，這樣剩餘函數的控制權就交給了調用者。

　　當你直接調用generator函數時，它並不會執行，它只會建立一個generator對象。

　　在下面的例子中，咱們能夠看到一個更靈活的使用方式：

function* generator(){ console.log('開始執行'); yield 0; console.log('執行暫停'); yield 1; console.log('執行結束'); } const iterator = generator(); console.log(iterator.next()); console.log('a'); console.log(iterator.next()); console.log('b'); console.log(iterator.next()); console.log('c');

　　執行它則會看到以下輸出結果：

開始執行 { value: 0, done: false } a 執行暫停 { value: 1, done: false } b 執行結束 { value: undefined, done: true } c

　　從上面代碼能夠得知：

• • generator對象只會在調用next()時開始執行。
  • 函數在執行到yield語句時會暫停並返回yield的值。
  • 函數在next被調用時繼續恢復執行。

　　因此實質上generator函數的執行與否是由外部的generator對象控制的。

　　不過除了yield傳值到外部，咱們也能夠經過next傳值到內部進行調用。下面的例子展現了iterator.next傳值的方式：

function* generator(){ let y = yield; console.log(`'Hello ${y}'`); } const iterator = generator(); console.log(iterator.next()); console.log('a'); console.log(iterator.next('fanqi'));

　　執行它則會看到以下輸出結果：

{ value: undefined, done: false } a 'Hello fanqi' { value: undefined, done: true }

　　以上即是next和return函數的內容，接下來咱們來看一下throw函數如何處理迭代器內部報錯。

　　下面是一個iterator.throw的例子：　

function* generator(){ try{ yield 1; } catch(error){ console.log(error.message); } } const iterator = generator(); console.log(iterator.next()); console.log('a'); console.log(iterator.throw(new Error('未知的錯誤發生！')));

　　執行它則會看到以下輸出結果：　

{ value: 1, done: false } a 未知的錯誤發生！ { value: undefined, done: true }

　　經過以上的案例咱們能夠得知，外部是能夠對generator內部進行干涉的：

• • 外部系統能夠傳遞一個值到generator函數體中。
  • 外部系統能夠拋入一個異常到generator函數體中。