es6的for of可以遍历对象吗

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和其他循环的区别

【