這是使用HTML寫的文章——各類樣式本身看啦

Iterator

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

• 迭代器是一個統一的接口，它的做用是使各類數據結構可被便捷的訪問，它是經過一個鍵爲Symbol.iterator 的方法來實現。
• 迭代器是用於遍歷數據結構元素的指針（如數據庫中的遊標）。

迭代過程

迭代的過程以下：

• 經過 Symbol.iterator 建立一個迭代器，指向當前數據結構的起始位置
• 隨後經過 next 方法進行向下迭代指向下一個位置， next 方法會返回當前位置的對象，對象包含了 value 和 done 兩個屬性， value 是當前屬性的值， done 用於判斷是否遍歷結束
• 當 done 爲 true 時則遍歷結束

下面經過一個簡單的例子進行說明：

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}
複製代碼

上面的例子，首先建立一個數組，而後經過 Symbol.iterator 方法建立一個迭代器，以後不斷的調用 next 方法對數組內部項進行訪問，當屬性 done 爲 true 時訪問結束。

迭代器是協議（使用它們的規則）的一部分，用於迭代。該協議的一個關鍵特性就是它是順序的：迭代器一次返回一個值。這意味着若是可迭代數據結構是非線性的（例如樹），迭代將會使其線性化。

可迭代的數據結構

如下是可迭代的值:

• Array
• String
• Map
• Set
• Dom元素（正在進行中）

咱們將使用 for…of 循環（參見下文的 for…of 循環）對數據結構進行迭代。

Array

數組 ( Array ) 和類型數組 ( 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 是以肯定的形勢進行迭代，其順序是與添加的順序相同。

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 是對其元素進行迭代，迭代的順序與其添加的順序相同

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 建立的，不可迭代：

// TypeError 
for (let item of {}) {
    console.log(item); 
}
複製代碼

for…of循環

for…of 是 ES6 新引入的循環，用於替代 for..in 和 forEach() ，而且支持新的迭代協議。它可用於迭代常規的數據類型，如 Array 、 String 、 Map和 Set 等等。

迭代常規數據類型

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");  
// 遍歷整個 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);
}
複製代碼

可迭代的數據結構

of 操做數必須是可迭代，這意味着若是是普通對象則沒法進行迭代。若是數據結構相似於數組的形式，則能夠藉助 Array.from() 方法進行轉換迭代。

const arrayLink = {
    length: 2, 
    0: "zero", 
    1: "one"
}
// 報 TypeError 異常 
for (let item of arrayLink) {
    console.log(item);
}  
// 正常運行 
for (let item of Array.from(arrayLink)) {
    console.log(item);
}
// output: 
// zero 
// one
複製代碼

let 、const 和 var 用於 for..of

若是使用 let 和 const ，每次迭代將會建立一個新的存儲空間，這能夠保證做用域在迭代的內部。

const nums = ["zero", "one", "two"];
for (const num of nums) {
    console.log(num);
} 
// 報 ReferenceError 
console.log(num);
複製代碼

從上面的例子咱們看到，最後一句會報異常，緣由 num 的做用域只在循環體內部，外部無效。使用 var 則不會出現上述狀況，由於 var 會做用於全局，迭代將不會每次都建立一個新的存儲空間。

const nums = ["zero", "one", "two"];
forv (var num of nums) {
    console.log(num);
} 
console.log(num);
// output: two
複製代碼