共計(jì) 3707 個(gè)字符，預(yù)計(jì)需要花費(fèi) 10 分鐘才能閱讀完成。

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

Iterator 是 ES6 引入的一種新的遍歷機(jī)制，迭代器有兩個(gè)核心概念：迭代器是一個(gè)統(tǒng)一的接口，它的作用是使各種數(shù)據(jù)結(jié)構(gòu)可被便捷的訪問，它是通過一個(gè)鍵為 Symbol.iterator 的方法來實(shí)現(xiàn)。
迭代器是用于遍歷數(shù)據(jù)結(jié)構(gòu)元素的指針（如數(shù)據(jù)庫中的游標(biāo)）。

Iterator

Iterator 是 ES6 引入的一種新的遍歷機(jī)制，迭代器有兩個(gè)核心概念：

迭代器是一個(gè)統(tǒng)一的接口，它的作用是使各種數(shù)據(jù)結(jié)構(gòu)可被便捷的訪問，它是通過一個(gè)鍵為 Symbol.iterator 的方法來實(shí)現(xiàn)。

迭代器是用于遍歷數(shù)據(jù)結(jié)構(gòu)元素的指針（如數(shù)據(jù)庫中的游標(biāo)）。

迭代過程

迭代的過程如下：

通過 Symbol.iterator 創(chuàng)建一個(gè)迭代器，指向當(dāng)前數(shù)據(jù)結(jié)構(gòu)的起始位置

隨后通過 next 方法進(jìn)行向下迭代指向下一個(gè)位置，next 方法會返回當(dāng)前位置的對象，對象包含了 value 和 done 兩個(gè)屬性，value 是當(dāng)前屬性的值，done 用于判斷是否遍歷結(jié)束

當(dāng) done 為 true 時(shí)則遍歷結(jié)束

下面通過一個(gè)簡單的例子進(jìn)行說明：

