深入理解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
上一篇 2025年11月25日 15:00
下一篇 2025年11月25日 13:00

相關推薦

  • 【開篇】

    我是Walker,生於八十年代初,程式碼與生活的旅者。全端開發工程師,遊走於前端與後端的邊界,執著於技術與藝術的交會點。程式碼,是我編織夢想的語言;專案,是我刻畫未來的畫布。在鍵盤的敲擊聲中,我探索技術的無限可能,讓靈感在程式碼裡永恆綻放。深度咖啡愛好者,迷戀每一杯手沖的詩意與儀式感。在咖啡的醇香與苦澀中,尋找專注與靈感,亦如在開發的世界中追求極致與平衡。騎…

    2025年2月6日 個人
    2.5K00
  • 深入理解ES6 001【學習筆記】

    區塊作用域繫結 之前的變數宣告 `var` 無論在哪裡宣告,都會被視為作用域頂部宣告。由於函式是一等公民,因此順序通常是 `function 函式名稱()`、`var 變數`。 區塊宣告 區塊宣告用於宣告在指定區塊的作用域之外無法存取的變數。區塊作用域存在於: 函式內部 區塊中(字元 `{` 和 `}` 之間的區域) 暫時性死區 JavaScript 引擎在掃描程式碼發現變數宣告時,要麼會將它們提升至作…

    個人 2025年3月8日
    1.9K00
  • Go工程師體系課 010【學習筆記】

    安裝 Elasticsearch (可理解為資料庫) 和 Kibana (可理解為連接工具)。Elasticsearch 和 Kibana (5601) 的版本必須保持一致。MySQL 對照學習 Elasticsearch (ES) 術語對照:MySQL 的 database 對應 Elasticsearch 的 index (索引);MySQL 的 table 對應 Elasticsearch 的 type (從 7.x 版起固定為 _doc,8.x 版徹底移除多個類型…

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

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

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

    其他一些功能 個人中心 收藏 管理收貨地址(增刪改查) 留言 複製inventory_srv--> userop_srv 查詢替換所有的inventory Elasticsearch 深度解析文件 1. 什麼是Elasticsearch Elasticsearch是一個基於Apache Lucene建構的分散式、RESTful搜尋和分析引擎,能夠快速地…

    個人 2025年11月25日
    37000