如何理解并掌握ES6中的迭代器

這篇文章主要介紹“如何理解并掌握ES6中的迭代器”，在日常操作中，相信很多人在如何理解并掌握ES6中的迭代器問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”如何理解并掌握ES6中的迭代器”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

JavaScript 中除了 Array 之外，ES6 還新增加了 Map、Set  結(jié)構(gòu)，當(dāng)我們需要操作這些數(shù)據(jù)時(shí)，就需要一種統(tǒng)一的接口來(lái)處理這些不同的數(shù)據(jù)結(jié)構(gòu)。ES6 中新增加的 Iterator(迭代器)就提供了這樣一種機(jī)制。

Symbol.iterator 支持的數(shù)據(jù)結(jié)構(gòu)

ES6 中提供了 Symbol.iterator 方法，該方法返回一個(gè)迭代器對(duì)象，目前  Array、Set、Map 這些數(shù)據(jù)結(jié)構(gòu)默認(rèn)具有 Symbol.iterator 屬性，如下所示，可以看到 Object 類(lèi)型是沒(méi)有的。

console.log([][Symbol.iterator]()); // Object [Array Iterator] {} console.log((new Map())[Symbol.iterator]()); // [Map Entries] {  } console.log((new Set())[Symbol.iterator]()); // [Set Iterator] {  } console.log({}[Symbol.iterator]); // undefined

除了上面提到這些數(shù)據(jù)結(jié)構(gòu)，JavaScript 中一些類(lèi)似數(shù)組的對(duì)象也默認(rèn)具有 Symbol.iterator 屬性，例如：字符串、arguments  對(duì)象、DOM 的 NodeList 對(duì)象。

• 字符串

const str = 'nodejs'; console.log(str[Symbol.iterator]()); // Object [String Iterator] {}  for (const val of str) {   console.log(val); // n o d e j s }

• arguments 對(duì)象

