ES-ES6:4.2 ES6 迭代器
ylbtech-ES-ES6:4.2 ES6 迭代器 |
1.返回頂部 |
Iterator
Iterator 是 ES6 引入的一種新的遍歷機制,迭代器有兩個核心概念:
- 迭代器是一個統一的介面,它的作用是使各種資料結構可被便捷的訪問,它是通過一個鍵為Symbol.iterator 的方法來實現。
- 迭代器是用於遍歷資料結構元素的指標(如資料庫中的遊標)。
迭代過程
迭代的過程如下:
- 通過 Symbol.iterator 建立一個迭代器,指向當前資料結構的起始位置
- 隨後通過 next 方法進行向下迭代指向下一個位置, next 方法會返回當前位置的物件,物件包含了 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); } // 正常執行 // output: // zero // one for (let item of Array.from(arrayLink)) { console.log(item); }
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 的作用域只在迴圈體內部,外部無效,具體可查閱 let 與 const 章節。使用 var 則不會出現上述情況,因為 var 會作用於全域性,迭代將不會每次都建立一個新的儲存空間。
const nums = ["zero", "one", "two"]; forv (var num of nums) { console.log(num); } // output: two console.log(num);2、
2.返回頂部 |
3.返回頂部 |
4.返回頂部 |
5.返回頂部 |
6.返回頂部 |
作者:ylbtech 出處:http://ylbtech.cnblogs.com/ 本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段宣告,且在文章頁面明顯位置給出原文連線,否則保留追究法律責任的權利。 |