JavaScript 中的迭代器協(xié)議通過定義標(biāo)準(zhǔn)遍歷方式，使不同數(shù)據(jù)結(jié)構(gòu)能以統(tǒng)一接口進行訪問。其核心包含兩部分：1. 迭代器對象必須實現(xiàn) next() 方法，返回包含 value 和 done 屬性的對象；2. 可迭代對象必須實現(xiàn) symbol.iterator 方法，返回一個迭代器對象。生成器函數(shù)可便捷地創(chuàng)建迭代器，通過 yield 暫停并返回值。錯誤處理可在 next() 中捕獲異常并返回，或拋出終止循環(huán)。異步編程中可通過異步生成器與 for await…of 配合實現(xiàn)異步迭代。
迭代器協(xié)議在 JavaScript 中定義了一種標(biāo)準(zhǔn)方式來遍歷集合中的元素。它允許你以一種統(tǒng)一的方式訪問不同的數(shù)據(jù)結(jié)構(gòu)，而無需關(guān)心底層實現(xiàn)的細節(jié)。簡單來說，它就是個接口，規(guī)定了如何一步一步地訪問一個集合。
解決方案
JavaScript 迭代器協(xié)議主要依賴于兩個關(guān)鍵部分：迭代器對象和可迭代對象。
1. 迭代器對象 (Iterator Object)
迭代器對象必須實現(xiàn) next() 方法。這個方法返回一個包含 value 和 done 屬性的對象：
- value: 集合中的下一個值。
- done: 一個布爾值，指示迭代是否完成。如果迭代完成，done 應(yīng)該為 true；否則為 false。
2. 可迭代對象 (Iterable Object)
可迭代對象必須實現(xiàn) Symbol.iterator 方法。這個方法返回一個迭代器對象。Symbol.iterator 是一個特殊的 symbol，用于指定對象的默認迭代器。
示例：
const myIterable = { data: [1, 2, 3], [Symbol.iterator]() { let index = 0; return { next: () => { if (index < this.data.length) { return { value: this.data[index++], done: false }; } else { return { value: undefined, done: true }; } } }; } }; // 使用 for...of 循環(huán)遍歷 for (const item of myIterable) { console.log(item); // 輸出 1, 2, 3 } // 手動使用迭代器 const iterator = myIterable[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 }
在這個例子中，myIterable 是一個可迭代對象，因為它實現(xiàn)了 Symbol.iterator 方法。這個方法返回一個迭代器對象，該對象包含 next() 方法，用于逐個返回 myIterable.data 中的元素。
為什么需要迭代器協(xié)議？
迭代器協(xié)議提供了一種標(biāo)準(zhǔn)化的方式來遍歷各種數(shù)據(jù)結(jié)構(gòu)，例如數(shù)組、map、Set 和自定義對象。這使得我們可以使用相同的語法（例如 for…of 循環(huán)）來遍歷不同類型的數(shù)據(jù)結(jié)構(gòu)，而無需關(guān)心它們底層的實現(xiàn)細節(jié)。如果沒有迭代器協(xié)議，我們就需要針對每種數(shù)據(jù)結(jié)構(gòu)編寫不同的遍歷代碼，這將導(dǎo)致代碼冗余和維護困難。
迭代器和生成器 (Generators) 的關(guān)系？
生成器函數(shù)是一種特殊的函數(shù)，它可以暫停執(zhí)行并在稍后恢復(fù)執(zhí)行。生成器函數(shù)返回一個迭代器對象。這使得生成器函數(shù)成為創(chuàng)建迭代器的非常方便的方式。
function* myGenerator(data) { for (let i = 0; i < data.length; i++) { yield data[i]; } } const myIterable = myGenerator([4, 5, 6]); for (const item of myIterable) { console.log(item); // 輸出 4, 5, 6 }
在這個例子中，myGenerator 是一個生成器函數(shù)。當(dāng)我們調(diào)用 myGenerator([4, 5, 6]) 時，它返回一個迭代器對象。yield 關(guān)鍵字用于暫停函數(shù)的執(zhí)行并返回一個值。每次調(diào)用迭代器的 next() 方法時，函數(shù)會從上次暫停的地方恢復(fù)執(zhí)行，直到遇到下一個 yield 關(guān)鍵字。
如何處理迭代器中的錯誤？
在迭代器中處理錯誤的一種常見方法是在 next() 方法中捕獲異常并將其返回到 value 屬性中。或者，你可以選擇直接拋出異常，但這可能會導(dǎo)致循環(huán)提前終止。
const myIterable = { data: [1, 2, 'a', 3], [Symbol.iterator]() { let index = 0; return { next: () => { try { if (typeof this.data[index] !== 'number') { throw new Error('Invalid data type'); } if (index < this.data.length) { return { value: this.data[index++], done: false }; } else { return { value: undefined, done: true }; } } catch (error) { return { value: error, done: true }; // 返回錯誤信息并結(jié)束迭代 } } }; } }; for (const item of myIterable) { if (item instanceof Error) { console.error('Error during iteration:', item); break; // 或者繼續(xù)處理后續(xù)數(shù)據(jù) } console.log(item); }
這里，如果遇到非數(shù)字類型的數(shù)據(jù)，會拋出一個錯誤，并將其作為迭代器的 value 返回。循環(huán)可以檢查 value 是否為 Error 的實例，并進行相應(yīng)的處理。
迭代器協(xié)議與異步編程
迭代器協(xié)議本身是同步的，但它可以與異步編程技術(shù)結(jié)合使用。例如，你可以創(chuàng)建一個異步迭代器，它在每次調(diào)用 next() 方法時返回一個 promise。
async function* myAsyncGenerator(data) { for (let i = 0; i < data.length; i++) { await new Promise(resolve => setTimeout(resolve, 100)); // 模擬異步操作 yield data[i]; } } (async () => { for await (const item of myAsyncGenerator([7, 8, 9])) { console.log(item); // 輸出 7, 8, 9 (每隔 100ms) } })();
在這個例子中，myAsyncGenerator 是一個異步生成器函數(shù)。for await…of 循環(huán)用于遍歷異步迭代器。每次迭代時，它會等待 Promise resolve 后再執(zhí)行循環(huán)體。
