如何在 JavaScript 中獲取物件的 keys

在 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) ]