詳解Object.keys

一、基本概念

Object.keys()是一個Javascript原生函數，用於返回被傳入對象的屬性名所組成的數組。即返回給定對象的所有可枚舉屬性的字符串數組，這些屬性的順序與手動遍歷該對象時的一致。

  
const obj = {a: 1, b: 2, c: 3};
console.log(Object.keys(obj)) // ["a", "b", "c"]
  

上述例子中，我們創建了一個名為obj的對象，該對象包含三個屬性 a，b和c，當我們使用Object.keys()來獲取該對象的屬性名時，它返回了一個由這三個屬性名組成的數組。

二、特性功能

1、結果順序穩定

Object.keys()返回的結果順序是由屬性名在對象中出現的順序所決定的，在代碼運行時，無論該對象的屬性名如何由不同的key-value對組成，在使用Object.keys()獲取屬性名時，它會按照屬性在對象中的定義順序返回它們。

  
const obj = {a: 1, c: 3, b: 2};
console.log(Object.keys(obj)) // ["a", "c", "b"]
  

上述例子中我們給obj對象中的屬性調整了順序a, c, b。但是，當我們調用Object.keys(obj)方法時，返回的數組中的屬性名順序與添加時相同。

2、對象繼承鏈中的鍵

Object.keys()只返回一個對象的自身（不包括從原型中繼承的）屬性組成的數組。

  
function Person(firstName) {
  this.firstName = firstName;
}

Person.prototype.sayHello = function() {
  console.log('Hello');
}

const jane = new Person('Jane');
jane.lastName = 'Doe';

console.log(Object.keys(jane)) // ["firstName", "lastName"]
  

上述例子中，我們定義了一個Person函數來創建一個新對象。當我們使用Object.keys()獲取John實例的屬性名時，它與手動列出John.key值的結果相同。無論它是否從Person.prototype繼承屬性。

3、多種數據類型的對象

Object.keys()可以用於JavaScript的內置對象，如數組以及字符串。在使用Object.keys()遍曆數組時，返回的是該數組所有的數組索引，而對於字符串，返回的是它所有的字符。

  
const arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)) // ["0", "1", "2"]

const str = '12345';
console.log(Object.keys(str)) // ["0", "1", "2", "3", "4"]
  

4、使用Object.create創建的對象

如果我們使用Object.create創建一個新的對象，該對象的屬性從第一個參數對象開始prototyping，返回由屬性名組成的數組仍然相同，即使它繼承了其他原型上的屬性。

  
const parentObj = {foo: "foo"};
const obj = Object.create(parentObj);
obj.bar = "bar";
console.log(Object.keys(obj)) // ["bar"]
  

三、結論

Object.keys()是JavaScript中的一個非常實用的函數，它可以讓我們快速的查看對象的屬性名，包括一些繼承來的屬性和自身屬性。在編寫JavaScript代碼時，Object.keys()可以幫助我們更好的理解和掌握對象。