首頁 > web前端 > js教程 > 主體

十分鐘搞清楚什麼是JavaScript迭代器

WBOY
發布: 2021-12-22 18:20:23
轉載
4036 人瀏覽過

這篇文章為大家帶來了JavaScript中關於迭代器的相關知識,下面我們就一起來看一下什麼是迭代器又怎樣自訂迭代器,希望對大家有幫助。

十分鐘搞清楚什麼是JavaScript迭代器

1. 什麼是迭代器 ?

  • 迭代器是一種介面機制,為各種不同的資料結構提供統一存取的機制。 (即為了讓一些不支援遍歷的資料結構可遍歷)

最常見的就是Array迭代器,依序傳回數組中的值。

let arr = [1,2,3,4,5];for (let val of arr) {
    console.log(val);}
登入後複製

十分鐘搞清楚什麼是JavaScript迭代器


2. 自訂迭代器

那我們要如何實作迭代器呢?

首先,它需要滿足兩點:

  • 可迭代協定
  • 迭代器協定

#可迭代協定

可迭代協定允許JavaScript 物件定義或自訂它們的迭代行為

如何滿足可迭代協定?

要成為可迭代對象, 一個物件必須實作 @@iterator 方法。
這表示物件(或它原型鏈上的某個物件)必須有一個鍵為@@iterator 的屬性,可透過常數Symbol.iterator 存取該屬性

##也就是說要想滿足可迭代協議,那麼你的物件需要有一個鍵名為

Symbol.iterator的屬性,使其成為可迭代物件。

迭代器協定

迭代器協定定義了產生一系列值(無論是有限個還是無限個)的標準方式。

當值為有限個時,所有的值都會被迭代完畢後,則會傳回一個預設回傳值。

如何滿足迭代器協定 ?

你的物件需要至少實作一個

next()方法,這個方法回傳一個迭代器物件IteratorResult。這個迭代器物件包含兩個屬性done和·value

    done:
  • 如果迭代器可以產生序列中的下一個值,則為 false。
    如果迭代器已將序列迭代完畢,則為 true
  • value
  • 迭代器傳回的值。 done 為true 時可省略

那麼我們接下來開始自訂一個迭代器

由前文所講,要想自訂迭代器,需要符合以下兩個條件:

    成為可迭代對象,即有一個
  • Symbol.iterator 屬性 (即可迭代協定:Symbol.iterator)
  • 該迭代器物件傳回一個
  • next() 方法,這個next() 方法傳回一個包含valuedone 屬性的物件 (即迭代器協定:return { next() { return { value, done } })
  • let colors = {
        blue : "蓝色",
        green : "绿色",
        yellow : "黄色"}
    登入後複製
colors 現在是一個不可迭代對象,我們想要使用for… of 對其進行遍歷,那麼就可以自訂迭代器。

接下來,開始實作:

colors[Symbol.iterator] = function() {
	let keys = Object.keys(colors);
	// 如果用 let keys = Reflect.ownKeys(colors),keys 就会包括一些不可枚举的属性
	// 那么后面的 len 要减一,减去Symbol.iterator这个属性
	// 根据实际情况选择使用
	let len = keys.length;
	let index = 0;
	
	return {
	    next : function() {
	        if (index < len) {
	            return {
	                value : colors[keys[index++]],
	                done : false
	            }
	        }
	        return { done : true }
	    }
	}}
登入後複製

讓我們來驗證一下:

for (let val of colors) {
    console.log(val);}
登入後複製

十分鐘搞清楚什麼是JavaScript迭代器

【相關推薦:

javascript學習教程#

以上是十分鐘搞清楚什麼是JavaScript迭代器的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板