ES7 中的 Object.getOwnPropertyNames() 方法的使用及例子

在前端开发中，我们经常需要处理对象的属性。ES7 中的 Object.getOwnPropertyNames() 方法是一个非常有用的工具，可以帮助我们获取一个对象的所有属性名，包括不可枚举属性。

语法

Object.getOwnPropertyNames(obj)

• obj：要获取属性名的对象。

返回值

一个包含 obj 所有自身属性（不包括继承属性）名称的数组。

示例

// javascriptcn.com 代码示例
const obj = {
  name: 'John',
  age: 28,
};

Object.defineProperty(obj, 'gender', {
  value: 'male',
  enumerable: false,
});

const propertyNames = Object.getOwnPropertyNames(obj);

console.log(propertyNames); // ['name', 'age', 'gender']

在上面的示例中，我们创建了一个包含 name、age 和 gender 属性的对象 obj。其中，gender 属性是不可枚举的，因为我们使用了 Object.defineProperty() 方法将其设置为不可枚举。

使用 Object.getOwnPropertyNames() 方法，我们可以获取 obj 所有属性的名称，包括不可枚举属性 gender。

应用场景

对象属性遍历

使用 for...in 循环可以遍历对象的所有可枚举属性，但无法遍历不可枚举属性。如果需要遍历所有属性，包括不可枚举属性，可以使用 Object.getOwnPropertyNames() 方法。

// javascriptcn.com 代码示例
const obj = {
  name: 'John',
  age: 28,
};

Object.defineProperty(obj, 'gender', {
  value: 'male',
  enumerable: false,
});

const propertyNames = Object.getOwnPropertyNames(obj);

for (let i = 0; i < propertyNames.length; i++) {
  const propertyName = propertyNames[i];
  console.log(`${propertyName}: ${obj[propertyName]}`);
}

在上面的示例中，我们通过循环遍历 propertyNames 数组，获取 obj 所有属性的名称，并输出属性名和属性值。

获取对象属性数量

使用 Object.getOwnPropertyNames() 方法，我们可以获取一个对象的属性数量。

// javascriptcn.com 代码示例
const obj = {
  name: 'John',
  age: 28,
};

Object.defineProperty(obj, 'gender', {
  value: 'male',
  enumerable: false,
});

const propertyNames = Object.getOwnPropertyNames(obj);

console.log(propertyNames.length); // 3

在上面的示例中，我们使用 propertyNames.length 获取 obj 属性数量。

注意事项

• Object.getOwnPropertyNames() 方法只返回对象自身的属性，不包括继承属性。
• Object.getOwnPropertyNames() 方法返回的属性名是一个数组，但不保证属性名的顺序和定义时的顺序相同。
• Object.getOwnPropertyNames() 方法不能获取 Symbol 类型的属性名，要获取 Symbol 类型的属性名，可以使用 Object.getOwnPropertySymbols() 方法。

总结

Object.getOwnPropertyNames() 方法是一个非常有用的工具，可以帮助我们获取一个对象的所有属性名，包括不可枚举属性。在对象属性遍历和获取对象属性数量方面有很好的应用场景。需要注意的是，Object.getOwnPropertyNames() 方法只返回对象自身的属性，不包括继承属性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6509ad2695b1f8cacd45166b