如何在 JavaScript 中檢查對像中是否存在屬性
JavaScript 提供了幾種方法來檢查對像中是否存在屬性。您可以選擇以下方法之一來檢查屬性是否存在:
hasOwnProperty()
方法in
運營商- 與
undefined
比較
hasOwnProperty()
方法
hasOwnProperty()
方法是對象原型的一部分並返回一個布爾值(true
或 false
) 表示對像是否具有指定的屬性作為自己的屬性。
假設您有以下 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 種不同的方法來檢查對像是否包含特定屬性。
hasOwnProperty()
方法檢查對象自身屬性中是否存在屬性。in
運算符在對象的自身屬性和繼承屬性中查找屬性。- 最後可以將屬性值與
undefined
進行比較 檢查它是否存在。僅當您確定屬性值不是undefined
時才應使用此方法 .
如果你不關心對象繼承的屬性,in
運算符是檢查屬性是否存在的最合適的方法。它的語法簡潔明了。