建站
咨詢
售后
建站咨詢
新聞中心
Iterator 是 ES6 引入的一種新的遍歷機制，迭代器有兩個核心概念：迭代器是一個統(tǒng)一的接口，它的作用是使各種數(shù)據(jù)結(jié)構(gòu)可被便捷的訪問，它是通過一個鍵為Symbol.iterator 的方法來實現(xiàn)。 迭代器是用于遍歷數(shù)據(jù)結(jié)構(gòu)元素的指針（如數(shù)據(jù)庫中的游標）。
我們提供的服務(wù)有：成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、北塔ssl等。為數(shù)千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的北塔網(wǎng)站制作公司
Iterator
Iterator 是 ES6 引入的一種新的遍歷機制，迭代器有兩個核心概念：
-
迭代器是一個統(tǒng)一的接口，它的作用是使各種數(shù)據(jù)結(jié)構(gòu)可被便捷的訪問，它是通過一個鍵為Symbol.iterator 的方法來實現(xiàn)。
-
迭代器是用于遍歷數(shù)據(jù)結(jié)構(gòu)元素的指針（如數(shù)據(jù)庫中的游標）。
迭代過程
迭代的過程如下：
-
通過 Symbol.iterator 創(chuàng)建一個迭代器，指向當(dāng)前數(shù)據(jù)結(jié)構(gòu)的起始位置
-
隨后通過 next 方法進行向下迭代指向下一個位置， next 方法會返回當(dāng)前位置的對象，對象包含了 value 和 done 兩個屬性， value 是當(dāng)前屬性的值， done 用于判斷是否遍歷結(jié)束
-
當(dāng) done 為 true 時則遍歷結(jié)束
下面通過一個簡單的例子進行說明：
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)建一個數(shù)組，然后通過 Symbol.iterator 方法創(chuàng)建一個迭代器，之后不斷的調(diào)用 next 方法對數(shù)組內(nèi)部項進行訪問，當(dāng)屬性 done 為 true 時訪問結(jié)束。
迭代器是協(xié)議（使用它們的規(guī)則）的一部分，用于迭代。該協(xié)議的一個關(guān)鍵特性就是它是順序的：迭代器一次返回一個值。這意味著如果可迭代數(shù)據(jù)結(jié)構(gòu)是非線性的（例如樹），迭代將會使其線性化。
可迭代的數(shù)據(jù)結(jié)構(gòu)
以下是可迭代的值:
Array String Map Set Dom元素（正在進行中）
我們將使用 for…of 循環(huán)（參見下文的 for…of 循環(huán)）對數(shù)據(jù)結(jié)構(gòu)進行迭代。
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 是以確定的形勢進行迭代，其順序是與添加的順序相同。
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 創(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");
// 遍歷整個 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ù)必須是可迭代，這意味著如果是普通對象則無法進行迭代。如果數(shù)據(jù)結(jié)構(gòu)類似于數(shù)組的形式，則可以借助 Array.from() 方法進行轉(zhuǎn)換迭代。
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 ，每次迭代將會創(chuàng)建一個新的存儲空間，這可以保證作用域在迭代的內(nèi)部。
const nums = ["zero", "one", "two"];
for (const num of nums) {
console.log(num);
}
// 報 ReferenceError
console.log(num);
從上面的例子我們看到，最后一句會報異常，原因 num 的作用域只在循環(huán)體內(nèi)部，外部無效，具體可查閱 let 與 const 章節(jié)。使用 var 則不會出現(xiàn)上述情況，因為 var 會作用于全局，迭代將不會每次都創(chuàng)建一個新的存儲空間。
const nums = ["zero", "one", "two"];
forv (var num of nums) {
console.log(num);
}
// output: two
console.log(num);
新聞名稱：講解一下ES6迭代器
轉(zhuǎn)載來源：http://www.5511xx.com/article/dpeghog.html
