深入理解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://walker-learn.xyz/archives/4334

(0)
Walker的頭像Walker
上一篇 2026年3月10日 00:00
下一篇 2026年3月8日 15:40

相關推薦

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

    WebSocket 與 SSE 總覽 WebSocket 基礎 定位:WebSocket 是一種在 HTTP 握手後升級的全雙工連線,允許用戶端與伺服器在同一 TCP 通道上雙向推送資料,省去了重複輪詢。 握手流程: 用戶端透過 Upgrade: websocket 標頭發起 HTTP 請求; 伺服器回應 101 Switching Protocols,雙方協…

    個人 2025年11月24日
    39800
  • Go 工程師體系課 012【學習筆記】

    在 Go 中整合 Elasticsearch 1. 客戶端函式庫選擇 1.1 主流 Go ES 客戶端 olivere/elastic:功能最完整,API 設計優雅,支援 ES 7.x/8.x elastic/go-elasticsearch:官方客戶端,輕量級,更接近原生 REST API go-elasticsearch/elasticsearch:社群維護的官…

    個人 2025年11月25日
    28100
  • Nuxt3_掃盲 入門與原理介紹【學習筆記】

    Nuxt 3 入門與原理介紹 💡 什麼是 Nuxt 3? Nuxt 3 是基於 Vue 3 和 Vite 打造的全端前端框架,支援: 伺服器端渲染(SSR) 靜態網站生成(SSG) 單頁應用程式(SPA) 建構全端應用程式(支援 API) Nuxt 3 是 Vue 的「加強版」,幫你簡化專案結構與開發流程。 🔧 核心原理 功能 Nuxt 如何處理 ✅ 頁面路由 自動根…

    個人 2025年4月6日
    2.2K00
  • Node深入淺出(聖思園教育) 001【學習筆記】

    node 從非同步程式設計典範理解 Node.js Node.js 的定位與核心思想 基於 V8 引擎 + libuv 事件驅動函式庫,將 JavaScript 從瀏覽器帶到伺服器端。 採用單執行緒事件迴圈處理 I/O,最大化利用 CPU 等待 I/O 的時間切片,特別適合高併發、I/O 密集型情境。 「不要阻塞主執行緒」是設計哲學:盡量把耗時操作交給核心或執行緒池,回呼結果…

    個人 2025年11月24日
    34300
  • 向世界揮手,擁抱無限可能 🌍✨

    站得更高,看得更遠 生活就像一座座高樓,我們不斷向上攀登,不是為了炫耀高度,而是為了看到更廣闊的風景。圖中的兩位女孩站在城市之巔,伸展雙手,徬彿在迎接世界的無限可能。這不僅是一次俯瞰城市的旅程,更是對自由和夢想的禮讚。 勇敢探索,突破邊界 每個人的生活都是一場冒險,我們生而自由,就該去探索未知的風景,去經歷更多的故事。或許路途中會有挑戰,但正是那些攀爬的瞬間…

    個人 2025年2月26日
    1.4K00