美文网首页
JavaScript-遍历对象过滤原型链中的属性(hasOwnP

JavaScript-遍历对象过滤原型链中的属性(hasOwnP

作者: Cola丶ZYQ | 来源:发表于2017-12-29 12:57 被阅读0次
    有时候,我们在遍历对象的时候会遍历出此对象中没有的属性。那是因为你或者你的协作者在 Object 的 prototype 属性中增加了此属性

    例如:

    Object.prototype.hide = function() {
        this.style.display = 'none'
        return this
      }
    
      var o = {
        'name': 'xiaoming'
      }
    
      for (key in o) {
        console.log(key)
      }
    
    // name, hide
    

    o 对象中定义的属性只有一个 name 为什么会多出一个 hide 呢?因为我们在Object.prototype 属性中添加了一个属性 hide 方法。我们知道 js 中所有的对象都链接到一个原型对象中,并且它可以从中继承属性。所有通过对象字面量创建的对象都链接到 Object.prototype, 它是 JavaScript 的标配对象。这属于对象的 原型和继承。下面我们来过滤掉遍历时原型中的属性

    有两种方法去处理掉这些不需要的属性。第一个是让你的程序做检查并丢弃值为函数的属性。一般来说,当你想让对象在运行时动态获取自身的信息时,你关注更多的是数据,但有时候一些值也可能是函数。如:

    JSON = {
      x: 0,
      y: 0,
      add: function () {
        return this.x + this.y;
      }
    }
    

    这个时候丢弃值为函数的属性就不可行了,我们用第二个方法。也就是我们要说的 hasOwnProperty 方法,如果对象拥有独有的属性,它将返回 true。hasOwnProperty 方法不会去检查原型链。

    JSON.hasOwnProperty('name') //true
    JSON.hasOwnProperty('hide') //false
    
    //so
    for (key in o) {
      if (o.hasOwnProperty(key)) {
         console.log(key)
      }
    }
    // name
    

    这样我们就可以解决此问题。这里提示一点, 对象在遍历的时候,是不能保证属性出现的顺序的。不管是使用 for in 还是 forEach 都不能保证。

    相关文章

      网友评论

          本文标题:JavaScript-遍历对象过滤原型链中的属性(hasOwnP

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