8. 迭代器與生成器

在別的語言中,從使用 for 循環轉變到使用迭代器對象。for 循環需要初始化變量以便追蹤集合內的位置,而迭代器則以編程方式返回集合中的下一個項。新增的 for-of 與它協同工作,擴展運算符( ... )也使用了。

8.1 循環的問題

var colors = ["red", "green", "blue"];
for (var i = 0, len = colors.length; i < len; i++) {
  console.log(colors[i]);
}

缺點:它被嵌套使用并要追蹤多個變量時,情況就會變得非常復雜。

8.2 何為迭代器

  1. 所有的迭代器對象都擁有 next() 方法,會返回一個結果對象。該結果對象有兩個屬性:對應下一個值的 value ,以及一個布爾類型的 done ,其值為 true 時表示沒有更多值可供使用。
  2. 迭代器持有一個指向集合位置的內部指針,每當調用了 next() 方法,迭代器就會返回相應的下一個值。
function createIterator(items) {
  var i = 0;
  return {
    next: function() {
      var done = (i >= items.length);
      var value = !done ? items[i++] : undefined;
      return {
        done: done,
        value: value
      };
    }
  };
}
var iterator = createIterator([1, 2, 3]);

8.3 何為生成器?

生成器( generator )是能返回一個迭代器的函數。。生成器函數由放在 function 關鍵字之后的一個星號( * )來表示,并能使用新的 yield 關鍵字。 yield 表示迭代器在被 next() 方法調用時應當按順序返回的值。

function *createIterator(items) {
  for (let i = 0; i < items.length; i++) {
    yield items[i];
  }
}
let iterator = createIterator([1, 2, 3]);
console.log(iterator.next()); // "{ value: 1, done: false }"
console.log(iterator.next()); // "{ value: 2, done: false }"

每當遇到 yield ,循環就會停止;而每當iterator 上的 next() 方法被調用,循環就會再次執行到 yield 語句處。
yield 關鍵字只能用在生成器內部,用于其他任意位置都是語法錯誤,即使在生成器內部的函數中也不行

function *createIterator(items) {
items.forEach(function(item) {
// 語法錯誤
yield item + 1;
});
}

盡管yield嚴格位于 createIterator() 內部,此代碼仍然有語法錯誤,因為 yield無法穿越函數邊界。從這點上來說, yield 與 return 非常相似,在一個被嵌套的函數中無法將值返回給包含它的函數。

8.4 生成器函數表達式

let createIterator = function *(items) {
  for (let i = 0; i < items.length; i++) {
    yield items[i];
  }
};
let iterator = createIterator([1, 2, 3]);
console.log(iterator.next()); // "{ value: 1, done: false }"

8.5 生成器對象方法

var o = {
  createIterator: function *(items) {
    for (let i = 0; i < items.length; i++) {
      yield items[i];
    }
  }
};
let iterator = o.createIterator([1, 2, 3]);

8.6 可迭代對象與 for-of 循環

可迭代對象( iterable )是包含 Symbol.iterator 屬性的對象。其定義了為指定對象返回迭代器的函數

let values = [1, 2, 3];
let iterator = values[Symbol.iterator]
console.log(iterator);// ? values() { [native code] }

let values = [1, 2, 3];
let iterator = values[Symbol.iterator]();
console.log(iterator)// Array Iterator {}

我們判斷一類對象是否可以迭代

function isIterable(object) {
  return typeof object[Symbol.iterator] === "function";
}
console.log(isIterable([1, 2, 3])); // true
console.log(isIterable("Hello")); // true

8.7 創建可迭代對象

可以創建一個包含生成器的Symbol.iterator 屬性,讓它們成為可迭代對象。

let collection = {
  items: [],
  *[Symbol.iterator]() {
    for (let item of this.items) {
      yield item;
    }
  }
};
collection.items.push(1);
collection.items.push(2);
collection.items.push(3);
for (let x of collection) {
console.log(x); // 1,2,3
}

8.8內置的迭代器

ES6 具有三種集合對象類型:數組、 Map 與 Set 。這三種類型都擁有如下的迭代器。用法都相同
entries() :返回一個包含鍵值對的迭代器;
values() :返回一個包含集合中的值的迭代器;
keys() :返回一個包含集合中的鍵的迭代器。

let tracking = new Set([1234,5678,9012])
for(let entry fo tracking.entries()) {
  console.log(entry);// [1234, 1234],[5678,5678],[9012,9012]
}

不同集合類型的默認迭代器。
在沒有顯示的指定則使用默認的迭代器。數組和set集合是value()方法。map是entries().
解構與for....of...循環

let data = new Map();
data.set('title', 'ebook');
for(let [key,value] of data){
  console.log(key,value);
}

8.9 字符串的迭代器

