JavaScript 檢驗物件是否包含屬性的方法

導言 - Lead paragraph

在 JavaScript 開發中，經常需要判斷一個物件是否包含特定屬性。

下面將介紹幾種常用且效能良好的方法，幫助開發者更好地處理這類需求。

在 ECMAScript 2022 (ES13) 以前，有兩種較多人使用的傳統方法可以檢查 JS 對象是否具有任何自定義屬性：

in operator
hasOwnProperty() function

而在 ES13 的 “hasOwn()” 出現以後，正式自 ECMAScript 2022（ES13）起，就不再需要使用 hasOwnProperty() 了，因為我們可以使用新的內置 Object.hasOwn() 方法。

in 運算符 - in Operator

這是 JavaScript 中內建的運算子，可以檢查物件是否包含指定的屬性，包括直接擁有的和透過原型鏈繼承的屬性。

const obj = { name: 'John', age: 30 };

console.log('name' in obj);
console.log('gender' in obj);

// Output:
// true
// false

Object.hasOwn()

⚠️ Object.hasOwn() 旨在取代 Object.prototype.hasOwnProperty()。

如果指定的對象自身有指定的屬性，則返回 true。如果屬性是繼承的或者不存在，該方法返回 false。

它與 in 運算符不同，因為它不檢查繼承的屬性。

const obj = { name: 'John', age: 30 };

console.log(Object.hasOwn(obj, 'name'));
console.log(Object.hasOwn(obj, 'gender'));

// Output:
// true
// false

官方文檔：Object.hasOwn() - JavaScript | MDN

Object.prototype.hasOwnProperty()

已過時，但還可使用

這是 JavaScript 中內建的方法，可用於檢查物件自身是否包含指定的屬性，而不是透過原型鏈繼承而來的屬性。

const obj = { name: 'John', age: 30 };

console.log(obj.hasOwnProperty('name'));
console.log(obj.hasOwnProperty('gender'));

// Output:
// true
// false

Object.keys()

使用 Object.keys() 將物件的屬性名稱轉換為一個陣列，然後可以透過陣列的方法來判斷是否包含指定的屬性。

const obj = { name: 'John', age: 30 };

console.log(Object.keys(obj).includes('name'));
console.log(Object.keys(obj).includes('gender'));

// Output:
// true
// false

Object.prototype.hasOwnProperty.call()

這是 hasOwnProperty() 的一個變種，可以解決某些特殊情況下的問題，特別是當物件的 hasOwnProperty() 被覆寫時。

const obj = { name: 'John', age: 30 };

console.log(Object.prototype.hasOwnProperty.call(obj, 'name'));
console.log(Object.prototype.hasOwnProperty.call(obj, 'gender'));

// Output:
// true
// false

Object.getOwnPropertyNames()

Object.getOwnPropertyNames() 會返回物件本身所有屬性（不包括繼承的屬性）的名稱，可以用來檢查是否存在指定屬性。

const obj = { name: 'John', age: 30 };

console.log(Object.getOwnPropertyNames(obj).includes('name'));
console.log(Object.getOwnPropertyNames(obj).includes('gender'));

// Output:
// true
// false

undefined OR !==

這是一種比較老式的方法，在現代 JavaScript 中不太常見，但仍然有效。

通過檢查屬性是否等於 undefined，來判斷物件是否包含指定的屬性。

const obj = { name: 'John', age: 30 };

console.log(obj.name !== undefined);
console.log(obj.gender !== undefined);

// Output:
// true
// false

方法與使用情境對比

方法	使用情境
`in` 運算符	檢查物件是否包含指定屬性，包括原型鏈中的屬性。需要考慮物件及其原型鏈中是否有指定屬性時使用。
`Object.prototype.hasOwn()`	指定對象具有指定屬性作為其自己的屬性。只需要判斷物件自身是否擁有指定屬性時使用。
`Object.prototype.hasOwnProperty()`	檢查物件是否包含指定屬性，且不考慮原型鏈繼承。只需要判斷物件自身是否擁有指定屬性時使用。
`Object.keys()`	將物件的屬性名稱轉換為陣列，方便進行遍歷或其他陣列方法。不需關心屬性的值，只需判斷是否存在時使用。
`Object.getOwnPropertyNames()`	獲得物件本身所有屬性（不包括繼承的屬性）的名稱。只需檢查物件本身的屬性時使用。
`Object.prototype.hasOwnProperty.call()`	`hasOwnProperty` 的變種，解決某些特殊情況下的問題。可以用在 `hasOwnProperty` 方法被覆寫時。