深入理解ES6 008【學習筆記】

迭代器(Iterator)和產生器(Generator)

這項新特性對於高效的資料處理而言是不可或缺的,你也會發現在語言的其他特性中也都有迭代器的蹤影:新的for-of 迴圈、展開運算子(...)、甚至連非同步程式設計都可以使用迭代器。

迭代器是一種特殊的物件,它具有一些專門為迭代過程設計的專有介面,所有的迭代器物件都有一個next()方法,每次呼叫都回傳一個結果物件(形如:{value:true|false,next(){}})。

function createIterator(items){
  var i = 0;
  return {
    next:function(){
      let done = (i>=items.length);
      let value = !done?items[i++];undefined;
      return {
        done,
        value
      }
    }
  }
}
var iterator = createIterator([1,2,3])
console.log(iterator.next()); // {value:1,done:false}
console.log(iterator.next()); // {value:2,done:false}
console.log(iterator.next()); // {value:3,done:false}
console.log(iterator.next()); // {value:undefined,done:true}
// 之後所有呼叫都會回傳相同內容
// {value:undefined,done:true}

產生器

產生器是一種回傳迭代器的函式,透過function關鍵字後的星號(*)來表示,函式中會用到新的關鍵字 yield。星號可以緊挨著function關鍵字,也可以在中間添加一個空格

// 生成器
function *createIteator(){
  yield 1;
  yield 2;
  yield 3;
}

// 生成器的呼叫方式與普通函式相同,只不過回傳的是一個迭代器
let iterator = createIteator();

console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2
console.log(iterator.next().value); // 3

產生器函式最有趣的部分大概是,每當執行完一條yield語句後函式就會自動停止執行。執行yield 1之後,函式便不再執行其他任何語句,直到再次呼叫迭代器的 next() 才會繼續執行yield 2

使用yield關鍵字可以回傳任何值或表達式,所以可以透過產生器函式批量地給迭代器添加元素,也可以在迴圈中使用yield關鍵字

yield後面的值會放在迭代器回傳值的 value 中

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}
console.log(iterator.next()) // {value:3,done:false}
console.log(iterator.next()) // {value:undefined,done:true}
// 之後所有的呼叫都會回傳相同內容
console.log(iterator.next()) // {value:undefined,done:true}

產生器函式表達式

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}
console.log(iterator.next()) // {value:2,done:false}
console.log(iterator.next()) // {value:3,done:false}
console.log(iterator.next()) // {value:undefined,done:true}
// 之後所有的呼叫都會回傳相同內容
console.log(iterator.next()) // {value:undefined,done:true}

產生器物件的方法

let o={
  createIterator:function *(items){
    for(let i=0;i<items.length;i++){
      yield items[i];
    }
  }
}
// 或簡寫
let o1={
  *createIterator(items){
    for(let i=0;i<items.length;i++){
      yield items[i];
    }
  }
}

可迭代物件和 for-of 迴圈

可迭代物件具有Symbol.iterator屬性,是一種與迭代器密切相關的物件。Symbol.iterator透過指定的函式可以回傳一個作用於附屬物件的迭代器。ES6 所有集合物件(陣列、Set 集合及 Map 集合)和字串都是可迭代物件,這些物件都有預設的迭代器。

由於產生器預設會為Symbol.iterator屬性賦值,因此所有透過產生器建立的迭代器都是可迭代物件。

存取預設迭代器

let values = [1,2,3];
let iterator = values[Symbol.iterator]();

console.log(iterator.next()) // {value:1,done:false}
console.log(iterator.next()) // {value:2,done:false}
console.log(iterator.next()) // {value:3,done:false}
console.log(iterator.next()) // {value:undefined,done:true}

由於具有Symbol.iterator屬性的物件都有預設的迭代器,因此可以用它來偵測物件是否為可迭代物件

