JavaScript >> Javascript 文檔 >  >> Tags >> object

如何在 JavaScript 中檢查對像中是否存在屬性

JavaScript 提供了幾種方法來檢查對像中是否存在屬性。您可以選擇以下方法之一來檢查屬性是否存在:

  1. hasOwnProperty() 方法
  2. in 運營商
  3. undefined比較

hasOwnProperty() 方法

hasOwnProperty() 方法是對象原型的一部分並返回一個布爾值(truefalse ) 表示對像是否具有指定的屬性作為自己的屬性。

假設您有以下 food 對象:

const food = {
    pizza: '🍕',
    burger: '🍔',
    fries: '🍟',
    cake: '🎂'
};

以下示例使用 hasOwnProperty() 檢查 fries 的方法 food 中存在屬性 對象:

const exists = food.hasOwnProperty('fries');

console.log(exists); // true

如果對像中不存在該屬性,則 hasOwnProperty() 方法返回 false 如下圖:

const exists = food.hasOwnProperty('snacks');

console.log(exists); // false

注意 hasOwnProperty() 方法只檢查對象自身屬性中指定屬性的存在。自己的屬性是直接在對像上定義的。

如果屬性是對象原型的一部分,則它不被視為對象自己的屬性。例如,hasOwnProperty() 方法未檢測到 toString 屬性,因為它是從對象的原型繼承而來的:

const exists = food.hasOwnProperty('toString');

console.log(exists); // false

in 運算符

in 運算符是在 JavaScript 中檢查對像中是否存在屬性的另一種方法。它返回 true 如果屬性存在於對像中。否則,它返回 false .

讓我們使用 in 運算符查找 cake food 中的屬性 對象:

const food = {
    pizza: '🍕',
    burger: '🍔',
    fries: '🍟',
    cake: '🎂'
};

'cake' in food;     // true
'drink' in food;    // false

不同於 hasOwnProperty() 方法,in 運算符在自己的屬性以及對象的繼承屬性中查找屬性的存在。

例如,與hasOwnProperty()相反 , in 運算符檢測到繼承的 toString food 中存在屬性 對象:

food.toString;    // function() {...}
'toString' in food;     // true

undefined比較

如果您嘗試從對象訪問不存在的屬性,則返回值為 undefined

food.pizza;     // 🍕
food.rice;      // undefined

food.rice 計算結果為 undefined 因為 food 對像不包含 rice 屬性。

通過使用此邏輯,您可以將屬性與 undefined 進行比較 檢查屬性是否存在於對像中:

food.pizza !== undefined;     // true
food.rice === undefined;      // false

但是,如果對象包含具有 undefined 的屬性 值,將其與 undefined 進行比較 將錯誤地評估為 false

const user = {
    name: 'John Doe',
    job: undefined
};

user.job !== undefined;     // false

正如您在上面看到的,即使 job 屬性存在(但有 undefined 值),user.job !== undefined 計算結果為 false 傳達該屬性不存在的錯誤印象。

總結

我們學習了 3 種不同的方法來檢查對像是否包含特定屬性。

  1. hasOwnProperty() 方法檢查對象自身屬性中是否存在屬性。
  2. in 運算符在對象的自身屬性和繼承屬性中查找屬性。
  3. 最後可以將屬性值與undefined進行比較 檢查它是否存在。僅當您確定屬性值不是 undefined 時才應使用此方法 .

如果你不關心對象繼承的屬性,in 運算符是檢查屬性是否存在的最合適的方法。它的語法簡潔明了。


Tutorial JavaScript 教程
  1. Superface 的新功能:2021 年 11 月

  2. document.write 的替代品是什麼?

  3. 如何從 HTML TABLE(用戶輸入)打印或獲取單元格值

  4. React-redux useSelector 鉤子和相等性檢查

  5. 使用 JSDoc 的類型安全 Web 組件

  6. 錯誤:對像作為 React 子項無效(找到:[object Promise])。如果您打算渲染一組孩子,請改用數組?解決?

  7. forEach 的樂趣

  1. 創建/發布你的第一個 NPM 包

  2. #1 - 反射點 (8 kyu) Codewars Kata

  3. Frontend Horse #5 - 無限滾動和流暢的動畫

  4. Reactjs Expressjs – 為什麼我的 React.js 代碼不使用來自我的 Express 服務器的更新代碼,而是使用舊代碼,即使在我刷新網頁之後也是如此?

  5. 如何解決 Jest 問題:測試通過,但代碼覆蓋失敗!

  6. 靜態類型檢查器。您使用哪個以及為什麼使用它?

  7. 將 Node 應用程序部署到 Azure 應用程序服務時紗線超時

  1. 在 React 中使用 Axios 獲取數據變得簡單

  2. 什麼是 ECMAScript,它與 JavaScript 有何不同

  3. 從單個選項卡中觀看 HTML、CSS 和 JS 中的教程和代碼!

  4. 第 5 部分:準備部署和部署