技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

5种方法检查JS对象中是否存在某个键(属性)

作者:admin    时间:2022-5-12 19:17:54    浏览:

检索键是在JS对象操作中常常用到的技术,我们要操作一个键的时候,为了程序流程严密,往往先判断键的存在,再进一步执行下面的程序。这正是本文要介绍的,5种方法检查JS对象中是否存在某个键(属性)。

你还可以看看如下类似的文章:

5种方法检查JS对象中是否存在某个键(属性) 

假设有以下嵌套对象,并且想要检索name属性:

const site = { 
    webkaka: { 
        name: '卡卡网',
url: 'www.webkaka.com' 
    } 
}; 

使用 typeof 运算符

最简单的方法是检查值是否等于 undefined

if (typeof site.webkaka.name !== 'undefined') { 
    console.log("键存在");
}

demodownload

输出

键存在

webkaka是现有的对象,如果该对象不存在,会捕获一个 TypeError 错误:

index4.html:20 Uncaught TypeError: Cannot read properties of undefined (reading 'name')

检查真实性

还可以使用 AND 运算符连接变量以创建布尔值。

if (site && site.webkaka && site.webkaka.name) { 
    console.log("键存在");

demodownload

输出:

键存在

使用此解决方案,可以绕过 TypeError,但是,可以看到,如果对象嵌套很深,检查每一层,很快就会使语句变得不可读。

使用 in 运算符

这也将返回一个布尔值:

if ('name' in site.webkaka) { 
    console.log("键存在");

demodownload

此解决方案的问题再次在于它假定这 webkaka 是一个对象。如果不是,我们会得到一个 TypeError

使用 hasOwnProperty 方法

就像 in 运算符一样,它假设存在 webkaka,并且只有在我们有一个单层对象时才能可靠地使用。 

if (site.webkaka.hasOwnProperty('name')) { 
    console.log("键存在");

demodownload

使用可选链接

与前面的示例不同,此方法为不存在的父母提供了解决方案。

if (site?.webkaka?.name) { 
    console.log("键存在");

demodownload

即使 webkaka 不是对象,也不会抛出错误。但是,这有一个缺点,只有部分浏览器支持它,所以不应该在生产环境中使用它。 

in 和 hasOwnProperty 有什么区别?

了解inhasOwnProperty之间的区别很重要,如果需要检查继承的属性,则需要使用 in 运算符,或者也可以一起使用 hasOwnProperty  。为了强调两者之间的区别,请看以下代码示例:

//构造函数是一个继承属性
//因此,这将返回 true
console.log('constructor' in window);


// 然而这将返回 false
console.log(window.hasOwnProperty(constructor));

demodownload

输出

true
false

总结

本文通过5个示例,介绍了5种方法检查JS对象中是否存在某个属性(键)。每个方法都有其奇妙之处,没有好坏之分,在使用时应尽量防止捕获TypeError异常。

相关文章

标签: 对象    属性  
  • IT热文
  • 站长推荐