详解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()可以帮助我们更好的理解和掌握对象。