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

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

可以看到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 循环遍历该对象时返回的顺序一致 。

下面的是我的公众号二维码图片，欢迎关注。