首頁 >web前端 >js教程 >ES6中迭代器的原理與可迭代物件的介紹(附範例)

ES6中迭代器的原理與可迭代物件的介紹(附範例)

不言
不言轉載
2018-10-29 15:34:362642瀏覽

這篇文章帶給大家的內容是關於ES6中迭代器的原理與可迭代物件的介紹(附範例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

ES6 新的陣列方法、集合、for-of 迴圈、展開運算子(...)甚至非同步程式設計都依賴迭代器(Iterator )實作。本文會詳解ES6 的迭代器與生成器,並進一步挖掘可迭代物件的內部原理與使用方法

一、迭代器的原理

在程式語言中處理陣列或集合時,使用循環語句必須要初始化一個變數記錄迭代位置,而程式化地使用迭代器可以簡化這個資料運算

如何設計一個迭代器呢?

迭代器的本身是一個對象,這個對像有next( ) 方法返回結果對象,這個結果對像有下一個返回值value、迭代完成布爾值done,模擬創建一個簡單迭代器如下:

function createIterator(iterms) {
  let i = 0
  return {
    next() {
      let done = (i >= iterms.length)
      let value = !done ? iterms[i++] : undefined
      return {
        done,
        value
      }
    }
  }
}

let arrayIterator = createIterator([1, 2, 3])

console.log(arrayIterator.next()) // { done: false, value: 1 }
console.log(arrayIterator.next()) // { done: false, value: 2 }
console.log(arrayIterator.next()) // { done: false, value: 3 }
console.log(arrayIterator.next()) // { done: true, value: undefined }
對上述語法感到困惑的,可參考:ES6中物件的新功能與解構賦值的詳解(程式碼範例)

每次呼叫迭代器的next( ) 都會返回下一個對象,直到資料集被用盡。

ES6 中迭代器的編寫規則類似,但引入了生成器對象,更簡單的創建迭代器對象

二、創建迭代器

ES6 封裝了一個生成器用來建立迭代器。顯然生成器是傳回迭代器的函數,這個函數透過 function 後的星號(*)表示,並使用新的內部專用關鍵字yield指定迭代器 next( ) 方法的傳回值。

如何使用 ES6 生成器建立一個迭代器呢?一個簡單的例子如下:

function *createIterator() {
  yield 123;
  yield 'someValue'
}

let someIterator = createIterator()

console.log(someIterator.next()) // { value: 123, done: false }
console.log(someIterator.next()) // { value: 'someValue', done: false }
console.log(someIterator.next()) // { value: undefined, done: true }

使用yield關鍵字可以傳回任意值或表達式,可以為迭代器批量添加元素:

// let createIterator = function *(items) { // 生成器函数表达式
function *createIterator(items) {
  for (let i = 0; i < items.length; i++) {
    yield items[i]
  }
}

let someIterator = createIterator([123, &#39;someValue&#39;])

console.log(someIterator.next()) // { value: 123, done: false }
console.log(someIterator.next()) // { value: &#39;someValue&#39;, done: false }
console.log(someIterator.next()) // { value: undefined, done: true }

由於生成器本身是函數,所以可添加到物件中,使用方式如下:

let obj = {
  // createIterator: function *(items) { // ES5
  *createIterator(items) { // ES6
    for (let i = 0; i < items.length; i++) {
      yield items[i]
    }
  }
}
let someIterator = obj.createIterator([123, &#39;someValue&#39;])
產生器函數的一個特點是,當執行完一句yield 語句後函數會自動停止執行,再次呼叫迭代器的next( ) 方法才會繼續執行下一個yield 語句。
這種自動中止函數執行的能力衍生出許多高階用法。

三、可迭代對象

在ES6 中常用的集合對象(數組、Set/Map集合)和字串都是可迭代對象,這些對像都有預設的迭代器和Symbol.iterator屬性。

透過生成器建立的迭代器也是可迭代對象,因為生成器預設會為Symbol.iterator屬性賦值。

3.1 Symbol.iterator

可迭代物件具有Symbol.iterator屬性,即具有Symbol.iterator屬性的物件都有預設迭代器。

我們可以用Symbol.iterator來存取物件的預設迭代器,例如對於一個陣列:

let list = [11, 22, 33]
let iterator = list[Symbol.iterator]()
console.log(iterator.next()) // { value: 11, done: false }

Symbol.iterator獲得了數組這個可迭代物件的預設迭代器,並操作它遍歷了數組中的元素。

反之,我們可以用Symbol.iterator來偵測物件是否為可迭代物件:

function isIterator(obj) {
  return typeof obj[Symbol.iterator] === &#39;function&#39;
}

console.log(isIterator([11, 22, 33])) // true
console.log(isIterator(&#39;sometring&#39;)) // 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

顯然陣列、Set/Map 集合、字串都是可迭代對象,而WeakSet/WeakMap集合(弱引用集合)是不可迭代的。

3.2 建立可迭代物件

預設情況下,自訂的物件都是不可迭代的。

剛剛講過,透過生成器建立的迭代器也是一種可迭代對象,生成器預設會為Symbol.iterator屬性賦值。

那要如何將自訂物件變成可迭代物件呢?透過為Symbol.iterator屬性新增一個生成器:

let collection = {
  items: [11,22,33],
  *[Symbol.iterator]() {
    for (let item of this.items){
      yield item
    }
  }
}

console.log(isIterator(collection)) // true

for (let item of collection){
  console.log(item) // 11 22 33
}

陣列 items 是可迭代對象,collection 物件透過給Symbol.iterator屬性賦值也成為可迭代物件。

3.3 for-of

#注意到上個栗子使用了for-of代替索引循環,for-of是 ES6 為可迭代物件新加入的特性。

思考一下for-of迴圈的實作原理。

對於使用for-of的可迭代對象,for-of每執行一次就會調用這個可迭代對象的next( ),並將返回結果存儲在一個變數中,持續執行直到可迭代對象done 屬性值為false。

// 迭代一个字符串
let str = &#39;somestring&#39;

for (let item of str){
  console.log(item) // s o m e s t r i n g
}

本質上來說,for-of呼叫str 字串的Symbol.iterator屬性方法取得迭代器(這個過程由JS 引擎完成),然後多次呼叫next( ) 方法將物件value 值儲存在item 變數。

將for-of用於不可迭代物件、null 或 undefined 會報錯!

3.4 展開運算子(...)

ES6 語法糖展開運算子(...)也是服務於可迭代對象,即只可以「展開」陣列、集合、字串、自訂可迭代物件。

以下栗子輸出不同可迭代物件展開運算子計算的結果:

let str = &#39;somestring&#39;
console.log(...str) // s o m e s t r i n g
let set = new Set([1, 2, 2, 5, 8, 8, 8, 9])
console.log(set) // Set { 1, 2, 5, 8, 9 }
console.log(...set) // 1 2 5 8 9
let map = new Map([[&#39;name&#39;, &#39;jenny&#39;], [&#39;id&#39;, 123]])
console.log(map) // Map { &#39;name&#39; => 'jenny', 'id' => 123 }
console.log(...map) // [ 'name', 'jenny' ] [ 'id', 123 ]
let num1 = [1, 2, 3], num2 = [7, 8, 9]
console.log([...num1, ...num2]) // [ 1, 2, 3, 7, 8, 9 ]
let udf
console.log(...udf) // TypeError: undefined is not iterable

由上述程式碼可以看出,展開運算子(...)可以方便地將可迭代物件轉換為數組。同for-of一樣,展開運算子(...)用於不可迭代物件、null 或 undefined 會報錯!

四.預設迭代器

ES6 为很多内置对象提供了默认的迭代器,只有当内建的迭代器不能满足需求时才自己创建迭代器。

ES6 的 三个集合对象:Set、Map、Array 都有默认的迭代器,常用的如values()方法、entries()方法都返回一个迭代器,其值区别如下:

entries():多个键值对

values():集合的值

keys():集合的键

调用以上方法都可以得到集合的迭代器,并使用for-of循环,示例如下:

/******** Map ***********/
let map = new Map([['name', 'jenny'], ['id', 123]])

for(let item of map.entries()){
  console.log(item) // [ 'name', 'jenny' ]  [ 'id', 123 ]
}
for(let item of map.keys()){
  console.log(item) // name id
}
for (let item of map.values()) {
  console.log(item) // jenny 123
}

/******** Set ***********/
let set = new Set([1, 4, 4, 5, 5, 5, 6, 6,])

for(let item of set.entries()){
  console.log(item) // [ 1, 1 ] [ 4, 4 ] [ 5, 5 ] [ 6, 6 ]
}

/********* Array **********/
let array = [11, 22, 33]

for(let item of array.entries()){
  console.log(item) // [ 0, 11 ] [ 1, 22 ] [ 2, 33 ]
}

此外 String 和 NodeList 类型都有默认的迭代器,虽然没有提供其它的方法,但可以用for-of循环

以上是ES6中迭代器的原理與可迭代物件的介紹(附範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:segmentfault.com。如有侵權,請聯絡admin@php.cn刪除