本篇內(nèi)容介紹了“JavaScript迭代器怎么自定義”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)公司主要為客戶提供服務(wù)項(xiàng)目涵蓋了網(wǎng)頁視覺設(shè)計(jì)、VI標(biāo)志設(shè)計(jì)、全網(wǎng)整合營銷推廣、網(wǎng)站程序開發(fā)、HTML5響應(yīng)式網(wǎng)站建設(shè)、成都做手機(jī)網(wǎng)站、微商城、網(wǎng)站托管及網(wǎng)站維護(hù)公司、WEB系統(tǒng)開發(fā)、域名注冊、國內(nèi)外服務(wù)器租用、視頻、平面設(shè)計(jì)、SEO優(yōu)化排名。設(shè)計(jì)、前端、后端三個(gè)建站步驟的完善服務(wù)體系。一人跟蹤測試的建站服務(wù)標(biāo)準(zhǔn)。已經(jīng)為垃圾桶行業(yè)客戶提供了網(wǎng)站維護(hù)服務(wù)。

1.?什么是迭代器 ？

• 迭代器就是一種接口機(jī)制，為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一訪問的機(jī)制。(即為了讓一些不支持遍歷的數(shù)據(jù)結(jié)構(gòu)可遍歷)

最常見的就是Array迭代器，按順序返回?cái)?shù)組中的值。

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

2.?自定義迭代器

那么我們?nèi)绾螌?shí)現(xiàn)迭代器呢？

首先，它需要滿足兩點(diǎn)：

• 可迭代協(xié)議

• 迭代器協(xié)議

可迭代協(xié)議

可迭代協(xié)議允許 JavaScript 對象定義或定制它們的迭代行為

如何滿足可迭代協(xié)議 ？

要成為可迭代對象， 一個(gè)對象必須實(shí)現(xiàn) @@iterator 方法。
這意味著對象（或者它原型鏈上的某個(gè)對象）必須有一個(gè)鍵為@@iterator 的屬性，可通過常量 Symbol.iterator 訪問該屬性

也就是說要想滿足可迭代協(xié)議，那么你的對象需要有一個(gè)鍵名為Symbol.iterator的屬性，使其成為可迭代對象。

迭代器協(xié)議

迭代器協(xié)議定義了產(chǎn)生一系列值（無論是有限個(gè)還是無限個(gè)）的標(biāo)準(zhǔn)方式。
當(dāng)值為有限個(gè)時(shí)，所有的值都被迭代完畢后，則會(huì)返回一個(gè)默認(rèn)返回值。

如何滿足迭代器協(xié)議 ？

你的對象需要至少實(shí)現(xiàn)一個(gè)next()方法，這個(gè)方法返回一個(gè)迭代器對象IteratorResult。這個(gè)迭代器對象包含兩個(gè)屬性done和·value。

• done：
  如果迭代器可以產(chǎn)生序列中的下一個(gè)值，則為 false。
  如果迭代器已將序列迭代完畢，則為 true

• value
  迭代器返回的值。done 為 true 時(shí)可省略

那么我們接下來開始自定義一個(gè)迭代器

由前文所講，要想自定義迭代器，需要符合以下兩個(gè)條件：

• 成為可迭代對象，即有一個(gè) Symbol.iterator 屬性
  （即可迭代協(xié)議：Symbol.iterator）

• 該迭代器對象返回一個(gè) next() 方法，這個(gè) next() 方法返回一個(gè)包含value 和 done 屬性的對象
  （即迭代器協(xié)議：return { next() { return { value, done } }）

let colors = {
    blue : "藍(lán)色",
    green : "綠色",
    yellow : "黃色"}

colors 現(xiàn)在是一個(gè)不可迭代對象，我們想使用 for…of 對其進(jìn)行遍歷，那么就可以自定義迭代器。
接下來，開始實(shí)現(xiàn)：

colors[Symbol.iterator] = function() {
	let keys = Object.keys(colors);
	// 如果用 let keys = Reflect.ownKeys(colors)，keys 就會(huì)包括一些不可枚舉的屬性
	// 那么后面的 len 要減一，減去Symbol.iterator這個(gè)屬性
	// 根據(jù)實(shí)際情況選擇使用
	let len = keys.length;
	let index = 0;
	
	return {
	    next : function() {
	        if (index < len) {
	            return {
	                value : colors[keys[index++]],
	                done : false
	            }
	        }
	        return { done : true }
	    }
	}}

讓我們對其驗(yàn)證一下：

for (let val of colors) {
    console.log(val);}

“JavaScript迭代器怎么自定義”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！