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

2017-12-29  本文已影响0人  Cola丶ZYQ
有时候,我们在遍历对象的时候会遍历出此对象中没有的属性。那是因为你或者你的协作者在 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 都不能保证。

上一篇下一篇

猜你喜欢

热点阅读