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

循环名称	循环对象	是否可中断循环	是否有返回值
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中文网其他相关文章！