es6的“for of”不能遍歷對(duì)象。原因：ES6中引入了Iterator接口，只有提供了Iterator接口的數(shù)據(jù)類型才可以使用“for-of”來(lái)循環(huán)遍歷；而普通對(duì)象默認(rèn)沒(méi)有提供Iterator接口，因此無(wú)法用“for-of”來(lái)進(jìn)行遍歷。

本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。

隨著前端的不斷發(fā)展，光循環(huán)就出現(xiàn)了好多種方法，for、forEach、do..while、for…in等等，不過(guò)這些循環(huán)也都各有各的應(yīng)用場(chǎng)景和優(yōu)缺點(diǎn)。

ES6又為我們提供了新的循環(huán)方法for…of，它可以循環(huán)字符串、數(shù)組及其他類數(shù)組對(duì)象，那作為最普遍存在的Object對(duì)象，按理，可以循環(huán)？

我們看一下下方的代碼示例：

{     // 迭代數(shù)組   const iterable = ['a', 'b'];   for (const value of iterable) {     console.log(value);   }   // output: a b } {     // 普通對(duì)象     const obj = {       a: 'A',       b: 'B'     }     for(const item of obj){       console.log(item)     }     // Uncaught TypeError: obj is not iterable }

oh no，報(bào)錯(cuò)了：Uncaught TypeError: obj is not iterable。提示obj是不可迭代的，顯然直接用for...of去遍歷Object對(duì)象是不行的。

那么可以遍歷大部分?jǐn)?shù)據(jù)結(jié)構(gòu)的for…of為何不能遍歷Object對(duì)象？

原因：

ES6 中引入了 Iterator，只有提供了 Iterator 接口的數(shù)據(jù)類型才可以使用 for-of 來(lái)循環(huán)遍歷，而 Array、Set、Map、某些類數(shù)組如 arguments 等數(shù)據(jù)類型都默認(rèn)提供了 Iterator 接口，所以它們可以使用 for-of 來(lái)進(jìn)行遍歷。

而對(duì)于普通的對(duì)象，for…of結(jié)構(gòu)不能直接使用，會(huì)報(bào)錯(cuò)，提示obj is not iterable，也就是說(shuō)普通對(duì)象默認(rèn)沒(méi)有Iterator接口，必須部署了 Iterator 接口后才能使用。

怎么解決？讓for-of 遍歷對(duì)象

那么原因清楚了，該怎么解決呢？能不能為對(duì)象已經(jīng)其它的一些數(shù)據(jù)類型提供 Iterator 接口呢

答案是可以的，ES6 同時(shí)提供了 Symbol.iterator 屬性，只要一個(gè)數(shù)據(jù)結(jié)構(gòu)有這個(gè)屬性，就會(huì)被視為有 Iterator 接口，接著就是如何實(shí)現(xiàn)這個(gè)接口了，如下就是一個(gè)最簡(jiǎn)實(shí)現(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)就會(huì)發(fā)現(xiàn) Symbol.iterator 接口其實(shí)是一個(gè) Generator 函數(shù)，那么就可以簡(jiǎn)化代碼：

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 遇到的繼承問(wèn)題

這樣滿足了我們的期望，使用 for-of 來(lái)遍歷對(duì)象，但是好像哪里不對(duì)，我們遍歷對(duì)象時(shí)一般都是期望同時(shí)輸出 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è)對(duì)象，似乎又很不舒服，我們能不能嘗試一些解構(gòu)賦值呢。。。

for(let {key, value} of newObj){     console.log(key, value ); } // 輸出結(jié)果 // e 5 // f 6

這樣似乎非常完美了。。。

擴(kuò)展知識(shí)：for-of和其他循環(huán)的區(qū)別

【