JavaScript 迭代对象键和值

在 JavaScript 中，我们经常需要迭代一个对象的键和值。JavaScript 提供了几种不同的方式来实现这个目标。本文将介绍几种最常用的方法，并提供代码示例。

方法一：for...in 循环

使用 for...in 循环可以迭代对象的所有可枚举属性（包括原型链上的属性）。以下是一个示例：

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

for (let key in obj) {
  console.log(`Key: ${key}, Value: ${obj[key]}`);
}

输出结果如下：

Key: a, Value: 1
Key: b, Value: 2
Key: c, Value: 3

注意：for...in 循环也会遍历对象的原型链上的属性。如果只想迭代对象自身的属性，可以使用 obj.hasOwnProperty(key) 进行判断。

方法二：Object.keys() 和 forEach() 方法

使用 Object.keys() 方法可以获取对象的所有键，并返回一个包含键的数组。然后，我们可以使用 forEach() 方法循环遍历这个数组，并根据键获取值。以下是一个示例：

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

Object.keys(obj).forEach(key => {
  console.log(`Key: ${key}, Value: ${obj[key]}`);
});

输出结果与方法一相同：

Key: a, Value: 1
Key: b, Value: 2
Key: c, Value: 3

方法三：Object.entries() 方法

使用 Object.entries() 方法可以直接获取对象的键值对数组（数组中每个元素是一个包含键和值的数组）。然后，我们可以使用 forEach() 方法进行迭代。以下是一个示例：

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

Object.entries(obj).forEach(([key, value]) => {
  console.log(`Key: ${key}, Value: ${value}`);
});

输出结果同样与前两种方法相同：

Key: a, Value: 1
Key: b, Value: 2
Key: c, Value: 3

注意：Object.entries() 方法是 ES8（ES2017）引入的，如果需要在旧版本的 JavaScript 中使用，请先进行兼容性检查或使用 polyfill。

总结

以上是三种常用的方法来迭代 JavaScript 对象的键和值。使用 for...in 循环可以迭代对象的所有可枚举属性，而 Object.keys() 和 Object.entries() 方法则提供了更简洁的方式来获取对象的键，并进行迭代处理。选择合适的方法取决于你的具体需求和 JavaScript 环境的兼容性要求。

希望本文对你理解和使用 JavaScript 迭代对象的键和值有所帮助！