JavaScript对象属性遍历方法详解

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《JavaScript对象属性遍历方法全解析》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

JavaScript对象遍历属性主要用for...in循环配合hasOwnProperty()过滤继承属性；1. for...in结合hasOwnProperty()可遍历自身可枚举属性；2. Object.keys()返回自身可枚举属性数组，适合forEach遍历；3. Object.getOwnPropertyNames()返回所有自身属性（含不可枚举）；4. Reflect.ownKeys()返回所有自身属性，包括Symbol和不可枚举属性；需根据是否可枚举、是否继承、是否包含Symbol等需求选择方法，避免误遍历原型链属性。

直接告诉你：JavaScript 对象遍历所有属性，主要用 for...in 循环，配合 hasOwnProperty() 方法过滤掉继承来的属性。当然，Object.keys()、Object.getOwnPropertyNames() 也能派上用场，各有千秋。

解决方案：

用 for...in 循环遍历对象属性，并用 hasOwnProperty() 检查属性是否是对象自身的。

const myObject = {
  a: 1,
  b: 2,
  c: 3
};

for (let key in myObject) {
  if (myObject.hasOwnProperty(key)) {
    console.log(`属性: ${key}, 值: ${myObject[key]}`);
  }
}

Object.keys() 返回一个包含对象所有自身可枚举属性名称的数组，然后用 forEach 或者 for 循环遍历。

const keys = Object.keys(myObject);

keys.forEach(key => {
  console.log(`属性: ${key}, 值: ${myObject[key]}`);
});

Object.getOwnPropertyNames() 返回一个包含对象所有自身属性（包括不可枚举属性）名称的数组。这方法比较彻底，啥都能拿到。

const propertyNames = Object.getOwnPropertyNames(myObject);

propertyNames.forEach(propertyName => {
  console.log(`属性: ${propertyName}, 值: ${myObject[propertyName]}`);
});

Reflect.ownKeys()，它会返回一个数组，包含对象自身的所有属性，不管是不是可枚举的，也不管是不是 Symbol 类型的。

const allKeys = Reflect.ownKeys(myObject);

allKeys.forEach(key => {
  console.log(`属性: ${key}, 值: ${myObject[key]}`);
});

为什么要用 hasOwnProperty() 过滤继承属性？

JavaScript 里，对象是通过原型链继承属性的。不用 hasOwnProperty()，for...in 循环会把原型链上继承来的属性也给你遍历出来，这通常不是我们想要的。例如：

Object.prototype.inheritedProperty = function() {
  console.log("我是继承来的属性");
};

const myObject = {
  a: 1,
  b: 2
};

for (let key in myObject) {
  console.log(key); // 输出 a, b, inheritedProperty
}

for (let key in myObject) {
  if (myObject.hasOwnProperty(key)) {
    console.log(key); // 只输出 a, b
  }
}

所以，为了只关注对象自身的属性，hasOwnProperty() 是个好帮手。

Object.keys() 和 Object.getOwnPropertyNames() 有什么区别？

Object.keys() 只返回可枚举的自身属性，而 Object.getOwnPropertyNames() 返回所有自身属性，包括不可枚举的。啥叫可枚举？简单来说，就是能不能被 for...in 循环遍历出来。举个例子：

const myObject = {};

Object.defineProperty(myObject, 'a', {
  value: 1,
  enumerable: true // 可枚举
});

Object.defineProperty(myObject, 'b', {
  value: 2,
  enumerable: false // 不可枚举
});

console.log(Object.keys(myObject)); // 输出 ["a"]
console.log(Object.getOwnPropertyNames(myObject)); // 输出 ["a", "b"]

什么时候应该用哪种遍历方法？

• 只需要可枚举的自身属性： 用 for...in 循环 + hasOwnProperty() 或者 Object.keys()。
• 需要所有自身属性（包括不可枚举的）： 用 Object.getOwnPropertyNames() 或者 Reflect.ownKeys()。
• 需要考虑 Symbol 类型的属性： 只能用 Reflect.ownKeys()，因为它能拿到所有类型的属性。

实际开发中，根据具体需求选择合适的遍历方法，别一股脑全用 for...in，小心踩坑。

终于介绍完啦！小伙伴们，这篇关于《JavaScript对象属性遍历方法详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！