在JavaScript中检查对象属性的3种方法

DebugUsery
796 阅读2分钟

在这篇文章中，你会读到3种检查JavaScript对象中属性存在的常见方法。

1.hasOwnProperty() 方法

每个JavaScript对象都有一个特殊的方法object.hasOwnProperty('myProp') ，它返回一个布尔值，表示object 是否有一个属性myProp 。

在下面的例子中，hasOwnProperty() ，确定属性name 和realName 的存在。

const hero = {
  name: 'Batman'
};
hero.hasOwnProperty('name');     // => true
hero.hasOwnProperty('realName'); // => false

在另一边，hero 没有realName 属性。因此，hero.hasOwnProperty('realName') 返回false - 表示缺少一个属性。

方法名称hasOwnProperty() ，表明它在对象的自身属性中寻找。自己的属性是那些直接定义在对象上的属性。

正因为如此，hasOwnProperty() 并没有检测到继承的toString 属性。

const hero = {
  name: 'Batman'
};
hero.toString; // => function() {...}
hero.hasOwnProperty('toString'); // => false

2.在运算符中

'myProp' in object 也决定了myProp 属性是否存在于 object

让我们使用in 操作符来检测name 和realName 在hero 对象中的存在。

const hero = {
  name: 'Batman'
};
'name' in hero;     // => true
'realName' in hero; // => false

另一方面，'realName' in hero 评估为false ，因为hero 没有一个名为'realName' 的属性。

in 操作符的语法很短，比起 hasOwnProperty() 方法，我更喜欢它。 hasOwnProperty() 方法和in 操作符之间的主要区别是，后者在对象的自身和继承的属性内进行检查。

这就是为什么与hasOwnProperty() 相比，in 操作符会检测到hero 对象包含继承的属性toString 。

const hero = {
  name: 'Batman'
};
hero.toString; // => function() {...}
'toString' in hero;              // => true
hero.hasOwnProperty('toString'); // => false

3.与未定义相比较

从一个对象访问一个不存在的属性，结果是undefined 。

const hero = {
  name: 'Batman'
};
hero.name;     // => 'Batman'
hero.realName; // => undefined

现在你可以看到一个想法：你可以与undefined 比较，以确定该属性的存在。

const hero = {
  name: 'Batman'
};
hero.name !== undefined;     // => true
hero.realName !== undefined; // => false

hero.name !== undefined 评估为true ，这表明属性的存在。

在另一边，hero.realName !== undefined 是false ，这表明realName 是缺失的。

与undefined 进行比较来检测属性的存在是一种廉价而肮脏的方法。

但是要注意假阴性的问题。如果属性存在，但是有undefined 的值（然而这种情况很少发生），与undefined 的比较会错误地评估为false 。

const hero = {
  name: undefined
};
hero.name !== undefined; // => false

即使属性name 存在（但有undefined 的值），hero.name !== undefined 评估为false: 这错误地表明了一个缺失的属性。

4.4.总结

主要有3种方法来检查属性是否存在:

第一种方法是调用object.hasOwnProperty(propName) 。如果propName 存在于object 内，该方法返回true ，否则返回false 。

hasOwnProperty() 只在对象的自身属性内搜索。

第二种方法是使用propName in object 操作符。如果有一个现有的属性，该操作符评估为true ，否则false 。

in 操作符在自己的和继承的属性中寻找存在的属性。

最后，你可以简单地使用object.propName !== undefined 并直接与undefined 进行比较。

avatar
文章
阅读
粉丝