const items = [ zero ,  one ,  two 
const it = items[Symbol.iterator]();
 
it.next();
 {value:  zero , done: false}
it.next();
 {value:  one , done: false}
it.next();
 {value:  two , done: false}
it.next();
 {value: undefined, done: true}

上面的例子，首先創(chuàng)建一個(gè)數(shù)組，然后通過 Symbol.iterator 方法創(chuàng)建一個(gè)迭代器，之后不斷的調(diào)用 next 方法對數(shù)組內(nèi)部項(xiàng)進(jìn)行訪問，當(dāng)屬性 done 為 true 時(shí)訪問結(jié)束。

迭代器是協(xié)議（使用它們的規(guī)則）的一部分，用于迭代。該協(xié)議的一個(gè)關(guān)鍵特性就是它是順序的：迭代器一次返回一個(gè)值。這意味著如果可迭代數(shù)據(jù)結(jié)構(gòu)是非線性的（例如樹），迭代將會使其線性化。

可迭代的數(shù)據(jù)結(jié)構(gòu)

以下是可迭代的值:

Array

String

Map

Set

Dom 元素（正在進(jìn)行中）

我們將使用 for…of 循環(huán)（參見下文的 for…of 循環(huán)）對數(shù)據(jù)結(jié)構(gòu)進(jìn)行迭代。

Array

數(shù)組 (Array) 和類型數(shù)組 (TypedArray) 他們是可迭代的。

for (let item of [ zero ,  one ,  two]) { console.log(item);
// output:
// zero
// one
// twoString

字符串是可迭代的，單他們遍歷的是 Unicode 碼，每個(gè)碼可能包含一個(gè)到兩個(gè)的 Javascript 字符。

for (const c of  z\uD83D\uDC0A) { console.log(c);
// output:
// z
// \uD83D\uDC0A

Map

Map 主要是迭代它們的 entries，每個(gè) entry 都會被編碼為 [key, value] 的項(xiàng)，entries 是以確定的形勢進(jìn)行迭代，其順序是與添加的順序相同。

const map = new Map();
map.set(0,  zero 
map.set(1,  one 
 
for (let item of map) { console.log(item);
// output:
// [0,  zero]
// [1,  one]

注意：WeakMaps 不可迭代

Set

Set 是對其元素進(jìn)行迭代，迭代的順序與其添加的順序相同

const set = new Set();
set.add( zero 
set.add( one 
 
for (let item of set) { console.log(item);
// output:
// zero
// one

注意：WeakSets 不可迭代

arguments

arguments 目前在 ES6 中使用越來越少，但也是可遍歷的

function args() { for (let item of arguments) { console.log(item);
 }
args( zero ,  one 
// output:
// zero
// one

普通對象不可迭代

普通對象是由 object 創(chuàng)建的，不可迭代：

// TypeError
for (let item of {}) { 
 console.log(item);
}

for…of 循環(huán)

for…of 是 ES6 新引入的循環(huán)，用于替代 for..in 和 forEach()，并且支持新的迭代協(xié)議。它可用于迭代常規(guī)的數(shù)據(jù)類型，如 Array、String、Map 和 Set 等等。

迭代常規(guī)數(shù)據(jù)類型

Array

const nums = [ zero ,  one ,  two 
 
for (let num of nums) { console.log(num);
TypedArray
const typedArray1 = new Int8Array(6);
typedArray1[0] = 10;
typedArray1[1] = 11;
 
for (let item of typedArray1) { console.log(item);
}

String

const str =  zero 
 
for (let item of str) { console.log(item);
}

Map

let myMap = new Map();
myMap.set(0,  zero 
myMap.set(1,  one 
myMap.set(2,  two 
 
//  遍歷  key  和  value
for (let [key, value] of myMap) { console.log(key +   =   + value);
for (let [key, value] of myMap.entries()) { console.log(key +   =   + value);
 
//  只遍歷  key
for (let key of myMap.keys()) { console.log(key);
 
//  只遍歷  value
for (let value of myMap.values()) { console.log(value);
}

Set

let mySet = new Set();
mySet.add( zero 
mySet.add( one 
mySet.add( two 
 
//  遍歷整個(gè)  set
for (let item of mySet) { console.log(item);
 
//  只遍歷  key  值
for (let key of mySet.keys()) { console.log(key);
 
//  只遍歷  value
for (let value of mySet.values()) { console.log(value);
 
//  遍歷  key  和  value ，兩者會相等
for (let [key, value] of mySet.entries()) { console.log(key +   =   + value);
}

可迭代的數(shù)據(jù)結(jié)構(gòu)

of 操作數(shù)必須是可迭代，這意味著如果是普通對象則無法進(jìn)行迭代。如果數(shù)據(jù)結(jié)構(gòu)類似于數(shù)組的形式，則可以借助 Array.from() 方法進(jìn)行轉(zhuǎn)換迭代。

const arrayLink = {length: 2, 0:  zero , 1:  one}

//  報(bào)  TypeError  異常
for (let item of arrayLink) { console.log(item);
 
//  正常運(yùn)行
// output:
// zero
// one
for (let item of Array.from(arrayLink)) { console.log(item);
}

let、const 和 var 用于 for..of

如果使用 let 和 const，每次迭代將會創(chuàng)建一個(gè)新的存儲空間，這可以保證作用域在迭代的內(nèi)部。

const nums = [ zero ,  one ,  two 
 
for (const num of nums) { console.log(num);
//  報(bào)  ReferenceError
console.log(num);

從上面的例子我們看到，最后一句會報(bào)異常，原因 num 的作用域只在循環(huán)體內(nèi)部，外部無效，具體可查閱 let 與 const 章節(jié)。使用 var 則不會出現(xiàn)上述情況，因?yàn)?var 會作用于全局，迭代將不會每次都創(chuàng)建一個(gè)新的存儲空間。

const nums = [ zero ,  one ,  two 
 
forv (var num of nums) { console.log(num);
// output: two
console.log(num);

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