本篇內(nèi)容主要講解“es6的for of可不可以遍歷對象”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“es6的for of可不可以遍歷對象”吧!
目前創(chuàng)新互聯(lián)公司已為上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計、藍(lán)田網(wǎng)站維護(hù)等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
es6的“for of”不能遍歷對象。原因：ES6中引入了Iterator接口，只有提供了Iterator接口的數(shù)據(jù)類型才可以使用“for-of”來循環(huán)遍歷；而普通對象默認(rèn)沒有提供Iterator接口，因此無法用“for-of”來進(jìn)行遍歷。
本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。
隨著前端的不斷發(fā)展，光循環(huán)就出現(xiàn)了好多種方法，for、forEach、do..while、for...in等等，不過這些循環(huán)也都各有各的應(yīng)用場景和優(yōu)缺點。
ES6又為我們提供了新的循環(huán)方法for...of，它可以循環(huán)字符串、數(shù)組及其他類數(shù)組對象，那作為最普遍存在的Object對象，按理，可以循環(huán)？
我們看一下下方的代碼示例：
重慶分公司
重慶分公司
{
// 迭代數(shù)組
const iterable = ['a', 'b'];
for (const value of iterable) {
console.log(value);
}
// output: a b
}
{
// 普通對象
const obj = {
a: 'A',
b: 'B'
}
for(const item of obj){
console.log(item)
}
// Uncaught TypeError: obj is not iterable
}oh no，報錯了：Uncaught TypeError: obj is not iterable。提示obj是不可迭代的，顯然直接用for...of去遍歷Object對象是不行的。
那么可以遍歷大部分?jǐn)?shù)據(jù)結(jié)構(gòu)的for...of為何不能遍歷Object對象？
原因：
ES6 中引入了 Iterator，只有提供了 Iterator 接口的數(shù)據(jù)類型才可以使用 for-of 來循環(huán)遍歷，而 Array、Set、Map、某些類數(shù)組如 arguments 等數(shù)據(jù)類型都默認(rèn)提供了 Iterator 接口，所以它們可以使用 for-of 來進(jìn)行遍歷。
而對于普通的對象，for...of結(jié)構(gòu)不能直接使用，會報錯，提示obj is not iterable，也就是說普通對象默認(rèn)沒有Iterator接口，必須部署了 Iterator 接口后才能使用。
怎么解決？讓for-of 遍歷對象
那么原因清楚了，該怎么解決呢？能不能為對象已經(jīng)其它的一些數(shù)據(jù)類型提供 Iterator 接口呢
答案是可以的，ES6 同時提供了 Symbol.iterator 屬性，只要一個數(shù)據(jù)結(jié)構(gòu)有這個屬性，就會被視為有 Iterator 接口，接著就是如何實現(xiàn)這個接口了，如下就是一個最簡實現(xiàn)：
newObj[Symbol.iterator] = function(){
let index = 0
, self = this
, keys = Object.keys( self )
;
return {
next(){
if( index < keys.length ){
return {
value: self[keys[index++]]
, done: false
};
}
else{
return {
value: undefined
, done: true
}
}
}
};
};仔細(xì)看一下發(fā)現(xiàn)就會發(fā)現(xiàn) Symbol.iterator 接口其實是一個 Generator 函數(shù)，那么就可以簡化代碼：
newObj[Symbol.iterator] = function* (){
let keys = Object.keys( this )
;
for(let i = 0, l = keys.length; i < l; i++){
yield this[keys[i]];
}
}
for(let v of newObj){
console.log( v );
}
// 輸出結(jié)果
// 5
// 6值得注意的是 Object.keys 碰巧解決了之前 for-in 遇到的繼承問題
這樣滿足了我們的期望，使用 for-of 來遍歷對象，但是好像哪里不對，我們遍歷對象時一般都是期望同時輸出 key 和 value 的，這樣調(diào)整一下代碼
newObj[Symbol.iterator] = function* (){
let keys = Object.keys( this )
;
for(let i = 0, l = keys.length; i < l; i++){
yield {
key: keys[i]
, value: this[keys[i]]
};
}
}
for(let v of newObj){
console.log( v );
}
// 輸出結(jié)果
// {key: "e", value: 5}
// {key: "f", value: 6}這樣返回了一個對象，似乎又很不舒服，我們能不能嘗試一些解構(gòu)賦值呢。。。
for(let {key, value} of newObj){
console.log(key, value );
}
// 輸出結(jié)果
// e 5
// f 6這樣似乎非常完美了。。。
擴(kuò)展知識：for-of和其他循環(huán)的區(qū)別
| 循環(huán)名稱 | 循環(huán)對象 | 是否可中斷循環(huán) | 是否有返回值 |
|---|---|---|---|
for | for循環(huán)體的length | 可以 | 無返回值 |
forEach | 僅可循環(huán)數(shù)組、map、set等，不可循環(huán)字符串、普通對象 | 不可以 | 無返回值 |
do...while | 滿足某種條件，則可一直循環(huán)，至少循環(huán)一次 | 可以 | 無返回值 |
while | 滿足某種條件，則可一直循環(huán) | 可以 | 無返回值 |
map | 組成新的數(shù)組成員，僅可循環(huán)數(shù)組，不可循環(huán)字符串、普通對象，set、map | 不可中斷 | 返回新數(shù)組，不影響原數(shù)組 |
filter | 過濾數(shù)組成員，僅可循環(huán)數(shù)組，不可循環(huán)字符串、普通對象，set、map | 不可中斷 | 返回新數(shù)組，不影響原數(shù)組 |
for...in | 可循環(huán)數(shù)組、對象，不可循環(huán)map、set?？杀闅v數(shù)字鍵名，還可遍歷手動添加的其他鍵，甚至包括原型鏈上的鍵 | 可以 | 無返回值 |
for...of | 循環(huán)可迭代的對象，不可循環(huán)普通對象（統(tǒng)一數(shù)據(jù)結(jié)構(gòu)遍歷） | 可以 | 無返回值 |
到此，相信大家對“es6的for of可不可以遍歷對象”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
