這篇文章主要講解了“什么是for of和Iterator”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“什么是for of和Iterator”吧！
創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：做網(wǎng)站、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的津市網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
重慶分公司
重慶分公司
var arr = ['紅','綠','藍(lán)']; 上面是一個(gè)普通的數(shù)組，如果我要獲取他的每一項(xiàng)數(shù)據(jù)，應(yīng)該怎么做？
這個(gè)還不簡(jiǎn)單，直接來(lái)個(gè) for循環(huán)，如果你覺(jué)得循環(huán) low，那就來(lái)個(gè) forEach 唄。
ok，立刻擼串代碼
//for 循環(huán)
for(var i=0;i
}
//forEacth
arr.forEach(item=>{
console.log(item);
});
// 結(jié)果 略 ok，沒(méi)毛病。
那咱們繼續(xù)，請(qǐng)看下面代碼。給定一個(gè)字符串，如果我想輸出每一個(gè)字符怎么做？
var str='1234567890';
有么有搞錯(cuò)，這簡(jiǎn)單的讓人發(fā)笑。
可以用 for in，也可以用 for 循環(huán)，按照類數(shù)組方式來(lái)處理。
立刻擼串代碼
//for in
for(var s in str){
console.log(str[s]);//s 是 屬性名稱【key】
}
//轉(zhuǎn)為數(shù)組
for(var i =0;i
}
//或者轉(zhuǎn)換為數(shù)組
Array.prototype.slice.call(str); 不過(guò) for in 不是用來(lái)獲取數(shù)據(jù)的，他會(huì)遍歷對(duì)象上所有可枚舉的屬性，包括自身的和原型鏈上的，所以這個(gè)不保險(xiǎn)。
emmm....沒(méi)啥問(wèn)題，那咱們繼續(xù)。
請(qǐng)看下面代碼，給定一個(gè)map對(duì)象，然后輸出它每一項(xiàng)數(shù)據(jù)。
var map = new Map();
map.set('zhang','1000w');
map.set('liu','200w');
map.set('sun','100w');用 forEach 就妥妥的了。
map.forEach((val,key)=>{
console.log(val,key);
}) 到這里看了這么多如此簡(jiǎn)單到令人發(fā)指的提問(wèn)，估計(jì)都有些坐不住了，要掀桌子走人了。請(qǐng)稍后，慢慢往下看。
好了，在上一步幾個(gè)簡(jiǎn)單的問(wèn)題中，我們的操作都是獲得他們的每一項(xiàng)數(shù)據(jù)。
當(dāng)然方法有很多種，實(shí)現(xiàn)方式也有很多，for 循環(huán)，forEach，for in 啦。
但是有沒(méi)有發(fā)現(xiàn)一個(gè)問(wèn)題，或者我們站在一個(gè)更高的維度去看待，其實(shí)這些方法都不能通用，也就是說(shuō)上面的這幾種集合數(shù)據(jù)不能使用統(tǒng)一的遍歷方法來(lái)進(jìn)行數(shù)據(jù)獲取。
誰(shuí)說(shuō)的，能統(tǒng)一呀，都可以用 forEach來(lái)遍歷，數(shù)組和map 本身就支持，字符串我直接轉(zhuǎn)為數(shù)組后可以了。
ok，這沒(méi)什么毛病。
但是每次都要轉(zhuǎn)換，還要封裝，還有可能要侵入原型。
那有沒(méi)有一種更好的，通用方法，讓開(kāi)發(fā)者用的更舒服，更爽呢？
答案是肯定的，es5的時(shí)候還沒(méi)出現(xiàn)，升級(jí)到 es6就有了。
這個(gè)可以對(duì)不同數(shù)據(jù)結(jié)構(gòu)進(jìn)行統(tǒng)一遍歷的方式就是 es6的 for of 循環(huán)。
for of 循環(huán) 和 古老的for 循環(huán)很像呀。不就是個(gè)新增語(yǔ)法么。
引用阮大佬書(shū)中一句話,相信一看便知。
ES6 借鑒 C++、Java、C# 和 Python 語(yǔ)言，引入了for...of循環(huán)。作為遍歷所有數(shù)據(jù)結(jié)構(gòu)的統(tǒng)一的方法。
關(guān)鍵在于統(tǒng)一，另一個(gè)就是直接取值，簡(jiǎn)化操作，不需要在聲明和維護(hù)什么變量、對(duì)數(shù)據(jù)做轉(zhuǎn)換。
原來(lái)for of 這么牛，for 循環(huán)搞不定的你可以搞定。
為什么 for of 能具備這個(gè)能力，可以為不同的數(shù)據(jù)結(jié)構(gòu)提供一種統(tǒng)一的數(shù)據(jù)獲取方式。
for of 真的這么強(qiáng)大嗎，他背后的機(jī)制是什么？
其實(shí)for of 并不是真的強(qiáng)大，他只是一種ES6新的語(yǔ)法而已。
并不是所有的對(duì)象都能使用 for of，只有實(shí)現(xiàn)了Iterator接口的對(duì)象才能夠使用 for of 來(lái)進(jìn)行遍歷取值。
所以說(shuō) for of 只是語(yǔ)法糖，真正的主角是Iterator。
What ? Iterator.....
Iterator 是一種接口，目的是為不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的數(shù)據(jù)訪問(wèn)機(jī)制。也可以理解為 Iterator 接口主要為 for of 服務(wù)的，供for...of進(jìn)行消費(fèi)。
其實(shí)在很多后端語(yǔ)言多年前早已存在 Iterator 這個(gè)特性，如 java、C++、C#等。
既然他是一種接口，那我們應(yīng)該怎樣實(shí)現(xiàn)這個(gè)接口呢？實(shí)現(xiàn)規(guī)則是什么樣的呢？
因?yàn)?javascript 語(yǔ)言里沒(méi)有接口的概念，這里我們可以理解成它是一種特殊的對(duì)象 - 迭代器對(duì)象，返回此對(duì)象的方法叫做迭代器方法。
首先他作為一個(gè)對(duì)象，此對(duì)象具有一個(gè)next方法，每次調(diào)用 next 方法都會(huì)返回一個(gè)結(jié)果值。
這個(gè)結(jié)果值是一個(gè) object，包含兩個(gè)屬性，value 和 done。
value表示具體的返回值，done 是布爾類型的，表示集合是否遍歷完成或者是否后續(xù)還有可用數(shù)據(jù)，沒(méi)有可用數(shù)據(jù)則返回 true，否則返回 false。
另外內(nèi)部會(huì)維護(hù)一個(gè)指針，用來(lái)指向當(dāng)前集合的位置，每調(diào)用一次 next 方法，指針都會(huì)向后移動(dòng)一個(gè)位置(可以想象成數(shù)組的索引)。
看下代碼實(shí)現(xiàn)
function getIterator(list) {
var i = 0;
return {
next: function() {
var done = (i >= list.length);
var value = !done ? list[i++] : undefined;
return {
done: done,
value: value
};
}
};
}
var it = getIterator(['a', 'b', 'c']);
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 }"
console.log(it.next()); // "{ value: undefined, done: true }"
console.log(it.next()); // "{ value: undefined, done: true }"
上面代碼便是根據(jù)迭代器的基本概念衍生出來(lái)的一個(gè)模擬實(shí)現(xiàn)。
getIterator方法返回一個(gè)對(duì)象 - 可迭代對(duì)象next 方法，
next 方法內(nèi)部通過(guò)閉包來(lái)保存指針
i 的值，每次調(diào)用
next 方法
i 的值都會(huì)
+1.i 的值從數(shù)組內(nèi)取出數(shù)據(jù)作為
value，然后通過(guò)索引判斷得到
done的值。i=3的時(shí)候，超過(guò)數(shù)組的最大索引，無(wú)可用數(shù)據(jù)返回，此時(shí)done 為
true，遍歷完成。 到這里我們已經(jīng)大概了解了 Iterator, 以及如何創(chuàng)建一個(gè)迭代器對(duì)象。但是他和 for of 有什么關(guān)系呢？
當(dāng) for of執(zhí)行的時(shí)候，循環(huán)過(guò)程中引擎就會(huì)自動(dòng)調(diào)用這個(gè)對(duì)象上的迭代器方法， 依次執(zhí)行迭代器對(duì)象的 next 方法,將 next 返回值賦值給 for of 內(nèi)的變量，從而得到具體的值。
我覺(jué)得上面一句話包含了一個(gè)重要的信息- “對(duì)象上的迭代器方法”。
對(duì)象上怎么會(huì)有迭代器方法呢？
ES6里規(guī)定，只要在對(duì)象的屬性上部署了Iterator接口，具體形式為給對(duì)象添加Symbol.iterator屬性，此屬性指向一個(gè)迭代器方法，這個(gè)迭代器會(huì)返回一個(gè)特殊的對(duì)象 - 迭代器對(duì)象。
而部署這個(gè)屬性并且實(shí)現(xiàn)了迭代器方法后的對(duì)象叫做可迭代對(duì)象。
此時(shí)，這個(gè)對(duì)象就是可迭代的，也就是可以被 for of 遍歷。
Symbol.iterator，它是一個(gè)表達(dá)式，返回Symbol對(duì)象的iterator屬性，這是一個(gè)預(yù)定義好的、類型為 Symbol 的特殊值。
舉個(gè)例子
普通的對(duì)象是不能被 for of 遍歷的，直接食用會(huì)報(bào)錯(cuò)。
var obj = {};
for(var k of obj){
}
obj 不是可迭代的對(duì)象。
那么我們來(lái),讓一個(gè)對(duì)象變成可迭代對(duì)象,按照協(xié)議也就是規(guī)定來(lái)實(shí)現(xiàn)即可。
iterableObj 對(duì)象上部署 Symbol.iterator屬性，然后為其創(chuàng)建一個(gè)迭代器方法，迭代器的規(guī)則上面我們已經(jīng)說(shuō)過(guò)啦。
var iterableObj = {
items:[100,200,300],
[Symbol.iterator]:function(){
var self=this;
var i = 0;
return {
next: function() {
var done = (i >= self.items.length);
var value = !done ? self.items[i++] : undefined;
return {
done: done,
value: value
};
}
};
}
}
//遍歷它
for(var item of iterableObj){
console.log(item); //100,200,300
}
就這么簡(jiǎn)單，上面這個(gè)對(duì)象就是可迭代對(duì)象了，可以被 for of 消費(fèi)了。
我們?cè)倩氐阶铋_(kāi)始使用 for of 來(lái)進(jìn)行遍歷字符串、數(shù)組、map，我們并沒(méi)有為他們部署Iterator接口，仍然可以使用 for of 遍歷。
這是因?yàn)樵?ES6中有些對(duì)象已經(jīng)默認(rèn)部署了此接口，不需要做任何處理，就可以使用 for of 來(lái)進(jìn)行遍歷取值。
不信？咿，你好難搞，我不要你說(shuō) - 信，我要我說(shuō) - 信。
看看能不能拿到它們的迭代器。
數(shù)組
//數(shù)組
var arr=[100,200,300];
var iteratorObj= arr[Symbol.iterator]();//得到迭代器方法，返回迭代器對(duì)象
console.log(iteratorObj.next());
console.log(iteratorObj.next());
console.log(iteratorObj.next());
console.log(iteratorObj.next());
字符串
因?yàn)樽址旧淼闹凳怯行虻?，并且具有類?shù)組的特性，支持通過(guò)索引訪問(wèn)，所以也默認(rèn)部署了iterator接口。
var str='abc';
var strIteratorObj = str[Symbol.iterator]();//得到迭代器
console.log(strIteratorObj.next());
console.log(strIteratorObj.next());
console.log(strIteratorObj.next());
console.log(strIteratorObj.next());
或者直接看原型上是否部署了這個(gè)屬性即可。
arguments 類數(shù)組
函數(shù)內(nèi)的arguments 是一個(gè)類數(shù)組，他也支持 for of，因?yàn)樗麅?nèi)部也部署了Iterator 接口。
我們都知道對(duì)象是默認(rèn)沒(méi)有部署這個(gè)接口的，所以arguments這個(gè)屬性沒(méi)有在原型上，而在在對(duì)象自身的屬性上。
function test(){
var obj = arguments[Symbol.iterator]();
console.log( arguments.hasOwnProperty(Symbol.iterator));
console.log( arguments);
console.log(obj.next());
}
test(1,2,3);
總結(jié)來(lái)說(shuō)，已默認(rèn)部署 Iterator 接口的對(duì)象主要包括數(shù)組、字符串、Set、Map 、類似數(shù)組的對(duì)象（比如arguments對(duì)象、DOM NodeList 對(duì)象）。
代碼驗(yàn)證略，都是一個(gè)套路，不多說(shuō)。
Iterator除了可以為不同的數(shù)據(jù)結(jié)構(gòu)提供一種統(tǒng)一的數(shù)據(jù)訪問(wèn)方式，還有沒(méi)有發(fā)現(xiàn)其他的作用？
那就是數(shù)據(jù)可定制性，因?yàn)槲覀兛梢噪S意的控制迭代器的 value 值。
比如：數(shù)組本身就是一個(gè)可迭代的，我們可以覆蓋他的默認(rèn)迭代器。
var arr=[100,200,300];
for(var o of arr){
console.log(o);
} for of 數(shù)組默認(rèn)輸出如下
經(jīng)過(guò)我們的改造
var arr=[100,200,300];
arr[Symbol.iterator]=function(){
var self=this;
var i = 0;
return {
next: function() {
var done = (i >= self.length);
var value = !done ? self[i++] : undefined;
return {
done: done,
value: value
};
}
};
}
for(var o of arr){
console.log(o);
} 對(duì)象可能有各種屬性，不像數(shù)組的值是有序的。
所以遍歷的時(shí)候根本不知道如何確定他們的先后順序，所以需要我們根據(jù)情況手動(dòng)實(shí)現(xiàn)。
我們都知道普通的 for 循環(huán)是可以隨時(shí)中斷的，那 for of 是否可以呢？
答案是肯定的，for of機(jī)制兼顧了for和forEach。
迭代器除了必須next 方法外，還有兩個(gè)可選的方法 return和throw方法。
如果 for of 循環(huán)提前退出，則會(huì)自動(dòng)調(diào)用 return 方法，需要注意的是 return 方法必須有返回值，且返回值必須是 一個(gè)object。
ps：以拋出異常的方式退出，會(huì)先執(zhí)行 return 方法再拋出異常。
var iterableObj = {
items:[100,200,300],
[Symbol.iterator]:function(){
var self=this;
var i = 0;
return {
next: function() {
var done = (i >= self.items.length);
var value = !done ? self.items[i++] : undefined;
return {
done: done,
value: value
};
},
return(){
console.log('提前退出');
return {//必須返回一個(gè)對(duì)象
done:true
}
}
};
}
}
for(var item of iterableObj){
console.log(item);
if(item===200){
break;
}
}
for(var item of iterableObj){
console.log(item);
throw new Error();
} 
ps:throw 方法這里先不說(shuō)，這里不是他的用武之地，后續(xù)文章見(jiàn)。
除了 for of 執(zhí)行的時(shí)候會(huì)自動(dòng)調(diào)用對(duì)象的Iterator方法，那么ES6里還有沒(méi)有其他的語(yǔ)法形式?
對(duì)可迭代對(duì)象進(jìn)行解構(gòu)賦值的時(shí)候，會(huì)默認(rèn)調(diào)用Symbol.iterator方法。
//字符串
var str='12345';
var [a,b]=str;
console.log(a,b); // 1 2
//map
var map = new Map();
map.set('我','前端');
map.set('是','技術(shù)');
map.set('誰(shuí)','江湖');
map.set('作者','zz_jesse');
var [d,e]=map;
console.log(d,e);
//["我", "前端"] ["是", "技術(shù)"]
....
同樣如果對(duì)一個(gè)普通對(duì)象進(jìn)行解構(gòu)，則會(huì)報(bào)錯(cuò)。
因?yàn)槠胀▽?duì)象不是可迭代對(duì)象。
var [d,e]={name:'zhang'};
從一個(gè)自定義的可迭代對(duì)象進(jìn)行解構(gòu)賦值。
var iterableObj = {
items:['紅','綠','藍(lán)'],
[Symbol.iterator]:function(){
var self=this;
var i = 0;
return {
next: function() {
var done = (i >= self.items.length);
var value = !done ? self.items[i++] : undefined;
return {
done: done,
value: value
};
}
};
}
}
var [d,e]=iterableObj;
console.log(d,e);//紅 綠 解構(gòu)賦值的變量的值就是迭代器對(duì)象的 next 方法的返回值，且是按順序返回。
擴(kuò)展運(yùn)算符的執(zhí)行(...)也會(huì)默認(rèn)調(diào)用它的Symbol.iterator方法，可以將當(dāng)前迭代對(duì)象轉(zhuǎn)換為數(shù)組。
//字符串
var str='1234';
console.log([...str]);//[1,2,3,4] 轉(zhuǎn)換為數(shù)組
//map 對(duì)象
var map=new Map([[1,2],[3,4]]);
[...map] //[[1,2],[3,4]
//set 對(duì)象
var set=new Set([1,2,3]);
[...set] //[1,2,3]
通用普通對(duì)象是不可以轉(zhuǎn)為數(shù)組的。
var obj={name:'zhang'};
[..obj]//報(bào)錯(cuò)
作為一些數(shù)據(jù)的數(shù)據(jù)源，比如某些api 方法的參數(shù)是接收一個(gè)數(shù)組,都會(huì)默認(rèn)的調(diào)用自身迭代器。
例如：Set、Map、Array.from 等
//為了證明，先把一個(gè)數(shù)組的默認(rèn)迭代器給覆蓋掉
var arr=[100,200,300];
arr[Symbol.iterator]=function(){
var self=this;
var i = 0;
return {
next: function() {
var done = (i >= self.length);
var value = !done ? self[i++] : undefined;
return {
done: done,
value: value+'前端技術(shù)江湖' //注意這里
};
}
};
}
for(var o of arr){
console.log(o);
}
// 100前端技術(shù)江湖
// 200前端技術(shù)江湖
// 300前端技術(shù)江湖
已覆蓋完成
//生成 set 對(duì)象
var set = new Set(arr);
//調(diào)用 Array.from方法
Array.from(arr);
yield*后面跟的是一個(gè)可遍歷的結(jié)構(gòu)，執(zhí)行時(shí)也會(huì)調(diào)用迭代器函數(shù)。
let foo = function* () {
yield 1;
yield* [2,3,4];
yield 5;
}; yield 需要著重說(shuō)明， 下一節(jié)再詳細(xì)介紹。
既然可迭代對(duì)象的規(guī)則必須在對(duì)象上部署Symbol.iterator屬性，那么我們基本上就可以通過(guò)此屬來(lái)判斷對(duì)象是否為可迭代對(duì)象，然后就可以知道是否能使用 for of 取值了。
function isIterable(object) {
return typeof object[Symbol.iterator] === "function";
}
console.log(isIterable('abcdefg')); // true
console.log(isIterable([1, 2, 3])); // true
console.log(isIterable("Hello")); // true
console.log(isIterable(new Map())); // true
console.log(isIterable(new Set())); // true
console.log(isIterable(new WeakMap())); // false
console.log(isIterable(new WeakSet())); // false
ES6的出現(xiàn)帶來(lái)了很多新的數(shù)據(jù)結(jié)構(gòu)，比如 Map ,Set ，所以為了數(shù)據(jù)獲取的方便，增加了一種統(tǒng)一獲取數(shù)據(jù)的方式 for of 。而 for of 執(zhí)行的時(shí)候引擎會(huì)自動(dòng)調(diào)用對(duì)象的迭代器來(lái)取值。
不是所有的對(duì)象都支持這種方式，必須是實(shí)現(xiàn)了Iterator接口的才可以，這樣的對(duì)象我們稱他們?yōu)榭傻鷮?duì)象。
迭代器實(shí)現(xiàn)方式根據(jù)可迭代協(xié)議，迭代器協(xié)議實(shí)現(xiàn)即可。
除了統(tǒng)一數(shù)據(jù)訪問(wèn)方式，還可以自定義得到的數(shù)據(jù)內(nèi)容，隨便怎樣，只要是你需要的。
迭代器是一個(gè)方法， 用來(lái)返回迭代器對(duì)象。
可迭代對(duì)象是部署了 Iterator 接口的對(duì)象，同時(shí)擁有正確的迭代器方法。
ES6內(nèi)很多地方都應(yīng)用了Iterator,平時(shí)可以多留意觀察，多想一步。
到這里我們已經(jīng)可以根據(jù)迭代器的規(guī)則自定義迭代器了，但實(shí)現(xiàn)的過(guò)程有些復(fù)雜，畢竟需要自己來(lái)維護(hù)內(nèi)部指針，有不少的邏輯處理，難免會(huì)出錯(cuò)。
那有沒(méi)有更優(yōu)雅的實(shí)現(xiàn)方式呢？
有，那就是-Generator -生成器 。
let obj = {
* [Symbol.iterator]() {
yield 'hello';
yield 'world';
}
};
for (let x of obj) {
console.log(x);
}
// "hello"
// "world"可以看出它非常簡(jiǎn)潔，無(wú)需過(guò)多代碼就可以生成一個(gè)迭代器。
它除了可以作為生成迭代器的語(yǔ)法糖，他還有更多神奇的能力。
這次就先搞定Iterator,下次搞 Generator 。
感謝各位的閱讀，以上就是“什么是for of和Iterator”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)什么是for of和Iterator這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
