跳至主要内容

2 篇文章 含有標籤「object」

檢視所有標籤

如何在 JavaScript 中檢查物件是否有某個屬性

· 閱讀時間約 3 分鐘
Kevin Liu
Kevin Liu

在 JavaScript 中，我們經常需要檢查物件是否有某個屬性，以便進行相應的操作。有幾種方法可以實現這個功能，下面介紹其中幾種常用的方法：

TL;DR​

方法是否能檢查原型鏈上的屬性說明
in 運算子✅檢查物件自身及其原型鏈上的屬性，若存在則回傳 true，否則回傳 false。
Reflect.has()✅檢查物件自身及其原型鏈上的屬性，行為類似於 in 運算子。
Object.prototype.hasOwnProperty()❌僅檢查物件自身的屬性，若存在則回傳 true，否則回傳 false。
Object.hasOwn()❌類似於 hasOwnProperty，但語法更簡潔，僅檢查物件自身的屬性。

in 運算子​

in 運算子是 JavaScript 中用來檢查物件是否有指定屬性的方法之一。這個運算子會檢查物件自身及其原型鏈上是否有指定的屬性，如果有則回傳 true，否則回傳 false。

const parent = {
  type: "Person",
};

const city = Symbol("city");

const child = Object.create(parent);
child.name = "Kevin";
child.age = 30;
child[city] = "Taipei";

console.log("name" in child); // true
console.log("type" in child); // true
console.log(city in child); // true

Reflect.has() 方法​

Reflect.has() 方法是 JavaScript 中用來檢查物件是否有指定屬性的方法之一。這個方法和 in 運算子類似，會檢查物件自身及其原型鏈上是否有指定的屬性。

const parent = {
  type: "Person",
};

const city = Symbol("city");

const child = Object.create(parent);
child.name = "Kevin";
child.age = 30;
child[city] = "Taipei";

console.log(Reflect.has(child, "name")); // true
console.log(Reflect.has(child, "type")); // true
console.log(Reflect.has(child, city)); // true

Object.prototype.hasOwnProperty() 和 Object.hasOwn()​

Object.prototype.hasOwnProperty() 是 JavaScript 中用來檢查物件是否有指定屬性的方法之一。這個方法會檢查物件自身是否有指定的屬性，如果有則回傳 true，否則回傳 false。需要注意的是，Object.prototype.hasOwnProperty() 方法不會檢查原型鏈上的屬性。 如果你想要更簡潔的方式來檢查物件是否有指定屬性，可以使用 Object.hasOwn()

const parent = {
  type: "Person",
};

const city = Symbol("city");

const child = Object.create(parent);
child.name = "Kevin";
child.age = 30;
child[city] = "Taipei";

console.log(Object.prototype.hasOwnProperty.call(child, "name")); // true
console.log(Object.prototype.hasOwnProperty.call(child, "type")); // false
console.log(Object.prototype.hasOwnProperty.call(child, city)); // true

console.log(Object.hasOwn(child, "name")); // true
console.log(Object.hasOwn(child, "type")); // false
console.log(Object.hasOwn(child, city)); // true

如何在 JavaScript 中獲取物件的 keys

· 閱讀時間約 3 分鐘
Kevin Liu
Kevin Liu

在 JavaScript 中，我們經常需要取得物件的 keys 來進行迴圈操作或其他資料處理。不同的方法會帶來不同的結果，根據需求的不同，我們可以選擇適合的方法來取得物件的 keys。以下介紹幾種常用的方法：

TL;DR​

方法是否能輸出 Symbol 屬性是否能輸出原型鏈上的屬性說明
Object.keys(obj)❌❌回傳物件自身的可枚舉字符串屬性的鍵的陣列，不包含 Symbol 屬性和原型鏈上的屬性
for...in❌✅迭代物件自身及其原型鏈上的所有可枚舉屬性，不包含 Symbol 屬性
Reflect.ownKeys(obj)✅❌回傳物件所有屬性鍵的陣列，包括可枚舉和不可枚舉屬性以及 Symbol 屬性，不包含原型鏈上的屬性

Object.keys()​

Object.keys() 是 JavaScript 中最常用來取得物件 keys 的方法之一。這個方法會回傳一個陣列，裡面包含了該物件所有的可枚舉屬性的 key。需要注意的是，它只會回傳物件自身的屬性，不會包含繼承自原型鏈的屬性，也不會包含 Symbol 類型的屬性。

const parent = {
  type: "Person",
};
const city = Symbol("city");

const child = Object.create(parent);
child.name = "Kevin";
child.age = 30;
child[city] = "Taipei";

const keys = Object.keys(child);

console.log(keys); // [ 'name', 'age']

for...in 迴圈​

for...in 迴圈是一種用來迭代物件屬性的方法，不僅會迭代物件自身的屬性，還會包含那些繼承自原型鏈的屬性。不過，和 Object.keys() 一樣，它也不會列舉 Symbol 類型的屬性。

const parent = {
  type: "Person",
};
const city = Symbol("city");

const child = Object.create(parent);
child.name = "Kevin";
child.age = 30;
child[city] = "Taipei";

for (const key in obj) {
  console.log(key); // name, age, type
}

Reflect.ownKeys()​

Reflect.ownKeys() 是一個功能更強大的方法，它會回傳一個包含物件所有屬性的陣列，這其中包括了可枚舉和不可枚舉屬性，也包括 Symbol 屬性。

const parent = {
  type: "Person",
};
const city = Symbol("city");

const child = Object.create(parent);
child.name = "Kevin";
child.age = 30;
child[city] = "Taipei";

const keys = Reflect.ownKeys(child);

console.log(keys); // [ 'name', 'age', Symbol(city) ]