JavaScript中对象的遍历

概要

当处理JavaScript中的对象时，经常需要遍历对象的属性以执行各种操作，比如查找特定的属性，对属性进行计算或者转换，或者简单地打印出对象的内容。而对象不像数组一样利用数组长度来作为循环条件进行遍历。在JavaScript中，有4种方法可以实现对象的遍历，每种方法都有其自己的优势和适用场景。其介绍如下文所示：

for...in 循环

for...in 循环是最传统和最常见的遍历对象属性的方法之一。它遍历对象的可枚举属性，包括对象自身的属性以及从原型链继承的属性。

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

for (const key in obj) {
    console.log(key, obj[key]);   //key为键，obj[key]为键所对应的值
}

优势：

• 简单易用。
• 可以遍历对象的所有可枚举属性，包括从原型链继承的属性。

注意事项：

• 遍历顺序不确定，取决于JavaScript引擎的实现。

Object.keys()

Object.keys() 方法返回一个包含对象自身可枚举属性的键名的数组。

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

Object.keys(obj).forEach(key => {
    console.log(key, obj[key]);    //key为键，obj[key]为键所对应的值
});

优势：

• 返回的是一个数组，可以使用数组的方法进行操作。
• 不会遍历原型链上的属性。

注意事项：

• 只能遍历对象自身的可枚举属性。

Object.values()

Object.values() 方法返回一个包含对象自身可枚举属性的值的数组。

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

Object.values(obj).forEach(value => {
    console.log(value);    //为键所对应的值
});

优势：

• 返回的是一个数组，可以使用数组的方法进行操作。
• 不会遍历原型链上的属性。

注意事项：

• 不会返回属性名，只返回属性值。
• 只能遍历对象自身的可枚举属性。

Object.entries()

Object.entries() 方法返回一个包含对象自身可枚举属性的键值对的数组。

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

Object.entries(obj).forEach(([key, value]) => {
    console.log(key, value);    //key为键，value为键所对应的值
});

优势：

• 返回的是一个包含键值对的数组，可以同时访问键名和键值。
• 不会遍历原型链上的属性。

注意事项：

• 遍历的顺序与 for...in 循环相同，即属性的添加顺序。
• 只能遍历对象自身的可枚举属性。

。

小结

选择使用哪种方法取决于具体的需求和情况。如果需要遍历对象的所有属性，包括从原型链继承的属性，可以使用 for...in 循环。如果只需遍历对象自身的属性，可以使用 Object.keys()、Object.values() 或 Object.entries() 方法，根据需要返回键名、键值或键值对的数组。