循环遍历键值对 JavaScript

在 JavaScript 中，我们可以使用循环来遍历一个对象的键值对。这在处理对象数据时非常有用。

for...in 循环

我们可以使用 for...in 循环来遍历一个对象的键值对。for...in 循环会遍历对象的所有可枚举属性。例如：

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

for (const key in obj) {
  console.log(key, obj[key]);
}

这段代码会输出：

a 1
b 2
c 3

我们使用 const 关键字来声明一个变量 key，它会依次赋值为对象 obj 的每个可枚举属性。我们可以使用 obj[key] 来获取该属性的值。

需要注意的是，for...in 循环也会遍历对象原型链上的属性。因此，我们可能需要使用 hasOwnProperty 方法来判断一个属性是不是对象自身的属性。例如：

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

Object.setPrototypeOf(obj, protoObj);

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key, obj[key]);
  }
}

这段代码会输出：

a 1
b 2
c 3

我们使用 Object.setPrototypeOf 方法将 obj 的原型设置为 protoObj。接着，我们使用 hasOwnProperty 方法来判断 key 是否是 obj 自身的属性。

Object.entries 方法

ES2017 引入了一个新的方法 Object.entries，它可以把一个对象转换成一个键值对数组。这样，我们就可以使用 forEach、map、filter 等数组方法来操作对象了。例如：

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

Object.entries(obj).forEach(([key, value]) => {
  console.log(key, value);
});

这段代码会输出：

a 1
b 2
c 3

我们使用 Object.entries 方法将对象 obj 转换成了一个数组，每个元素都是一个键值对。接着，我们使用 forEach 方法来遍历该数组，传入一个回调函数，它会被依次调用，每次传入一个数组参数 [key, value]，我们可以使用数组解构来将其拆分为 key 和 value 两个变量。

Object.keys、Object.values 方法

在 ES2015 中，JavaScript 引入了 Object.keys 和 Object.values 方法，它们可以分别返回一个对象的键数组和值数组。这样，我们也可以使用 forEach、map、filter 等数组方法来操作对象了。例如：

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

Object.keys(obj).forEach((key) => {
  console.log(key, obj[key]);
});

Object.values(obj).forEach((value) => {
  console.log(value);
});

这段代码会输出：

a 1
b 2
c 3
1
2
3

我们使用 Object.keys 方法返回一个包含对象 obj 所有键的数组，接着使用 forEach 方法遍历该数组，每次传入一个参数 key。我们也可以使用 Object.values 方法返回一个包含对象 obj 所有值的数组。