遍历对象属性的方法

技术背景

在 JavaScript 中，对象是属性的集合，经常需要遍历对象的属性。然而，对象的原型可能包含额外的属性，这些属性虽然在技术上属于对象，但可能不是我们想要遍历的自有属性，因此在遍历属性时需要额外的检查。

实现步骤

1. 使用 for...in 循环结合 hasOwnProperty 方法

for (var prop in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, prop)) {
        // 处理属性
    }
}

也可以直接通过对象调用 hasOwnProperty 方法，但如果对象有一个与 hasOwnProperty 同名的无关字段，这种方式会失败：

var obj = { foo: 42, hasOwnProperty: 'lol' };
obj.hasOwnProperty('foo');  // TypeError: hasOwnProperty is not a function

所以，通过 Object.prototype 调用更安全：

var obj = { foo: 42, hasOwnProperty: 'lol' };
Object.prototype.hasOwnProperty.call(obj, 'foo');  // true

2. 使用 Object.keys() 方法

Object.keys(obj).forEach(function(key, index) {
    // key: 对象属性名
    // index: 属性在对象中的序号
});

这种方法更易读，且兼容性较好，支持的浏览器有 Firefox 4、Chrome 5、Internet Explorer 9 等。

3. 使用 ECMAScript 2016 的箭头函数

Object.keys(obj).forEach(e => console.log(`key=${e}  value=${obj[e]}`));

4. 使用 Object.entries() 方法

for (const [key, value] of Object.entries(obj)) {
    // 处理属性和值
}
// 或者
Object.entries(obj).forEach(([key, value]) => {
    // 处理属性和值
});

如果只需要遍历值，可以使用 Object.values() 方法：

for (const value of Object.values(obj)) {
    // 处理值
}
// 或者
Object.values(obj).forEach(value => {
    // 处理值
});

5. 使用 Reflect.ownKeys() 方法

let obj = { a: 'Carrot', b: 'Potato', Car: { doors: 4 } };
Reflect.ownKeys(obj).forEach(key => console.log(key));

6. 自定义对象迭代器

var o = {a:1,b:2,c:3},
    a = [];
o[Symbol.iterator] = function*(){
    var ok = Object.keys(this),
        i = 0;
    while (i < ok.length) yield this[ok[i++]];
};
for (var value of o) console.log(value);
// 或者
a = [...o];
console.log(a);

7. 使用 Lodash

var obj = {a: 1, b: 2, c: 3};
_.keys(obj).forEach(function (key) {
    // 处理属性
});

核心代码

使用 Object.entries() 遍历对象属性和值

let obj = { name: 'John', age: 30 };
Object.entries(obj).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
});

使用 Object.values() 遍历对象值

let obj = { a: 1, b: 2, c: 3 };
Object.values(obj).forEach(value => {
    console.log(value);
});

最佳实践

• 如果需要兼容旧版本浏览器，建议使用 for...in 循环结合 hasOwnProperty 方法。
• 如果在现代 JavaScript 环境中，推荐使用 Object.entries() 或 Object.keys() 方法，它们更简洁易读。
• 对于只需要遍历值的场景，使用 Object.values() 方法。

常见问题

1. for...in 循环会遍历原型链上的属性

使用 hasOwnProperty 方法来过滤掉原型链上的属性。

2. Object.keys()、Object.entries() 和 Object.values() 的兼容性问题

这些方法在较旧的浏览器中可能不支持，需要检查兼容性或使用 polyfill。

3. 对象有与 hasOwnProperty 同名的属性

通过 Object.prototype.hasOwnProperty.call(obj, prop) 来避免错误。