概念
- iterator是一種接口機制，為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問機制
作用
- 為各種數(shù)據(jù)結(jié)構(gòu)，提供一個統(tǒng)一的，簡便的訪問接口；
- 使得數(shù)據(jù)結(jié)構(gòu)成員能夠按某種次序排列
- es6創(chuàng)造了一種新的遍歷命令for...of循環(huán),iterator接口主要提供for...of消費
執(zhí)行順序
1.創(chuàng)建一個指針對象，指向當前數(shù)據(jù)結(jié)構(gòu)的起始位置。也就是說，遍歷器對象本質(zhì)上，就是一個指針對象
2.第一次調(diào)用對象next()方法，指針指向數(shù)據(jù)結(jié)構(gòu)的第一個成員
3.第二次調(diào)用對象next()方法，指針指向數(shù)據(jù)結(jié)構(gòu)的第二個成員
4.不斷調(diào)用指針對象next()方法，直到它指向數(shù)據(jù)結(jié)構(gòu)的結(jié)束位置，done返回true(事件結(jié)束)
模擬iterator中next()方法
// 1.模擬next（）
{
let it = makeIterator(['a','b','c']);
function makeIterator(arr) {
let nextIndex = 0;
return {
next:function() {
return nextIndex < arr.length ? {
value:arr[nextIndex++],
done:false
} : {
value:undefined,
done:true//done判斷是否結(jié)束，true表示結(jié)束返回undefined
}
}
}
}
console.log(it.next());//{value: "a", done: false}
console.log(it.next());//{value: "b", done: false}
console.log(it.next());//{value: "c", done: false}
console.log(it.next());//{value: undefined, done: true}
// next()方法返回一個對象，表示是當前成員的數(shù)據(jù)
// 對象中包含兩個屬性，value表示值,done表示是否結(jié)束
}
原生iterator接口
在控制臺測試Array( )是否支持iterator接口
new一個Array（）實例arr1，查看arr1原型發(fā)現(xiàn)存在Symbol.iterator()函數(shù),如下圖：
image.png
那么arr實例如何使用iterator接口？只要實現(xiàn)Symbol.iterator()函數(shù)即可，這樣實例就有了iterator的next()方法->代碼如下：
1：
// 2.1 數(shù)組原型的iterator
let arr = ['aa','bb','cc'];
let it = arr[Symbol.iterator]();//執(zhí)行數(shù)組中iterator函數(shù)(接口)，即可調(diào)用next()
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());
// 數(shù)組原型中有iterator，所以可以調(diào)用next()方法
實例arr實現(xiàn)iterator接口，即可使用next()方法，在控制臺打印效果：
image.png
因為arr只有3條數(shù)據(jù)，所以前3次打印value可以獲得值，然后done為flase(沒有結(jié)束);第4次打印value為undefined拿不到值，done為true(已經(jīng)結(jié)束)，沒有數(shù)據(jù)了
- 再看Map(),同理
// 2.2 Map原型的iterator
let map = new Map();
map.set('name','張三');
map.set('name2','李四');
let it2 = map[Symbol.iterator]();
console.log(it2.next());
console.log(it2.next());
console.log(it2.next());
- 使用for... of循環(huán)
// 2.3 es6創(chuàng)造了一種新的遍歷命令for...of循環(huán),iterator接口主要提供for...of消費
// 例子1
let arr2 = ['aaa','bbb','ccc'];
for(let v of arr2) {
console.log(v)// aaa bbb ccc
}
// 例子2 arguments的iterator
function fn() {
for(let v of arguments) {
console.log(v);//王五 趙六
}
}
fn("王五","趙六");
支持iterator接口的數(shù)據(jù)結(jié)構(gòu)
Array Map Set String TypedArray 函數(shù)的arguments對象 NodeList對象
