前言

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

  • for in
  • Object.keys
  • Object.getOwnPropertyNames
  • Object.getOwnPropertySymbols
  • Reflect.ownKeys

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

创建对象案例

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

/* 父类,继承自 Object.prototype */
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
  }
});
/* 子类,继承自 parent */
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...inhasOwnProperty 方法的组合。

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 类型)。