JavaScript的Iterator認識

HollisChuang 發布于2019-08-21 16:54 / 674人閱讀

摘要：也就是說，遍歷器對象本質上，就是一個指針對象。其中，屬性是當前成員的值，屬性是一個布爾值，表示遍歷是否結束。屬性本身是一個函數，就是當前數據結構默認的遍歷器生成函數。執行這個屬性，會返回一個遍歷器對象。

遍歷器（Iterator）

遍歷器（Iterator）就是這樣一種機制。它是一種接口，為各種不同的數據結構提供統一的訪問機制。任何數據結構只要部署Iterator接口，就可以完成遍歷操作（即依次處理該數據結構的所有成員）。
Iterator 的作用有三個：

為各種數據結構，提供一個統一的、簡便的訪問接口；

使得數據結構的成員能夠按某種次序排列；

ES6創造了一種新的遍歷命令for...of循環，Iterator接口主要供for...of消費。

遍歷過程：

創建一個指針對象，指向當前數據結構的起始位置。也就是說，遍歷器對象本質上，就是一個指針對象。

第一次調用指針對象的next方法，可以將指針指向數據結構的第一個成員。

第二次調用指針對象的next方法，指針就指向數據結構的第二個成員。

不斷調用指針對象的next方法，直到它指向數據結構的結束位置。

每一次調用next方法，都會返回數據結構的當前成員的信息。具體來說，就是返回一個包含value和done兩個屬性的對象。其中，value屬性是當前成員的值，done屬性是一個布爾值，表示遍歷是否結束。

Iterator 接口的實現

一種數據結構只要部署了 Iterator 接口，也就是由next方法，返回的是value和 done屬性，我們就稱這種數據結構是”可遍歷的“（iterable）。
ES6 規定，默認的 Iterator 接口部署在數據結構的Symbol.iterator屬性，或者說，一個數據結構只要具有Symbol.iterator屬性，就可以認為是“可遍歷的”（iterable）。Symbol.iterator屬性本身是一個函數，就是當前數據結構默認的遍歷器生成函數。執行這個函數，就會返回一個遍歷器。至于屬性名Symbol.iterator，它是一個表達式，返回Symbol對象的iterator屬性，這是一個預定義好的、類型為 Symbol 的特殊值，所以要放在方括號內（參見 Symbol 一章）。

const obj = {
  [Symbol.iterator] : function () {  
    //Symbol.iterator是指Symbol對象的iterator屬性，所以使用其作為obj的屬性名需要使用[]抱起來，
    return {
      next: function () {
        return {
          value: 1,
          done: true
        };
      }
    };
  }
};

上面代碼中，對象obj是可遍歷的（iterable），因為具有Symbol.iterator屬性。執行這個屬性，會返回一個遍歷器對象。該對象的根本特征就是具有next方法。每次調用next方法，都會返回一個代表當前成員的信息對象，具有value和done兩個屬性。
原生具備 Iterator 接口的數據結構如下：

Array

Map

Set

String

TypedArray

函數的 arguments 對象

NodeList 對象

閱讀阮老師的es6的隨手筆記：http://es6.ruanyifeng.com/#do...，本文只是記錄下學習過程，會比只看來的好點

GPU云服務器云服務器對大數據的認識 python的認識對云計算的認識對人工智能的認識

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88878.html

從觀察者模式到迭代器模式系統講解 RxJS Observable（一）

摘要：是的縮寫，起源于，是一個基于可觀測數據流結合觀察者模式和迭代器模式的一種異步編程的應用庫。是基于觀察者模式和迭代器模式以函數式編程思維來實現的。學習之前我們需要先了解觀察者模式和迭代器模式，還要對流的概念有所認識。 RxJS 是 Reactive Extensions for JavaScript 的縮寫，起源于 Reactive Extensions，是一個基于可觀測數據流 Stre...

notebin 2019-08-23 18:02 評論0 收藏0
【JS基礎】從JavaScript中的for...of說起(上) - iterator 和 gene

摘要：當這個迭代器的方法被首次后續調用時，其內的語句會執行到第一個后續出現的位置為止，后緊跟迭代器要返回的值。在這個回調函數里，我們使用第一個請求返回的，再次發起一個請求。寫在前面本文首發于公眾號：符合預期的CoyPan 后續文章：【JS基礎】從JavaScript中的for...of說起(下) - async和await 先來看一段很常見的代碼： const arr = [1, 2, ...

wslongchen 2019-08-23 16:48 評論0 收藏0
es6 generator函數

摘要：返回的遍歷器對象可以依次遍歷函數內部的每一個狀態。示例內部捕獲外部捕獲內部捕獲外部捕獲上面代碼遍歷器對象連續拋出兩個錯誤，第一個被函數體內的捕獲。上面代碼中，首先執行函數，獲取遍歷器對象，然后使用方法第二行，執行異步任務的第一階段。參考來源《ecmascript6 入門》generator部分認識generator函數形式上，generator函數有兩個特點：一是functio...

voidking 2019-08-20 15:18 評論0 收藏0
詳解NodeList 和 HTMLCollection 和 Array

摘要：展開的屬性后發現，繼承于一個對象，而這個對象又繼承于對象。這證實了我們對的猜想。是比較新的模型，相比更加完善，不光有元素，還有節點和。關于，和的關系，就是長得像，有個別相似的功能，但是是完全不一樣的東西。 Array，NodeList， HTMLCollection這三個概念和它們之間的關系有很多做了幾年前端的同學都搞不清楚，經常遇到但是又感覺很陌生，剪不斷理還亂的感覺。今天咱們就來理...

xietao3 2019-08-22 18:32 評論0 收藏0