es6的「for of」不能遍歷物件。原因：ES6中引入了Iterator接口，只有提供了Iterator接口的資料類型才可以使用“for-of”來循環遍歷；而普通對象默認沒有提供Iterator接口，因此無法用“for-of”來進行遍歷。
本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。
隨著前端的不斷發展，光循環就出現了好多種方法，for、forEach、do..while、for...in等等，不過這些循環也都各有各的應用場景和優缺點。
ES6又為我們提供了新的循環方法for...of，它可以循環字串、數組及其他類數組對象，那作為最普遍存在的Object對象，按理，可以循環？
我們來看看下方的程式碼範例：
{
// 迭代数组
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物件是不行的。
那麼可以遍歷大部分資料結構的for...of為何不能遍歷Object物件？
原因：
ES6 中引入了Iterator，只有提供了Iterator 介面的資料類型才可以使用for-of 來循環遍歷，而Array、 Set、Map、某些類別數組如arguments 等資料類型都預設提供了Iterator 接口，所以它們可以使用for-of 來進行遍歷。
而對於普通的對象，for...of結構不能直接使用，會報錯，提示obj is not iterable，也就是說普通對象預設沒有Iterator接口，必須部署了Iterator 介面後才能使用。
怎麼解決？讓for-of 遍歷物件
那麼原因清楚了，該怎麼解決呢？能不能為物件已經其它的一些資料型別提供Iterator 介面呢
答案是可以的，ES6 同時提供了Symbol.iterator 屬性，只要一個資料結構有這個屬性，就會被視為有Iterator 介面，接著就是如何實現這個介面了，如下就是一個最簡實作：
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
}
}
}
};
};仔細看一下發現就會發現 Symbol.iterator 介面其實是一個 Generator 函數，那麼就可以簡化程式碼：
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 );
}
// 输出结果
// 5
// 6值得注意的是 Object.keys 碰巧解決了先前 for-in 遇到的繼承問題
這樣滿足了我們的期望，使用 for-of 來遍歷對象，但是好像哪裡不對，我們遍歷對象時一般都是期望同時輸出 key 和 value 的，這樣調整程式碼
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 );
}
// 输出结果
// {key: "e", value: 5}
// {key: "f", value: 6}這樣回傳了一個對象，似乎又很不舒服，我們能不能嘗試一些解構賦值呢。 。 。
for(let {key, value} of newObj){
console.log(key, value );
}
// 输出结果
// e 5
// f 6這樣似乎非常完美了。 。 。
擴充知識：for-of和其他迴圈的差異
| #迴圈名稱 | 迴圈物件 | 是否可中斷迴圈 | 是否有回傳值 |
|---|---|---|---|
for |
for循環體的length
|
可以 | 無回傳值 |
forEach |
僅可循環陣列、map、set等，不可循環字串、普通物件 |
不可以 | 無回傳值 |
do...while |
滿足某種條件，則可一直循環，至少循環一次 | 可以 | 無回傳值 |
while |
#滿足某種條件，則可一直循環 | 可以 | 無回傳值 |
map |
組成新的陣列成員，僅可循環數組，不可循環字串、普通對象，set 、map | 不可中斷 | 傳回新數組，不影響原始數組 |
filter |
過濾數組成員，僅可循環數組，不可循環字串、普通對象，set、map | 不可中斷 | 傳回新數組，不影響原始數組 |
for...in |
可循環陣列、物件，不可循環map、set。可遍歷數字鍵名，還可遍歷手動添加的其他鍵，甚至包括原型鏈上的鍵 |
可以 | 無回傳值 |
for...of
|
循環可迭代的對象，不可循環普通對象（統一資料結構遍歷） | 可以 | 無回傳值 |
【相關推薦：javascript影片教學、web前端】
以上是es6的for of可以遍歷對象嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！
