3 Ways to Check If an Object Has a Property

栏目: IT技术 · 发布时间: 4年前

内容简介:Due to the dynamic nature of JavaScript, you might need to verify if a specific property exists in an object.In this post, you’ll read about the 3 common ways to check whether a property exists in an object.The JavaScript object has a special method

Due to the dynamic nature of JavaScript, you might need to verify if a specific property exists in an object.

In this post, you’ll read about the 3 common ways to check whether a property exists in an object.

1. hasOwnProperty() method

The JavaScript object has a special method object.hasOwnProperty(propName) that returns a boolean that indicates whether object has a property propName .

In the following example hasOwnProperty() determines the presence of properties:

const hero = {
  name: 'Batman'
};

hero.hasOwnProperty('name');     // => true
hero.hasOwnProperty('realName'); // => false

The property name exists in the object hero : thus hero.hasOwnProperty('name') returns true .

On the other side, realName property doesn’t exist in the object hero . As expected, hero.hasOwnProperty('realName') returns false — denoting a missing property.

The method name hasOwnProperty() suggests that it looks for properties in theown properties of the object. In simple words, the own properties are those defined directly upon the object.

Even if every JavaScript object has an inherited property toString (which is a method inherited from the object’s prototype), hasOwnProperty() doesn’t detect it as a property:

const hero = {
  name: 'Batman'
};

hero.toString; // => function() {...}

hero.hasOwnProperty('toString'); // => false

2. in operator

The in operator propName in object also determines whether propName property exists in object .

Let’s use in operator to detect the existence of a property:

const hero = {
  name: 'Batman'
};

'name' in hero;     // => true
'realName' in hero; // => false

'name' in hero evaluates as expected to true because hero has a property name .

However, hero doesn’t have a property named 'realName' . As a result, 'realName' in hero evaluates to false .

in operator has a short syntax, and I prefer it over hasOwnProperty() method in most of the cases.

Here’s the main difference between hasOwnProperty() method and in operator: the latter checks within the own properties, but also in the list of inherited properties.

That’s why, in contrast to hasOwnProperty() , the in operator detects that the inherited property toString exists inside hero object:

const hero = {
  name: 'Batman'
};

hero.toString; // => function() {...}

'toString' in hero; // => true

3. Comparing with undefined

If you access a non-existing property from an object, the result is undefined . Let’s try an example:

const hero = {
  name: 'Batman'
};

hero.name;     // => 'Batman'
hero.realName; // => undefined

hero.realName evaluates to undefined because realName property is missing.

Now you can see the idea: let’s compare against undefined to determine the existence of the property.

const hero = {
  name: 'Batman'
};

hero.name !== undefined;     // => true
hero.realName !== undefined; // => false

hero.name !== undefined evaluates to true , which shows the existence of property.

On the other side, hero.realName !== undefined is false , which indicates the realName is missing.

I’ve been comparing with undefined to detect the existence of property for quite some time. It’s a cheap and dirty approach.

Note that this approach can generate a false-negative. If the property exists, but has undefined value (case, however, rarely happening), comparing against undefined evaluates incorrectly to false :

const hero = {
  name: undefined
};

hero.name !== undefined; // => false

Even if the property name exists (but has undefined value), hero.name !== undefined evaluates to false : which incorrectly indicates a missing property.

4. Summary

There are mainly 3 ways to check if the property exists.

The first way is to invoke object.hasOwnProperty(propName) . The method returns true if the propName exists inside object , and false otherwise.

Note that hasOwnProperty() searches only within theown properties of the object.

The second approach makes use of propName in object operator. As well, the operator evaluates to true for an existing property, and false otherwise.

in operator looks for properties existence in bothown andinherited object properties.

Finally, you can simply use object.propName !== undefined and compare against undefined directly.

What’s your preferred way to check for properties existence?


以上所述就是小编给大家介绍的《3 Ways to Check If an Object Has a Property》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

马尔可夫链:模型、算法与应用

马尔可夫链:模型、算法与应用

Wai-Ki Ching、Ximin Huang / 陈曦 / 清华大学出版社 / 2015-6 / 39

《马尔可夫链:模型、算法与应用 应用数学译丛》讲述了马尔可夫链模型在排队系统、网页重要性排名、制造系统、再制造系统、库存系统以及金融风险管理等方面的最新应用进展.全书共安排8章内容,第1章介绍马尔可夫链、隐马尔可夫模型和马尔可夫决策过程的基本理论和方法,其余7章分别介绍马尔可夫链模型在不同领域中的应用. 《马尔可夫链:模型、算法与应用 应用数学译丛》可作为自动化、工业工程、统计学、应用数学以及管理......一起来看看 《马尔可夫链:模型、算法与应用》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

html转js在线工具
html转js在线工具

html转js在线工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具