卡卡網(wǎng)

檢索鍵是在JS對(duì)象操作中常常用到的技術(shù)，我們要操作一個(gè)鍵的時(shí)候，為了程序流程嚴(yán)密，往往先判斷鍵的存在，再進(jìn)一步執(zhí)行下面的程序。這正是本文要介紹的，5種方法檢查JS對(duì)象中是否存在某個(gè)鍵(屬性)。

你還可以看看如下類似的文章：

• 3種方法判斷JS對(duì)象是否具有某一屬性

假設(shè)有以下嵌套對(duì)象，并且想要檢索name屬性：

const site = { 
    webkaka: { 
        name: '卡卡網(wǎng)',
        url: 'gazebo2go.com' 
    } 
}; 

使用 typeof 運(yùn)算符

最簡(jiǎn)單的方法是檢查值是否等于 undefined 。

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

demodownload

輸出

鍵存在

webkaka是現(xiàn)有的對(duì)象，如果該對(duì)象不存在，會(huì)捕獲一個(gè) TypeError 錯(cuò)誤：

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

檢查真實(shí)性

還可以使用 AND 運(yùn)算符連接變量以創(chuàng)建布爾值。

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

demodownload

輸出：

鍵存在

使用此解決方案，可以繞過(guò) TypeError，但是，可以看到，如果對(duì)象嵌套很深，檢查每一層，很快就會(huì)使語(yǔ)句變得不可讀。

使用 in 運(yùn)算符

這也將返回一個(gè)布爾值：

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

demodownload

此解決方案的問(wèn)題再次在于它假定這 webkaka 是一個(gè)對(duì)象。如果不是，我們會(huì)得到一個(gè) TypeError。

使用 hasOwnProperty 方法

就像 in 運(yùn)算符一樣，它假設(shè)存在 webkaka，并且只有在我們有一個(gè)單層對(duì)象時(shí)才能可靠地使用。 

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

demodownload

使用可選鏈接

與前面的示例不同，此方法為不存在的父母提供了解決方案。

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

demodownload

即使 webkaka 不是對(duì)象，也不會(huì)拋出錯(cuò)誤。但是，這有一個(gè)缺點(diǎn)，只有部分瀏覽器支持它，所以不應(yīng)該在生產(chǎn)環(huán)境中使用它。 

in 和 hasOwnProperty 有什么區(qū)別？

了解in和hasOwnProperty之間的區(qū)別很重要，如果需要檢查繼承的屬性，則需要使用 in 運(yùn)算符，或者也可以一起使用 hasOwnProperty  。為了強(qiáng)調(diào)兩者之間的區(qū)別，請(qǐng)看以下代碼示例：

//構(gòu)造函數(shù)是一個(gè)繼承屬性
//因此，這將返回 true
console.log('constructor' in window);


// 然而這將返回 false
console.log(window.hasOwnProperty(constructor));

demodownload

輸出

true
false

總結(jié)

本文通過(guò)5個(gè)示例，介紹了5種方法檢查JS對(duì)象中是否存在某個(gè)屬性(鍵)。每個(gè)方法都有其奇妙之處，沒(méi)有好壞之分，在使用時(shí)應(yīng)盡量防止捕獲TypeError異常。

相關(guān)文章

• 3種方法JS和jQuery判斷對(duì)象是否為空
• 3種方法判斷JS對(duì)象是否具有某一屬性
• 【如何合理使用】JavaScript訪問(wèn)對(duì)象屬性的3種方法
• 【實(shí)例】演示2種方法JS從對(duì)象中刪除屬性
• JS刪除對(duì)象屬性：這種方法比delete快50倍
• 【實(shí)例】演示2種方法JS從對(duì)象中刪除屬性

標(biāo)簽: 對(duì)象  鍵  屬性