js中hasOwnProperty方法和in运算符区别

发布于 分类 html5-js-css

0311lc.com说:

hasOwnPropert方法
hasOwnPropert()方法返回值是一个布尔值,指示对象自身属性中是否具有指定的属性,因此这个方法会忽略掉那些从原型链上继承到的属性。

看下面的例子:

Object.prototype.foo = ‘animal’;

let obj = {
name: ‘xiaoming’,
age: ’12’
}
console.log(obj.hasOwnProperty(‘foo’)) // false
console.log(obj.hasOwnProperty(‘name’)) // true

可以看到,如果在函数原型上定义一个变量foo,hasOwnProperty方法会直接忽略掉。

in运算符
在MDN中是这么定义它的 :

如果指定的属性在指定的对象或其原型链中,则in 运算符返回true。

还是用上面的例子来演示:

console.log(‘foo’ in obj) // true
1
可以看到in运算符会检查它或者其原型链是否包含具有指定名称的属性。

在对象遍历中的应用
in运算符在对一个js对象进行遍历的时候会经常涉及到,比方说我如果想遍历上面obj这个对象的说有属性,一般会这么做:

for(let key in obj) {
console.log(key);
}
// name
// age
// foo

这么对对象进行遍历有的同学可能已经看出了问题,没错,我们通常希望遍历的是某个对象的自身属性,而不要去查找它的原型链上定义的属性。如何做呢?

一般我们会利用hasOwnProperty方法这样做:

for(let key in obj) {
if(obj.hasOwnProperty(key)) {
console.log(key);
}
}
// name
// age

上面的用法确实可以解决对象遍历过程中遇到的问题,但不是最优解,还可以这么解决。

for(let key of Object.keys(obj)) {
console.log(key);
}
// name
// age

Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致 。


发表评论

电子邮件地址不会被公开。 必填项已用*标注