JS遍历对象属性与值的技巧

想要高效遍历JavaScript对象？本文深入解析JS遍历对象属性与值的各种方法，助你玩转数据处理。从常用的`Object.keys()`、`Object.values()`、`Object.entries()`结合`for...of`循环，到略显复杂的`for...in`循环及其陷阱，再到高级应用中处理不可枚举属性和Symbol属性的`Object.getOwnPropertyNames()`、`Object.getOwnPropertySymbols()`和`Reflect.ownKeys()`，本文由浅入深，详细讲解每种方法的适用场景、优缺点及最佳实践。掌握这些技巧，让你的代码更清晰、安全、高效，轻松应对各种JS对象遍历需求。无论你是前端新手还是资深开发者，都能从中获益。

JavaScript中遍历对象属性和值的主要方法有四种：1. 使用Object.keys()获取自身可枚举属性名数组，结合forEach或for...of遍历；2. 使用Object.values()获取自身可枚举属性值数组，适用于仅需处理值的场景；3. 使用Object.entries()获取键值对数组，可结合解构赋值同时处理键和值，是现代开发中最推荐的方式；4. for...in循环虽能遍历可枚举属性（含继承属性），但需配合hasOwnProperty()过滤以确保只处理自身属性，否则易引入意外行为。最佳实践是优先使用Object.keys/values/entries结合for...of或数组方法，因其代码清晰、安全且功能强大；当需访问不可枚举属性或Symbol属性时，应使用Object.getOwnPropertyNames()、Object.getOwnPropertySymbols()或Reflect.ownKeys()以实现更深层次的对象自省，这些方法能覆盖所有自有属性，满足高级应用场景需求。

在JavaScript中，遍历对象的属性和值主要有几种核心方式，它们各有侧重和适用场景：for...in 循环、Object.keys()、Object.values() 和 Object.entries()，以及结合 for...of 循环使用它们。选择哪种方式，取决于你需要获取的是属性名、属性值，还是两者兼顾，以及是否需要考虑继承属性或不可枚举属性。

解决方案

要遍历一个JavaScript对象的属性和值，最常见且推荐的方法是利用 Object 构造函数提供的静态方法来获取属性的集合，然后结合数组的迭代方法或 for...of 循环进行处理。

1. 使用 Object.keys() 获取属性名数组Object.keys(obj) 会返回一个由给定对象自身可枚举属性的键组成的数组。拿到这个数组后，你可以用 forEach、map 或 for...of 来遍历。

const myObject = {
  name: '张三',
  age: 30,
  city: '北京'
};

// 遍历属性名和对应的值
Object.keys(myObject).forEach(key => {
  console.log(`属性名: ${key}, 属性值: ${myObject[key]}`);
});

// 或者使用 for...of
for (const key of Object.keys(myObject)) {
  console.log(`属性名: ${key}, 属性值: ${myObject[key]}`);
}

2. 使用 Object.values() 获取属性值数组 如果你只关心对象的所有属性值，Object.values(obj) 会直接返回一个由给定对象自身可枚举属性的值组成的数组。

const myObject = {
  name: '李四',
  age: 25,
  occupation: '工程师'
};

Object.values(myObject).forEach(value => {
  console.log(`属性值: ${value}`);
});

// 或者使用 for...of
for (const value of Object.values(myObject)) {
  console.log(`属性值: ${value}`);
}

3. 使用 Object.entries() 获取键值对数组Object.entries(obj) 是一个非常方便的方法，它会返回一个包含 [key, value] 数组对的数组。这在需要同时处理键和值时特别有用，尤其结合数组解构赋值。

const myObject = {
  product: '手机',
  price: 5999,
  brand: 'XYZ'
};

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

// 或者使用 for...of
for (const [key, value] of Object.entries(myObject)) {
  console.log(`属性名: ${key}, 属性值: ${value}`);
}

for...in 真的那么“坏”吗？深入理解它的边界与陷阱

我常常看到有人一提到 for...in 就避之不及，好像它是某种性能毒瘤或者万恶之源。但讲真，这有点一概而论了。for...in 确实有一些“坑”，但并非一无是处，关键在于你是否理解它的工作原理和适用边界。

