如何遍历普通 JavaScript 对象

技术背景

在 JavaScript 开发中，经常需要遍历对象的属性和值。不同的 ECMAScript 版本提供了多种遍历对象的方法，每种方法都有其特点和适用场景。掌握这些方法可以帮助开发者更高效地处理对象数据。

实现步骤

传统的 for...in 循环

使用 for...in 循环可以遍历对象的可枚举属性，包括对象自身的属性和继承的属性。为了避免遍历到原型链上的属性，可以使用 hasOwnProperty 方法进行过滤。

for (var key in validation_messages) {
    if (validation_messages.hasOwnProperty(key)) {
        var obj = validation_messages[key];
        for (var prop in obj) {
            if (obj.hasOwnProperty(prop)) {
                alert(prop + " = " + obj[prop]);
            }
        }
    }
}

ECMAScript 5：Object.keys() 和 Array.prototype.forEach()

Object.keys() 方法会返回一个由给定对象的所有可枚举属性组成的数组，然后可以使用 forEach() 方法遍历这个数组。

var obj = {
    first: "John",
    last: "Doe"
};
Object.keys(obj).forEach(function(key) {
    console.log(key, obj[key]);
});

ES6/2015：箭头函数和 Object.keys()

使用箭头函数可以使代码更简洁。

Object.keys(myObj).forEach(key => {
    console.log(key);        // the name of the current key.
    console.log(myObj[key]); // the value of the current key.
});

ES7/2016：Object.entries()

Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组，然后可以使用 forEach() 方法遍历这个数组。

Object.entries(myObj).forEach(([key, val]) => {
    console.log(key); // the name of the current key.
    console.log(val); // the value of the current key.
});

递归遍历嵌套对象

对于嵌套对象，可以使用递归函数进行遍历。

const loopNestedObj = obj => {
    Object.entries(obj).forEach(([key, val]) => {
        if (val && typeof val === "object") loopNestedObj(val); // recurse.
        else console.log(key, val); // or do something with key and val.
    });
};

核心代码

遍历单层对象

// ES6 方法
const obj = {name: 'John', age: 30};
Object.keys(obj).forEach(key => {
    console.log(key, obj[key]);
});

// ES7 方法
const obj2 = {name: 'Jane', age: 25};
Object.entries(obj2).forEach(([key, value]) => {
    console.log(key, value);
});

递归遍历嵌套对象

const nestedObj = {
    a: 1,
    b: {
        c: 2,
        d: {
            e: 3
        }
    }
};

const loopNestedObj = obj => {
    Object.entries(obj).forEach(([key, val]) => {
        if (val && typeof val === "object") loopNestedObj(val);
        else console.log(key, val);
    });
};

loopNestedObj(nestedObj);

最佳实践

• 选择合适的方法：根据不同的 ECMAScript 版本和具体需求选择合适的遍历方法。如果需要同时获取键和值，Object.entries() 是一个不错的选择；如果只需要键，Object.keys() 更合适。
• 避免遍历原型链属性：在使用 for...in 循环时，使用 hasOwnProperty 方法过滤掉原型链上的属性。
• 递归处理嵌套对象：对于嵌套对象，使用递归函数可以方便地遍历所有层级的属性。

常见问题

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

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

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

ES7 方法性能问题

在处理大型对象时，ES7 的 Object.entries() 方法可能会初始化较多的内部变量，性能不如传统方法。如果对性能有较高要求，可以考虑使用传统方法。