美文网首页
对象属性的遍历

对象属性的遍历

作者: 泰然自若_750f | 来源:发表于2020-06-09 11:08 被阅读0次

    前端开发中经常应用到对对象的遍历,有很多方法可实现,但用法和功能有所不同,下面总结比较一下异同。下面代码 比较 for in,Object.keys,Object. getOwnPropertyNames,getOwnPropertySymbols 等。

    方法 属性 备注
    for in 遍历 可枚举的 原型上的属性和自身属性 不包含Symbol
    Object.keys 遍历可枚举的自身属性 不包含Symbol 作为属性名和原型上的属性
    Object. getOwnPropertyNames 指定对象的所有自身属性的属性名(包括不可枚举属性) 不包括Symbol值作为名称的属性
    Object.getOwnPropertySymbols(o) 遍历 Symbol 值作为属性名 包含不可枚举属性
    var o = new Object(),x=Symbol('x');
    //原型上的属性
    Object.prototype.name = 'xl';
    //自身上普通属性
    o.prop = 'xl';
    o.enum = 'enum';
    //Symbol 值作为属性名
    o[x]='1212'
    //将 enum 属性设为不可枚举
    Object.defineProperty(o,'enum',{
      enumerable:false
    })
    
    //可以遍历 可枚举的 原型上的属性和自身属性(不包含Symbol)
    for(var i in o)
    {
         console.log(i); // name prop
    }
    // 遍历可枚举的自身属性(不包含Symbol 作为属性名和原型上的属性)
    Object.keys(o).forEach((key)=>{
        console.log(`key:${key}`); //  prop
    })
    
    
    // for in 和 hasOwnProperty 组合可以实现 Object.keys
    for(var i in o)
    {    
         if(o.hasOwnProperty(i))
         {
              console.log(i); //  prop
         }
    }
    //方法返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括Symbol值作为名称的属性)组成的数组
    console.log(Object.getOwnPropertyNames(o)) //[ 'prop', 'enum' ]
    //遍历 Symbol 值作为属性名
    console.log(Object.getOwnPropertySymbols(o)) //[ Symbol(x) ]
    //获得对象属性的 详细信息
    console.log(Object.getOwnPropertyDescriptor(o,x))
    // { value: '1212',
    //   writable: true,
    //   enumerable: true,
    //   configurable: true }
    
    //获得对象的原型上的可枚举的{key:value}
    console.log(Object.getPrototypeOf(o)) //{ name: 'xl' }
    

    参考链接:
    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object

    相关文章

      网友评论

          本文标题:对象属性的遍历

          本文链接:https://www.haomeiwen.com/subject/cifxtktx.html