Object.keys用于獲取對象自身可枚舉屬性名組成的數組。其基本用法是object.keys(obj),返回對象自身的可枚舉屬性數組,如遍歷對象屬性時可用object.keys(data).foreach處理每個鍵值對;判斷對象是否為空可通過object.keys(obj).Length === 0實現;還可提取對象鍵名用于進一步處理,如生成下拉菜單選項。但需注意:不可枚舉屬性、symbol屬性不會被列出,且非對象參數會拋出錯誤。
Object.keys 是 JavaScript 中一個非常實用的方法,用來獲取對象自身的、可枚舉的屬性名,返回一個數組。它常用于遍歷對象屬性、判斷對象是否為空等場景。
基本用法
Object.keys(obj) 接收一個對象作為參數,返回該對象所有可枚舉屬性組成的數組。例如:
const user = { name: 'Tom', age: 25, gender: 'male' }; console.log(Object.keys(user)); // 輸出 ["name", "age", "gender"]
注意:它只處理對象自身的屬性,不包括繼承來的屬性。
常見用途
1. 遍歷對象屬性
如果你需要對一個對象的所有鍵進行操作,比如打印每個鍵對應的值,可以這樣寫:
const data = { a: 1, b: 2, c: 3 }; Object.keys(data).foreach(key => { console.log(`${key}: ${data[key]}`); });
這種方式比 for…in 更可控,尤其在你想排除原型鏈上的屬性時。
2. 判斷對象是否為空
有時候你需要判斷一個對象是不是“空”的,也就是有沒有自己的屬性:
function isEmpty(obj) { return Object.keys(obj).length === 0; } console.log(isEmpty({})); // true console.log(isEmpty({ key: 'value' })); // false
這個方法簡單直接,適合很多實際場景。
3. 獲取對象的鍵列表做進一步處理
比如你想把對象的鍵轉換成下拉菜單選項:
const options = { red: '#FF0000', green: '#00FF00', blue: '#0000FF' }; const keys = Object.keys(options); // 可以傳給組件渲染下拉框,或者生成表單標簽等等
注意事項
-
不可枚舉屬性不會被包含
如果你用了 Object.defineProperty 設置某個屬性為不可枚舉,那它就不會出現在 Object.keys 的結果中。 -
Symbol 屬性不會被列出
如果你用 Symbol 作為鍵名,也不會出現在結果里,需要用 Object.getOwnPropertySymbols() 來獲取。 -
非對象參數會拋出錯誤(ES5 模式)
在嚴格模式下,傳入 NULL 或者原始類型(如數字、字符串)會報錯。建議使用前確保參數是對象。
總結一下
- Object.keys 返回的是對象自身可枚舉屬性的數組。
- 它在遍歷、判斷空對象、提取鍵名等場景非常有用。
- 使用時要注意 Symbol 鍵和不可枚舉屬性的問題。
基本上就這些,不復雜但挺常用。