JS 获取对象属性名的方法和区别

在 JavaScript 中想获取某一个对象的属性名，有多种方法可供选择。

• for in

• Object.keys

• Object.getOwnPropertyNames

• Object.getOwnPropertySymbols

• Reflect.ownKeys

在获取对象属性名的众多方法中，其实有各自的区别和用途，但经常容易被混淆，本篇文章会将这些方法的区别介绍清楚。

创建对象案例

下面来创建一个对象的案例让这些方法来获取属性，再通过结果来看区别。

const parent = Object.create(Object.prototype, {
  a: {
    value: 1,
    writable: true,
    enumerable: true,
    configurable: true
  },
  b: {
    value: 2,
    writable: true,
    enumerable: false,
    configurable: true
  },
  [Symbol('symbolParent')]: {
    value: 3,
    writable: true,
    enumerable: true,
    configurable: true
  }
});

const child = Object.create(parent, {
  c: {
    value: 4,
    writable: true,
    enumerable: true,
    configurable: true
  },
  d: {
    value: 5,
    writable: true,
    enumerable: false,
    configurable: true
  },
  [Symbol('symbolChild')]: {
    value: 6,
    writable: true,
    enumerable: true,
    configurable: true
  }
});

在上面我们创建了一个对象 parent，上面创建了两个普通属性 a（可枚举）、b（不可枚举）和一个键为 Symbol 类型的属性 symbolParent，创建了一个对象 child 继承自 parent，上面创建了两个普通属性 c（可枚举）、d（不可枚举）和一个键为 Symbol 类型的属性 symbolChild。

for...in

for (let k in child) {
  console.log(k);
}

// c
// a

从结果来看，for...in 先遍历并获取到了自身的部分属性名，又获取到了继承的部分属性名。

总结：for...in 可以遍历自身和继承的、可枚举的、非 Symbol 类型的属性。

Object.keys

Object.keys(child);

// ["c"]

从结果来看，Object.keys 返回了一个数组，里面存储获取的属性的键名，不能获取继承的属性名，只能获取自身的部分属性名，这种效果相当于 for...in 与 hasOwnProperty 方法的组合。

for (let k in child) {
  if (child.hasOwnProperty(k)) {
    console.log(k);
  }
}

// c

总结：Object.keys 只能遍历自身的、可枚举的、非 Symbol 类型的属性。

Object.getOwnPropertyNames

Object.getOwnPropertyNames(child);

// ["c", "d"]

从结果看，Object.getOwnPropertyNames 方法返回了一个数组，存储获取对象属性的键名。

总结：Object.getOwnPropertyNames 只能遍历自身的（包含不可枚举）、非 Symbol 类型的属性。

Object.getOwnPropertySymbols

Object.getOwnPropertySymbols(child);

// [Symbol(symbolChild)]

从结果看，Object.getOwnPropertySymbols 方法返回了一个数组，存储的都是 Symbol 类型的键，说明是专门用来处理 Symbol 类型的。

总结：Object.getOwnPropertySymbols 只能遍历自身 Symbol 类型的属性。

Reflect.ownKeys

Reflect.ownKeys(child);

// ["c", "d", Symbol(symbolChild)]

Reflect.ownKeys 的返回值为数组，存储遍历到的属性名。

总结：Reflect.ownKeys 可以遍历自身的所有属性（包含不可枚举和 Symbol 类型）。