Object.keys方法详解及使用教程

在JavaScript中，`Object.keys()`方法是一个实用工具，用于获取对象自身所有可枚举的字符串属性名，并以数组形式返回。该方法常用于遍历对象的键，它仅关注对象自身的属性，忽略原型链上的继承属性，且只返回可枚举的属性。与`for...in`循环相比，`Object.keys()`提供了一种更精确、可控的方式来访问对象属性，更符合现代JavaScript开发习惯。本文将深入探讨`Object.keys()`的使用方法、与其他相关方法的区别（如`Object.values()`、`Object.entries()`等），以及它在处理不同类型数据时的行为，帮助开发者更好地理解和运用这一重要方法。

Object.keys()方法用于获取对象自身所有可枚举的字符串属性名，并以数组形式返回。①它仅包含自有属性，忽略原型链属性；②只返回可枚举属性，不可枚举的不会被包含；③不包括Symbol类型的属性名；④处理非对象类型时，基本类型值会被包装成对象，null和undefined会抛出错误。与for...in循环不同，Object.keys()更精确、可控，适合现代开发习惯。其他相关方法如Object.values()获取属性值，Object.entries()获取键值对，Object.getOwnPropertyNames()包括不可枚举字符串属性，Object.getOwnPropertySymbols()获取Symbol属性，Reflect.ownKeys()则最全面，涵盖所有类型和可枚举性。

JavaScript的Object.keys方法，说白了，就是用来获取一个对象自身所有可枚举属性的键（或者说属性名）的一个工具。它会把这些键收集起来，然后以一个字符串数组的形式返回给你。简单来说，如果你想知道一个对象里到底有哪些“标签”，它就能帮你列出来。用起来也很直接，Object.keys(你的对象)就行了。

解决方案

Object.keys()的核心作用，就是帮你快速、准确地拿到一个对象“自己”拥有的那些可以被遍历的属性名。它不会去管那些从原型链上继承来的属性，也不会理会那些被标记为不可枚举的属性。这在很多场景下都非常有用，比如你需要遍历一个对象的所有自有属性，或者只是想看看一个数据结构里有哪些字段。

举个例子，假设你有一个用户信息对象：

const userInfo = {
  name: '张三',
  age: 30,
  city: '北京',
  occupation: '工程师'
};

const keys = Object.keys(userInfo);
console.log(keys); // 输出: ['name', 'age', 'city', 'occupation']

看到没？它返回的就是一个包含了所有属性名的数组。这玩意儿的便利性在于，你拿到这个数组后，就可以很方便地进行各种操作，比如用forEach遍历，或者用map转换。

需要注意的是，Object.keys()只会返回字符串类型的键。如果你对象的属性名是Symbol类型，它就不会被包含在内。而且，如果属性的enumerable特性被设置为false（也就是不可枚举），它也不会出现在结果中。这其实是设计上的一个考量，确保你拿到的都是那些“公开的”、“可访问的”属性。

Object.keys()与for...in循环有什么区别？

这个问题我经常遇到，也常常拿来跟同事讨论。初看起来，Object.keys()和for...in循环都能用来遍历对象的属性，但它们骨子里有着根本的区别，理解这一点对写出健壮的代码非常重要。

Object.keys()就像前面说的，它只关心对象“自己”直接拥有的、并且是可枚举的字符串属性。它给你一个干净利落的数组，你可以直接操作这个数组。这意味着，如果你有一个对象，它从原型链上继承了一些属性，Object.keys()会完全忽略它们。

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  console.log(`Hello, I'm ${this.name}`);
};

const john = new Person('John');
john.age = 25;

console.log(Object.keys(john)); // 输出: ['name', 'age']
// 注意：'greet' 并没有在结果中，因为它在原型链上

而for...in循环呢，它的行为就有点“贪婪”了。它会遍历对象自身以及其原型链上所有可枚举的属性。这意味着，如果你不小心，可能会遍历到一些你根本不关心的继承属性。

for (let prop in john) {
  console.log(prop);
}
// 输出:
// name
// age
// greet
// 看到没，'greet' 也被打印出来了

所以，在实际开发中，我个人更倾向于使用Object.keys()（或者Object.values()、Object.entries()），因为它提供了一种更可控、更明确的属性访问方式。如果你真的需要遍历包括继承属性在内的所有可枚举属性，并且能处理好潜在的副作用，for...in才是一个选择，但通常会配合hasOwnProperty()来过滤，确保只处理自有属性。我感觉，Object.keys()更符合现代JavaScript编程的习惯，它返回数组，后续操作起来也更方便。

Object.keys()能处理哪些类型的数据？

Object.keys()的设计初衷是处理对象，但它其实对一些非对象类型的数据也有“兼容性”处理，虽然结果可能不是你一开始就预期的。

对于普通对象，这当然是它的主场，无论是字面量对象、通过构造函数创建的对象，还是函数对象（函数也是对象），它都能正常工作，返回它们的自有可枚举属性键。

const func = () => {};
func.prop1 = 'value1';
console.log(Object.keys(func)); // 输出: ['prop1']

