es6的for of可以遍历对象吗

es6的for of可以遍历对象吗,第1张

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

循环名称循环对象是否可中断循环是否有返回值forfor循环体的length可以无返回值forEach仅可循环数组、map、set等,不可循环字符串、普通对象不可以无返回值do...while满足某种条件,则可一直循环,至少循环一次可以无返回值while满足某种条件,则可一直循环可以无返回值map组成新的数组成员,仅可循环数组,不可循环字符串、普通对象,set、map不可中断返回新数组,不影响原数组filter过滤数组成员,仅可循环数组,不可循环字符串、普通对象,set、map不可中断返回新数组,不影响原数组for...in可循环数组、对象,不可循环map、set。可遍历数字键名,还可遍历手动添加的其他键,甚至包括原型链上的键可以无返回值for...of循环可迭代的对象,不可循环普通对象(统一数据结构遍历)可以无返回值

【相关推荐:javascript视频教程、web前端】

以上就是es6的for of可以遍历对象吗的详细内容,

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1373246.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-16
下一篇 2022-06-16

发表评论

登录后才能评论

评论列表(0条)

保存