卡卡網(wǎng)

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

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

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

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

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

使用 typeof 運算符

最簡單的方法是檢查值是否等于 undefined 。

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

demodownload

輸出

鍵存在

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

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

檢查真實性

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

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

demodownload

輸出：

鍵存在

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

使用 in 運算符

這也將返回一個布爾值：

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

demodownload

此解決方案的問題再次在于它假定這 webkaka 是一個對象。如果不是，我們會得到一個 TypeError。

使用 hasOwnProperty 方法

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

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

demodownload

使用可選鏈接

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

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

demodownload

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

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

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

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


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

demodownload

輸出

true
false

總結(jié)

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

相關(guān)文章

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

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