数组也是对象，所以Object.keys()处理数组时，会返回所有表示数组索引的字符串（因为数组索引本质上就是字符串属性名），以及其他自定义的可枚举属性。

const arr = ['a', 'b', 'c'];
arr.customProp = 'hello';
console.log(Object.keys(arr)); // 输出: ['0', '1', '2', 'customProp']

这挺有意思的，它把数组的索引也当作了字符串属性名。

那么对于基本数据类型呢？这就有点意思了。JavaScript会尝试将这些基本类型值“包装”成对应的对象。

• 字符串：会被包装成String对象，其索引会被视为属性名。

  console.log(Object.keys('hello')); // 输出: ['0', '1', '2', '3', '4']

  这和数组的处理方式很像，字符串的每个字符都有一个数字索引。

• 数字、布尔值：它们被包装成Number或Boolean对象后，通常不会有任何可枚举的自有属性，所以Object.keys()会返回一个空数组。

  console.log(Object.keys(123));     // 输出: []
  console.log(Object.keys(true));    // 输出: []

• null 和 undefined：这俩是特例，它们无法被转换为对象。所以，如果你尝试对它们调用Object.keys()，会直接抛出TypeError。这在我看来是合理的，毕竟它们连“对象”的边都沾不上，更别提有什么属性了。

  // console.log(Object.keys(null));      // TypeError: Cannot convert undefined or null to object
  // console.log(Object.keys(undefined)); // TypeError: Cannot convert undefined or null to object

所以，尽管Object.keys()看起来很通用，但在实际使用中，我们大部分时候还是把它用在真正的对象上，对基本类型进行操作时需要留意其行为，尤其是null和undefined会报错。

除了Object.keys()，还有哪些获取对象属性名的方法？

在JavaScript的世界里，获取对象属性名的方式远不止Object.keys()一种，这取决于你具体想获取哪一类属性。理解这些不同的方法，能让你在面对复杂对象结构时，有更灵活的工具箱。

• Object.values(): 如果说Object.keys()是获取属性名，那Object.values()就是它的孪生兄弟，用来获取对象自身所有可枚举属性的“值”。它同样返回一个数组，里面是对应属性的值。

  const data = { a: 1, b: 2, c: 3 };
  console.log(Object.values(data)); // 输出: [1, 2, 3]

  这在我处理只需要值而不需要键的场景下特别方便。

• Object.entries(): 这个方法就更全面了，它返回一个包含对象自身所有可枚举属性的[key, value]对的数组。每个元素都是一个包含键和值的数组。

  const data = { a: 1, b: 2, c: 3 };
  console.log(Object.entries(data)); // 输出: [['a', 1], ['b', 2], ['c', 3]]

  这个方法特别适合需要同时处理键和值的场景，比如使用for...of循环来遍历。

• Object.getOwnPropertyNames(): 这个方法和Object.keys()很像，但有一个关键区别：它不仅会返回对象自身可枚举的字符串属性名，还会包含那些不可枚举的字符串属性名。这在某些调试或需要深入了解对象内部结构的场景下很有用。

  const obj = {};
  Object.defineProperty(obj, 'hiddenProp', {
    value: 'secret',
    enumerable: false // 不可枚举
  });
  obj.visibleProp = 'hello';
  
  console.log(Object.keys(obj));             // 输出: ['visibleProp']
  console.log(Object.getOwnPropertyNames(obj)); // 输出: ['hiddenProp', 'visibleProp']

  这里就能看出两者的差异了。

• Object.getOwnPropertySymbols(): 如果你的对象使用了Symbol作为属性名（ES6引入的新特性），那么Object.keys()和Object.getOwnPropertyNames()都无法获取到它们。这时就需要Object.getOwnPropertySymbols()出马了。它专门用来获取对象自身所有Symbol属性的数组。

  const mySymbol = Symbol('id');
  const anotherSymbol = Symbol('name');
  const person = {
    age: 30
  };
  
  console.log(Object.keys(person));             // 输出: ['age']
  console.log(Object.getOwnPropertySymbols(person)); // 输出: [Symbol(id), Symbol(name)]

• Reflect.ownKeys(): 这是ES6引入的Reflect对象中的一个方法，它可能是最“全能”的一个。Reflect.ownKeys()会返回一个数组，包含对象自身所有的属性键，无论是字符串键还是Symbol键，也无论它们是否可枚举。它几乎是Object.getOwnPropertyNames()和Object.getOwnPropertySymbols()的结合体。

  const mySymbol = Symbol('id');
  const obj = {
    [mySymbol]: 'symbol value',
    visible: 'visible value'
  };
  Object.defineProperty(obj, 'hidden', {
    value: 'hidden value',
    enumerable: false
  });
  
  console.log(Reflect.ownKeys(obj)); // 输出: ['visible', 'hidden', Symbol(id)]

  在我看来，Reflect.ownKeys()在需要全面审查对象自身属性时非常强大，但日常开发中，Object.keys()、Object.values()、Object.entries()已经能满足大部分需求了。选择哪一个，完全取决于你想要获取哪些类型的属性，以及这些属性的可见性要求。

以上就是《Object.keys方法详解及使用教程》的详细内容，更多关于的资料请关注golang学习网公众号！