for...in 循环会遍历对象所有可枚举的属性，包括原型链上继承的属性。这正是它被诟病的主要原因。在很多情况下，我们只想遍历对象“自己”的属性，而不是它从原型链上继承来的。如果不加区分地使用 for...in，可能会导致一些意料之外的属性被遍历到，从而引发bug。

举个例子：

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

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

for (const key in john) {
  console.log(key);
}
// 输出可能包括: name, age, sayHello (甚至还有一些Object原型上的方法，取决于环境)

你看，sayHello 这个方法是 Person.prototype 上的，也被遍历出来了。在大多数业务场景里，这通常不是我们想要的。

为了避免这种问题，使用 for...in 时，我们几乎总是需要配合 hasOwnProperty() 方法来过滤掉继承的属性：

for (const key in john) {
  if (Object.prototype.hasOwnProperty.call(john, key)) { // 或者 john.hasOwnProperty(key)
    console.log(`自有属性: ${key}, 值: ${john[key]}`);
  }
}
// 输出: name, age

所以，for...in 并非完全“坏”，它在某些特定场景下，比如需要遍历原型链上的属性（虽然这种需求非常少见），或者在处理一些老旧代码时，依然有其存在的价值。但对于现代JavaScript开发，如果你只是想安全地遍历对象自身的属性，那么 Object.keys()、Object.values() 或 Object.entries() 结合 for...of 或数组方法，无疑是更清晰、更少坑的选择。它们默认就只处理对象自身的属性，省去了 hasOwnProperty 的判断，代码也更简洁。

现代JavaScript中，迭代对象属性的最佳实践是什么？

如果你问我日常开发中最常用哪种方式，那毫无疑问是 Object.keys()、Object.values() 或者 Object.entries() 搭配 for...of 或 forEach。这套组合拳，基本上能满足99%的对象属性遍历需求，而且代码可读性高，意图明确，也更符合现代JavaScript的编程范式。

为什么它们是最佳实践？

1. 明确性与安全性： Object.keys()、Object.values() 和 Object.entries() 都只返回对象自身的可枚举属性。这意味着你不需要担心意外遍历到原型链上的属性，也不用手动添加 hasOwnProperty 检查，大大降低了出错的概率。
2. 返回数组： 它们返回的是数组，这意味着你可以直接利用数组的所有强大方法，比如 map、filter、reduce 等，进行链式操作，这在处理数据时非常灵活和高效。
3. 与 for...of 的完美结合： for...of 是ES6引入的迭代语法，专为可迭代对象设计。而 Object.keys/values/entries 返回的正是数组，天然可迭代。这让遍历语法变得非常简洁和直观。

具体实践示例：

场景一：需要同时获取属性名和属性值 这绝对是 Object.entries() 的主场。

const userProfile = {
  id: 'u123',
  username: 'coder_cat',
  email: 'cat@example.com',
  isActive: true
};

// 最推荐的方式：使用 for...of 和解构赋值
for (const [key, value] of Object.entries(userProfile)) {
  console.log(`${key}: ${value}`);
}
// 输出：
// id: u123
// username: coder_cat
// email: cat@example.com
// isActive: true

// 或者使用 forEach
Object.entries(userProfile).forEach(([key, value]) => {
  if (typeof value === 'string') { // 举例：只处理字符串类型的属性
    console.log(`String property - ${key}: ${value}`);
  }
});

场景二：只需要处理属性值Object.values() 就很方便。

const scores = {
  math: 95,
  science: 88,
  history: 72
};

const totalScore = Object.values(scores).reduce((sum, score) => sum + score, 0);
console.log(`总分: ${totalScore}`); // 输出: 总分: 255

// 检查是否有不及格科目
const hasFailed = Object.values(scores).some(score => score < 60);
console.log(`是否有不及格科目: ${hasFailed}`);

场景三：只需要处理属性名Object.keys() 是首选。

const config = {
  theme: 'dark',
  language: 'en',
  notifications: true
};

// 列出所有配置项
console.log('可用配置项:', Object.keys(config).join(', '));