function print() {   console.log(arguments[Symbol.iterator]()); // Object [Array Iterator] {}   for (const val of arguments) {     console.log(val); // n o d e   } } print('n', 'o', 'd', 'e')

• DOM NodeList 對(duì)象

const divNodeList = document.getElementsByTagName('div') console.log(divNodeList[Symbol.iterator]()) // Array Iterator {} for (const div of divNodeList) {  // 會(huì)輸出每個(gè) div 標(biāo)簽  console.log(div); }

迭代器對(duì)象的 next 方法

調(diào)用可迭代對(duì)象的 Symbol.iterator 方法會(huì)返回一個(gè)迭代器對(duì)象，它的接口中有一個(gè) next 方法，該方法返回  value 和 done 兩個(gè)屬性，其中 value 屬性是當(dāng)前成員的值，done  屬性表示遍歷是否結(jié)束。了解生成器函數(shù)(Generator)的可能不會(huì)陌生，同樣的當(dāng)你執(zhí)行一個(gè)生成器函數(shù)也會(huì)得到一個(gè)迭代器對(duì)象，但是要區(qū)分  生成器和迭代器不是一個(gè)概念。

const arr = ['N', 'o', 'd', 'e']; const iterator = arr[Symbol.iterator]();  console.log(iterator.next()); // { value: 'N', done: false } console.log(iterator.next()); // { value: 'o', done: false } console.log(iterator.next()); // { value: 'd', done: false } console.log(iterator.next()); // { value: 'e', done: false } console.log(iterator.next()); // { value: undefined, done: true }

上例中聲明一個(gè)數(shù)組 arr，調(diào)用 arr 的 Symbol.iterator 方法創(chuàng)建了一個(gè)迭代器對(duì)象 iterator 之后不斷調(diào)用 next  方法返回當(dāng)前數(shù)組內(nèi)容，直到 next 方法返回值 done 為 true 則該數(shù)組訪問(wèn)完畢。

Iterator 接口遍歷

解構(gòu)賦值

數(shù)組、Set、Map 解構(gòu)賦值時(shí)，會(huì)默認(rèn)調(diào)用 Symbol.iterator 方法。注意 Map 調(diào)用  Symbol.iterator 方法返回的是一個(gè) entries 方法，該方法返回的是一個(gè)新的迭代器對(duì)象且按插入順序包含了 Map 對(duì)象中每個(gè)元素的 [key,  value] 數(shù)組，所以調(diào)用 Map 實(shí)例的 keys 或 values 方法也會(huì)返回一個(gè)新的迭代器對(duì)象。

const set = new Set().add('n').add('o'); const map = new Map().set('d').set('e'); const [xSet, ySet] = set; console.log(xSet, ySet) // n o const [xMap, yMap] = map.keys(); console.log(xMap, yMap) // d e

擴(kuò)展運(yùn)算符

ES6 中的擴(kuò)展運(yùn)算符(...)也會(huì)默認(rèn)調(diào)用數(shù)組、Set、Map 等結(jié)構(gòu)的 Symbol.iterator 方法。

const set = new Set('node'); const [x, y, ...z] = set; console.log(x, y, z); // n o [ 'd', 'e' ]

for...of 循環(huán)

ES6 借鑒了 C++、Python 等語(yǔ)言引入了 for...of 循環(huán)，該循環(huán)內(nèi)部也會(huì)調(diào)用 Symbol.iterator  方法，只要具有 Iterator 接口的數(shù)據(jù)結(jié)構(gòu)都可以使用。

const set = new Set().add('n').add('o');  for (const val of set) {   console.log(val); }

for...of 循環(huán)在執(zhí)行中還可以使用 break; 中斷迭代器的執(zhí)行。以下示例，修改循環(huán)語(yǔ)句在執(zhí)行第一次 val 等于 n 之后執(zhí)行  break。

for (const val of set) {   console.log(val); // n   if (val === 'n') break; }

其它方法

數(shù)組默認(rèn)是支持 Iterator 接口，所以任何接收數(shù)組做為參數(shù)的方法也都會(huì)默認(rèn)調(diào)用 Symbol.iterator 方法，如下所示：

const set = new Set().add('n').add('o'); console.log(Array.from(set)); // [ 'n', 'o' ] Promise.all(set).then(val => console.log(val)) // [ 'n', 'o' ] Promise.race(set).then(val => console.log(val)) // n

自定義迭代器

迭代協(xié)議

• 參照可迭代協(xié)議，要成為可迭代對(duì)象首先要有一個(gè) **@@iterator  **即(Symbol.iterator)屬性，該屬性為一個(gè)無(wú)參數(shù)的函數(shù)，返回一個(gè)符合迭代器協(xié)議的對(duì)象。

• 根據(jù)迭代器協(xié)議定義這個(gè)迭代器對(duì)象要返回一個(gè) next() 方法，這個(gè) next() 方法返回一個(gè)包含 value、done 屬性的對(duì)象。

const  myIterator = {   // for...of 循環(huán)會(huì)用到   [Symbol.iterator]: function() { return this },      // 標(biāo)準(zhǔn)的迭代器接口方法   next: function() {    // ...   } }

如果用 TypeScript 寫(xiě)法描述如下：

// 遍歷器接口 Iterable interface Iterable {  [Symbol.iterator]: Iterator }  // 迭代器對(duì)象 interface Iterator {  next(value?: any): IterationResult, }  // next 方法返回值定義 interface IterationResult {  value: any,   done: boolean }

基于普通函數(shù)的迭代器實(shí)現(xiàn)

迭代器的函數(shù)實(shí)現(xiàn)可以是一個(gè)普通函數(shù)也可以是一個(gè)生成器函數(shù)，我們先以普通函數(shù)為例，定義一個(gè) Range  構(gòu)造函數(shù)，用來(lái)輸出兩個(gè)數(shù)值區(qū)域的所有值。

function Range(start, end) {   this.id = start;   this.end = end; } Range.prototype[Symbol.iterator] = function() { return this } Range.prototype.next = function next() {   if (this.id > this.end) {     return { value: undefined, done: true }   }    return { value: this.id++, done: false } } const r1 = new Range(0, 3); const it = r1[Symbol.iterator]() for (const id of r1) {   console.log(id); // 0,1,2,3 }

基于生成器函數(shù)的迭代器實(shí)現(xiàn)

使用生成器函數(shù)(Generator)實(shí)現(xiàn)是最簡(jiǎn)單的，只要使用 yield 語(yǔ)句返回每一次的值即可。如下所示：

Range.prototype[Symbol.iterator] = function* () {   while (this.id <= this.end) {     yield this.id++;   } }

異步迭代器

到目前為止我們上面講解的都是同步模式的迭代器，這個(gè)很好理解，因?yàn)槲覀兊臄?shù)據(jù)源本身也就是同步的，但是在 Node.js 中一次網(wǎng)絡(luò) I/O  請(qǐng)求或者一次文件 I/O 請(qǐng)求，它們都是基于事件是異步的，所以我們就不能像使用 Symbol.iterator 的方式來(lái)使用。ECMAScript 2018  標(biāo)準(zhǔn)中提供了 **Symbol.asyncIterator **屬性，這是一個(gè)異步迭代器，如果一個(gè)對(duì)象設(shè)置了該屬性，它就是異步可迭代對(duì)象，相應(yīng)的我們要使用  for await...of 循環(huán)遍歷數(shù)據(jù)。

自定義異步迭代器

function Range(start, end) {   this.id = start;   this.end = end; } // 與上面不同，function 前我們?cè)黾恿?nbsp;async 關(guān)鍵字 Range.prototype[Symbol.asyncIterator] = async function* () {   while (this.id <= this.end) {     yield this.id++;   } } const r1 = new Range(0, 3); console.log(r1[Symbol.asyncIterator]()); // Object [AsyncGenerator] {} for await (const id of r1) {   console.log(id); // 0,1,2,3 }

與同步迭代器的不同

• 同步迭代器返回的是一個(gè)常規(guī)的 { value, done } 對(duì)象，而異步迭代器返回的是一個(gè)包含 { value, done } 的  Promise 對(duì)象。

• 同步可迭代協(xié)議具有 Symbol.iterator 屬性，異步可迭代協(xié)議具有 Symbol.asyncIterator 屬性。

• 同步迭代器使用 for...of 循環(huán)遍歷，異步迭代器使用 for await...of 循環(huán)遍歷。

異步迭代器的支持目前沒(méi)有默認(rèn)設(shè)定了 [Symbol.asyncIterator] 屬性的 JavaScript  內(nèi)建的對(duì)象。不過(guò)，WHATWG(網(wǎng)頁(yè)超文本應(yīng)用技術(shù)工作小組)Streams 會(huì)被設(shè)定為第一批異步可迭代對(duì)象，[Symbol.asyncIterator]  最近已在設(shè)計(jì)規(guī)范中落地。

到此，關(guān)于“如何理解并掌握ES6中的迭代器”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！