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函數體中。