用for of 可以避免非bmp字符的讀取。使用數組下標方式,會出現bmp字符無法讀取導致為空并且字符個數出錯。

var message = "a ?? b"
for (let i=0; i<message.length;i++){
  console.log(message[i]);
}
for (let item of message){
  console.log(item);
}

8.10NodeList迭代器

NodeList,代表頁面文檔中所有元素的集合。NodeList類型也可以進行for...of...

8.11 展開運算符與非數組可迭代對象

在之前我們用...把Set對象轉化為數組

let set = new Set([1,2,3,4,5]), array=[...set];
console.log(array);

展開運算符可以操作所有的可迭代對象,并且根據默認迭代器來選擇要引用的值。

let map = new map([['name', 'Nicholas'], ['age', 15]]), array=[...map];
console.log(array);

數組字面量可以之心多次展開運算符

8.12高級迭代器功能

1. 給迭代器傳遞參數:如果給迭代器next()傳遞參數,則這個參數的值就會替代生成器內部上的一條yield語句的返回值。

function *createIterater() {
let first = yield 1;
let second = yield first + 2;
yield second + 3;
}
let iterater = createIterater();
iterater.next()// {value: 1, down: false}
iterater.next(4)// {value: 6, down: false}
iterater.next(5)// {value: 8, down: false}
iterater.next()// {value: undefined, down: false}

第一次調用next()方法無論傳遞什么參數都會被丟棄。
2. 在迭代器中拋出錯誤:通過throw方法,當迭代器恢復執行時可以令其拋出錯誤。

function *createIterater() {
let first = yield 1;
let second = yield first + 2;
yield second + 3;
}
let iterater = createIterater();
iterater.next()// {value: 1, down: false}
iterater.next(iterater.throw(new Error('Boom')))

-* - * - * - * -* 錯誤是在賦值之前錯誤 但是在上一條的yeild之后報錯-* - * - * - * -*
錯誤攔截

function *createIterater() {
let first = yield 1;
let second;
try { 
   second = yield first + 2;
} catch(ex) {
  second = 6;
}
yield second + 3;
}
let iterater = createIterater();
iterater.next()// {value: 1, down: false}
iterater.next(4))// {value: 6, down: false}
iterater.next(iterater.throw(new Error('Boom')))// {value: 9, down: false}

3. 生成器返回語句
由于生成器也是函數,因此可以通過return語句提前退出函數執行。對于最后一次next調用,可以主動為其制定一個返回值。return表示已經完成,down會設置為true。

function *createIterator() {
  yeild 1;
  return 42;
}
let iterater = createIterater();
iterater.next()// {value: 1, down: false}
iterater.next()// {value: 42, down: true}
iterater.next()// {value: undefined, down: true}

展開運算符與for...of 會忽略通過return語句制定的任何返回值。只要down為true就立即停止讀取其他的值。

8.13 委托生成器

在某些情況下我們需要將兩個迭代器合二為一,這時候可以創建一個生成器,再給yield語句添加一個*,就可以將生成數據過程委托給其他迭代器。
eg:

function *creatNumberIterator() {
    yield 1;
    yield 2;
    return 3;
}
function *creatRepeatingIterator(count) {
    for(let i=0; i<count; i++) {
        yield "repeat"
    }
}
function *creatCombineIterator() {
    let result = yield *creatNumberIterator();
    yield *creatRepeatingIterator(result);
}

var iterator = creatCombineIterator();
console.log(iterator.next());//{value: 1, done: false}
console.log(iterator.next());//{value: 2, done: false}
console.log(iterator.next());//{value: "repeat", done: false}
console.log(iterator.next());//{value: "repeat", done: false}
console.log(iterator.next());//{value: "repeat", done: false}
console.log(iterator.next());//{value: undefined, done: true}

yield *也可以直接作用于字符串,此時將使用字符串的默認迭代器

8.14異步任務執行

在nodeJS中可以讀取文件之后做別的事情,但是如果讀取文件之后再去讀取文件,等進行嵌套,將會非常的復雜。生成器和yield就派上了用場
1.簡單任務執行器

function run(taskDef) {
  // 創建一個無使用限制的迭代器
  let tast = taskDef();
  //開始執行任務
  let result = task.next();
  
  function step() {
    if(!result.down) {
      result = task.next();
      step();
    }
  }
}

run(function*() {
  console.log(1);
  yield;
  console.log(2);
  yield;
  console.log(3);
})

2.向任務執行器傳遞數據

function run(taskDef) {
  // 創建一個無使用限制的迭代器
  let tast = taskDef();
  //開始執行任務
  let result = task.next();
  
  function step() {
    if(!result.down) {
      result = task.next();
      step();
    }
  }
}

run(function*() {
  let value = yield 1;
  console.log(value);// 1
  value = yield value + 3
  console.log(value)// 4
})

4. 異步任務執行

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容