ES6 迭代器 Iterator使用總結(jié)
更新時(shí)間：2025年02月08日 17:23:41 作者：傻小胖
ES6引入了Iterator（迭代器）接口,用于順序訪問可迭代對(duì)象,Iterator接口提供統(tǒng)一的訪問接口,并通過for...of循環(huán)供消費(fèi),本文給大家介紹ES6 迭代器 Iterator使用總結(jié),感興趣的朋友跟隨小編一起看看吧
Iterator（迭代器）是 ES6 引入的一種 接口，用于 順序訪問 可迭代對(duì)象（Array、Set、Map、String、arguments、自定義對(duì)象等）。
Iterator（迭代器）的作用有三個(gè)：
- 為各種數(shù)據(jù)結(jié)構(gòu)提供一個(gè)統(tǒng)一的、簡便的訪問接口
- 使數(shù)據(jù)結(jié)構(gòu)的成員能夠按某種次序排列
- ES6 創(chuàng)造了一種新的遍歷命令 for…of 循環(huán)，Iterator 接口主要供 for…of 消費(fèi)
1. 迭代器的基本概念
(1) 迭代器是什么？
迭代器是一種 特殊對(duì)象，提供 next() 方法，每次調(diào)用都會(huì)返回：
{ value: 當(dāng)前值, done: 是否完成 }當(dāng) done: true 時(shí)，表示迭代結(jié)束。
Iterator 的遍歷過程
// Iterator 的遍歷過程如下:
1. 創(chuàng)建一個(gè)指針對(duì)象，指向當(dāng)前數(shù)據(jù)結(jié)構(gòu)的起始位置
2. 第一次調(diào)用指針對(duì)象的 next 方法，可以將指針指向數(shù)據(jù)結(jié)構(gòu)的第一個(gè)成員
3. 第二次調(diào)用指針對(duì)象的 next 方法，指針就指向數(shù)據(jù)結(jié)構(gòu)的第二個(gè)成員
4. 不斷調(diào)用指針對(duì)象的 next 方法，直到它指向數(shù)據(jù)結(jié)構(gòu)的結(jié)束位置
// 每一次調(diào)用 next 方法，都會(huì)返回一個(gè)包含 value 和 done 兩個(gè)屬性的對(duì)象
{
value: 當(dāng)前成員的值,
done: 布爾值，表示遍歷是否結(jié)束
}2. 生成迭代器
(1) 手動(dòng)創(chuàng)建迭代器
function createIterator(arr) {
let index = 0;
return {
next: function () {
return index < arr.length
? { value: arr[index++], done: false }
: { value: undefined, done: true };
}
};
}
let iterator = createIterator(["a", "b", "c"]);
console.log(iterator.next()); // { value: 'a', done: false }
console.log(iterator.next()); // { value: 'b', done: false }
console.log(iterator.next()); // { value: 'c', done: false }
console.log(iterator.next()); // { value: undefined, done: true }?? 每次 next() 調(diào)用，都會(huì)返回 value 并前進(jìn)。
(2) 使用 Symbol.iterator
所有 可迭代對(duì)象（Array、Set、Map 等）都有 默認(rèn)的迭代器，可以用 Symbol.iterator 訪問：
let arr = ["x", "y", "z"];
let iterator = arr[Symbol.iterator]();
console.log(iterator.next()); // { value: 'x', done: false }
console.log(iterator.next()); // { value: 'y', done: false }
console.log(iterator.next()); // { value: 'z', done: false }
console.log(iterator.next()); // { value: undefined, done: true }?? 數(shù)組、字符串、Set、Map 都有 Symbol.iterator，可直接迭代。
(3) 自定義對(duì)象的迭代器
普通對(duì)象沒有默認(rèn)迭代器，需手動(dòng)實(shí)現(xiàn)：
let myObj = {
data: [10, 20, 30],
[Symbol.iterator]: function () {
let index = 0;
return {
next: () => {
return index < this.data.length
? { value: this.data[index++], done: false }
: { value: undefined, done: true };
}
};
}
};
let iter = myObj[Symbol.iterator]();
console.log(iter.next()); // { value: 10, done: false }
console.log(iter.next()); // { value: 20, done: false }
console.log(iter.next()); // { value: 30, done: false }
console.log(iter.next()); // { value: undefined, done: true }?? 對(duì)象沒有默認(rèn)迭代器，需實(shí)現(xiàn) Symbol.iterator 才能用 for...of。
3. for...of 遍歷迭代器
所有 實(shí)現(xiàn) Symbol.iterator 的對(duì)象，都可以用 for...of 遍歷：
let arr = ["A", "B", "C"];
for (let char of arr) {
console.log(char);
}
// A
// B
// C?? 相比 forEach()，for...of 可與 break、continue 配合使用。
4. 可迭代對(duì)象
? 可以使用 for...of、Symbol.iterator 的對(duì)象
ArrayStringSetMapargumentsNodeList- 自定義對(duì)象（需實(shí)現(xiàn)
Symbol.iterator）
5. Set 和 Map 的迭代器
(1) Set 迭代
let mySet = new Set(["apple", "banana", "cherry"]);
let setIter = mySet[Symbol.iterator]();
console.log(setIter.next()); // { value: 'apple', done: false }
console.log(setIter.next()); // { value: 'banana', done: false }
console.log(setIter.next()); // { value: 'cherry', done: false }
console.log(setIter.next()); // { value: undefined, done: true }?? Set 按插入順序存儲(chǔ)，迭代返回唯一值。
(2) Map 迭代
let myMap = new Map([
["name", "Alice"],
["age", 25]
]);
for (let [key, value] of myMap) {
console.log(key, value);
}
// name Alice
// age 25?? Map 迭代時(shí)返回 [key, value] 數(shù)組。
6. 迭代器 vs 生成器
| 特性 | 迭代器 (Iterator) | 生成器 (Generator) |
|---|---|---|
| 創(chuàng)建方式 | 手動(dòng)實(shí)現(xiàn) next() | function* 生成 |
使用 Symbol.iterator | 需要手動(dòng)實(shí)現(xiàn) | 生成器自動(dòng)實(shí)現(xiàn) |
| 可暫停執(zhí)行 | ? 否 | ? 是（可 yield） |
示例：生成器
function* generatorFunction() {
yield "A";
yield "B";
yield "C";
}
let gen = generatorFunction();
console.log(gen.next()); // { value: 'A', done: false }
console.log(gen.next()); // { value: 'B', done: false }
console.log(gen.next()); // { value: 'C', done: false }
console.log(gen.next()); // { value: undefined, done: true }?? 生成器更簡潔，支持 yield 暫停執(zhí)行。
7. Iterator 使用場(chǎng)景
7.1 解構(gòu)賦值
// 對(duì)數(shù)組和 Set 結(jié)構(gòu)進(jìn)行解構(gòu)賦值時(shí)，會(huì)默認(rèn)調(diào)用 Iterator 接口
let set = new Set().add('a').add('b').add('c');
let [x, y] = set; // x='a'; y='b'7.2 擴(kuò)展運(yùn)算符
// 擴(kuò)展運(yùn)算符（...）也會(huì)調(diào)用默認(rèn)的 Iterator 接口 let str = 'hello'; [...str] // ['h', 'e', 'l', 'l', 'o'] let arr = ['b', 'c']; ['a', ...arr, 'd'] // ['a', 'b', 'c', 'd']
7.3 yield*
// yield* 后面跟的是一個(gè)可遍歷的結(jié)構(gòu)，它會(huì)調(diào)用該結(jié)構(gòu)的遍歷器接口
let generator = function* () {
yield 1;
yield* [2, 3, 4];
yield 5;
};
for (let v of generator()) {
console.log(v);
}
// 1, 2, 3, 4, 58. 注意事項(xiàng)
8.1 對(duì)象的 for…of 循環(huán)
// 對(duì)象默認(rèn)不具備 Iterator 接口，不能直接使用 for...of
let obj = { a: 1, b: 2, c: 3 };
for (let value of obj) {
console.log(value); // TypeError: obj is not iterable
}
// 正確的遍歷對(duì)象方式
// 1. 使用 Object.keys()
for (let key of Object.keys(obj)) {
console.log(key + ': ' + obj[key]);
}
// 2. 使用 Object.entries()
for (let [key, value] of Object.entries(obj)) {
console.log(key + ': ' + value);
}8.2 Iterator 接口與 Generator 函數(shù)
// 使用 Generator 函數(shù)實(shí)現(xiàn) Iterator 接口
let obj = {
*[Symbol.iterator]() {
yield 'hello';
yield 'world';
}
};
for (let x of obj) {
console.log(x);
}
// hello
// world9. 最佳實(shí)踐
9.1 為類部署 Iterator 接口
class Collection {
constructor() {
this.items = [];
}
add(item) {
this.items.push(item);
}
*[Symbol.iterator]() {
for (let item of this.items) {
yield item;
}
}
}
let collection = new Collection();
collection.add('foo');
collection.add('bar');
for (let value of collection) {
console.log(value);
}
// foo
// bar9.2 異步迭代器
// ES2018 引入了異步迭代器
const asyncIterable = {
async *[Symbol.asyncIterator]() {
yield 'hello';
yield 'async';
yield 'iteration';
}
};
(async () => {
for await (const x of asyncIterable) {
console.log(x);
}
})();
// hello
// async
// iteration10. 適用場(chǎng)景
? 適用于
遍歷數(shù)組、字符串、Set、Map自定義可迭代對(duì)象流式處理數(shù)據(jù)（類似分頁加載）避免一次性加載大數(shù)據(jù)（生成器）
11. 總結(jié)
Iterator是 ES6 提供的一種接口，用于順序訪問集合。Symbol.iterator讓對(duì)象變成可迭代，可用于for...of、spread。Set、Map、Array、String默認(rèn)實(shí)現(xiàn)Symbol.iterator，可直接迭代。- 生成器 (
Generator) 自動(dòng)創(chuàng)建迭代器，可暫停執(zhí)行 (yield)，更強(qiáng)大。
到此這篇關(guān)于ES6 迭代器 Iterator使用總結(jié)的文章就介紹到這了,更多相關(guān)ES6 迭代器 Iterator使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
小程序云開發(fā)如何實(shí)現(xiàn)圖片上傳及發(fā)表文字
這篇文章主要為大家詳細(xì)介紹了小程序云開發(fā)教程，如何實(shí)現(xiàn)圖片上傳及發(fā)表文字，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
越來越多的網(wǎng)站進(jìn)行數(shù)據(jù)傳輸時(shí)不使用明文傳輸,本文主要介紹了JS逆向之加密參數(shù)定位,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
這篇文章主要介紹了Javascript中的方法和匿名方法,以實(shí)例形式較為詳細(xì)的分析了javascript中方法及匿名方法的定義與使用技巧,需要的朋友可以參考下2015-06-06
js實(shí)現(xiàn)響應(yīng)按鈕點(diǎn)擊彈出可拖拽的非模態(tài)對(duì)話框完整實(shí)例【測(cè)試可用】
這篇文章主要介紹了js實(shí)現(xiàn)響應(yīng)按鈕點(diǎn)擊彈出可拖拽的非模態(tài)對(duì)話框,結(jié)合完整實(shí)例形式分析了原生JavaScript實(shí)現(xiàn)的可拖拽非模態(tài)對(duì)話框?qū)崿F(xiàn)技巧與使用方法,需要的朋友可以參考下2023-04-04
一個(gè)仿Windows UI的html table，兼容IE和firefox
兼容IE和firefox的仿Windows UI的html table2008-11-11
前端跨標(biāo)簽頁數(shù)據(jù)同步的五大實(shí)現(xiàn)方案
本文將深入對(duì)比?postMessage、MessageChannel、BroadcastChannel、sessionStorage、localStorage?這五種跨窗口通信技術(shù),希望可以幫助開發(fā)者做出正確的技術(shù)選擇2026-01-01
JavaScript動(dòng)態(tài)提示輸入框輸入字?jǐn)?shù)的方法
這篇文章主要介紹了JavaScript動(dòng)態(tài)提示輸入框輸入字?jǐn)?shù)的方法,實(shí)例分析了javascript針對(duì)頁面元素的動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
javascript勻速動(dòng)畫和緩沖動(dòng)畫詳解
這篇文章主要為大家詳細(xì)介紹了javascript勻速動(dòng)畫和緩沖動(dòng)畫,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
Bootstrap項(xiàng)目實(shí)戰(zhàn)之首頁內(nèi)容介紹（全）
本文分為兩部分介紹Bootstrap首頁內(nèi)容介紹的實(shí)現(xiàn)代碼，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)驗(yàn)證碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07