function isIterator(object){
  return typeof object[Symbol.iterator] === "function";
}
console.log(isIterator([1,2,3])); // true
console.log(isIterator("Hello")); // true
console.log(isIterator(new Map())); // true
console.log(isIterator(new Set())); // true
console.log(isIterator(new WeakMap())); // false
console.log(isIterator(new WeakSet())); // false

建立可迭代物件

預設情況下,開發者定義的定義都是不可迭代物件,但如果給Symbol.iterator屬性添加一個產生器

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

for(let x of collection){
  console.log(x)
}

內建迭代器 集合物件迭代器

  • entries()
  • values()
  • keys()

字串迭代器

var message = "A 𠮷 B";

for(let c of message){
  console.log(c)
}

NodeList 迭代器

var divs = document.getElementByTagName("div");

for(let div of divs){
  console.log(div.id)
}

展開運算子與非陣列可迭代物件

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

let map = new Map([["name","Nicholas"],["age",25]]),
array = [...map];

console.log(array) // [["name","Nicholas"],["age",25]]

進階迭代器功能

可以用迭代器的 next() 方法的回傳值,也可以在產生器內部使用 yield 關鍵字來產生值,如果給迭代器的next()方法傳遞參數,則這個參數的值就會替代產生器內部上一條yield語句的回傳值。而如果要實現更多像非同步程式設計這樣的高級功能

function *createIterator() {
let first = yield 1;
let second = yield first + 2;

主題測試文章,只做測試使用。發佈者:Walker,轉轉請注明出處:https://www.walker-learn.xyz/archives/4334

(0)
Walker的頭像Walker
上一篇 2025年3月8日 12:52
下一篇 2025年3月8日 12:51

相關推薦

  • Node深入淺出(聖思園教育) 002【學習筆記】

    node 的套件管理機制和載入機制 npm search xxxnpm view xxxnpm install xxx nodejs 檔案系統操作的 api Node.js 的 fs 模組提供同步(Sync)與基於回呼/Promise 的非同步 API,可以操作本機檔案與目錄。日常開發中常用的能力包括讀取、寫入、追加、刪除、遍歷目錄、監聽變化等。以下範例基於 C…

    個人 2025年11月24日
    31800
  • 熱愛運動,挑戰極限,擁抱自然

    熱愛 在這個快節奏的時代,我們被工作、生活的壓力所包圍,常常忽略了身體的需求。而運動,不只是一種健身方式,更是一種釋放自我、挑戰極限、與自然共舞的生活態度。無論是滑雪、攀岩、衝浪,還是跑步、騎行、瑜伽,每一種運動都能讓我們找到內心的激情,感受到生命的躍動。 運動是一場自我挑戰。挑戰極限,不只是職業運動員的專屬,而是每一個熱愛運動的人都可以追求的目標。它可…

    個人 2025年2月26日
    1.5K00
  • Go工程師體系課 003【學習筆記】

    grpc grpc grpc-go grpc 無縫整合了 protobuf protobuf 習慣用 Json、XML 資料儲存格式的你們,相信大多都沒聽過 Protocol Buffer。 Protocol Buffer 其實是 Google 出品的一種輕量且高效的結構化資料儲存格式,效能比 Json、XML 真的強!太!多! protobuf…

    個人 2025年11月25日
    27400
  • Go工程師體系課 011【學習筆記】

    查詢的倒排索引 1. 什麼是倒排索引? 倒排索引(Inverted Index)是一種資料結構,用於快速查找包含特定詞彙的文件。它是搜尋引擎的核心技術之一。 1.1 基本概念 正排索引:文件 ID → 文件內容(詞列表) 倒排索引:詞 → 包含該詞的文件 ID 列表 1.2 為什麼叫"倒排"? 倒排索引將傳統的"文件包含哪些詞"的關係倒轉為"詞出現在哪些文件…

    個人 2025年11月25日
    28300
  • 深入理解ES6 009【學習筆記】

    JavaScript 中的類別 function PersonType(name){ this.name = name; } PersonType.prototype.sayName = function(){ console.log(this.name) } var person = new PersonType("Nicholas") p…

    個人 2025年3月8日
    1.3K00