文章目錄

• Iterator
• • 1 介紹
  • 2 迭代過程
  • 3 可迭代的數(shù)據(jù)結(jié)構(gòu)
  • • 普通對象不可迭代
  • for...of循環(huán)
  • • 可迭代的數(shù)據(jù)結(jié)構(gòu)
    • 可迭代的數(shù)據(jù)結(jié)構(gòu)

Iterator

1 介紹

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

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

2 迭代過程

迭代的過程如下：

• 創(chuàng)建：通過 Symbol.iterator 創(chuàng)建一個迭代器，指向當(dāng)前數(shù)據(jù)結(jié)構(gòu)的起始位置
• 迭代指向：通過 next 方法進(jìn)行向下迭代指向下一個位置， next 方法會返回當(dāng)前位置的對象，對象包含了 value 和 done 兩個屬性，
• value 是當(dāng)前屬性的值；
• done 用于判斷是否遍歷結(jié)束。
• 當(dāng) done 為 true 時則遍歷結(jié)束

Demo：

• 首先聲明一個數(shù)組，通過Symbol.iterator創(chuàng)建一個迭代器，之后通過.next()方法對數(shù)組內(nèi)的數(shù)據(jù)項進(jìn)行訪問，返回value和done兩個屬性，value表示訪問的當(dāng)前數(shù)據(jù)項，done是布爾值，當(dāng)為true時遍歷結(jié)束。
• 迭代器是協(xié)議（使用它們的規(guī)則）的一部分，用于迭代。該協(xié)議的一個關(guān)鍵特性就是它是順序的：迭代器一次返回一個值。這意味著如果可迭代數(shù)據(jù)結(jié)構(gòu)是非線性的（例如樹），迭代將會使其線性化。

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}

3 可迭代的數(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 // two

• String

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

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

• Map

Map 主要是迭代它們的 entries ，每個 entry 都會被編碼為 [key, value] 的項， 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 等等。

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

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

p 和 Set 等等。

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

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

總結(jié)

以上是生活随笔為你收集整理的ES6 lterator迭代器是个什么东西？有什么用？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。