// 根据属性名动态访问属性
Object.keys(config).forEach(key => {
  if (key === 'language') {
    console.log(`当前语言设置为: ${config[key]}`);
  }
});

这几种方法提供了清晰、安全且功能强大的对象遍历机制，是现代JavaScript开发中处理对象属性和值的标准做法。

当属性是Symbol或不可枚举时，我们还能“看到”它们吗？

有时候，你会遇到一些“隐形”的属性，它们不像普通属性那样轻易被 for...in 或 Object.keys() 捕获到。我说的就是 Symbol 类型的属性和那些被特意设置为不可枚举的属性。默认的遍历方法，比如 Object.keys()、Object.values()、Object.entries()，以及 for...in，都只会处理可枚举的属性。那么，如果我们真的需要访问这些“隐藏”的属性，该怎么办呢？

JavaScript 提供了一些专门的API来应对这种情况：

1. Object.getOwnPropertyNames()：获取所有自有（包括不可枚举）的字符串属性名 这个方法会返回一个数组，包含对象自身所有字符串键的属性名，无论它们是否可枚举。

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

Object.defineProperty(objWithHidden, 'hiddenProp', {
  value: '我是一个隐藏属性',
  enumerable: false // 设置为不可枚举
});

console.log(Object.keys(objWithHidden));         // 输出: ['a', 'b']
console.log(Object.getOwnPropertyNames(objWithHidden)); // 输出: ['a', 'b', 'hiddenProp']

这个方法在需要对对象进行更深层次的内省，或者处理一些框架/库内部使用不可枚举属性的场景时非常有用。

2. Object.getOwnPropertySymbols()：获取所有自有 Symbol 属性Symbol 是ES6引入的一种新的原始数据类型，它创建的属性是唯一的，通常用于为对象添加非字符串键的属性，以避免命名冲突。这些 Symbol 属性默认是不可枚举的（即使你设置 enumerable: true，它们也不会被 Object.keys() 或 for...in 捕获）。Object.getOwnPropertySymbols() 就是用来获取这些 Symbol 属性的。

const ID = Symbol('id');
const STATUS = Symbol('status');

const user = {
  name: 'Alice',
  age: 30,
  [ID]: 'user_001',
  [STATUS]: 'active'
};

Object.defineProperty(user, 'secret', {
  value: 'shhh',
  enumerable: false
});

console.log(Object.keys(user));         // 输出: ['name', 'age']
console.log(Object.getOwnPropertyNames(user)); // 输出: ['name', 'age', 'secret']
console.log(Object.getOwnPropertySymbols(user)); // 输出: [Symbol(id), Symbol(status)]

当你需要遍历一个对象上的所有 Symbol 属性时，这个方法就派上用场了。比如，一些库可能会用 Symbol 来存储内部状态或元数据。

3. Reflect.ownKeys()：获取所有自有（包括不可枚举和Symbol）属性 这是最“全面”的方法。Reflect.ownKeys() 会返回一个数组，包含对象自身的所有属性名，无论是字符串键还是 Symbol 键，也无论它们是否可枚举。它结合了 Object.getOwnPropertyNames() 和 Object.getOwnPropertySymbols() 的功能。

const ID = Symbol('id');
const data = {
  key1: 'value1',
  [ID]: 'unique_id'
};

Object.defineProperty(data, 'nonEnum', {
  value: '不可枚举的值',
  enumerable: false
});

console.log(Reflect.ownKeys(data)); // 输出: ['key1', 'nonEnum', Symbol(id)]

Reflect.ownKeys() 在需要对一个对象进行彻底的自省时非常有用，比如在实现某些代理模式、元编程或者调试工具时。它能让你看到对象“所有”的自有属性，不漏掉任何一个。

总的来说，对于日常业务开发，Object.keys()、Object.values() 和 Object.entries() 已经足够。但如果你深入到框架、库的开发，或者需要处理一些特殊的元数据属性，那么 Object.getOwnPropertyNames()、Object.getOwnPropertySymbols() 和 Reflect.ownKeys() 这些方法，就是你探索对象深层结构的利器。它们让你能够“看透”对象，理解其内部的运作机制。

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