JavaScript：for-in循环遍历对象时嵌套对象与函数无法显示问题

你当前的问题在于直接输出obj[key]时，不同类型的值会被浏览器默认转换为字符串：

• 嵌套对象会被转成[object Object]，无法看到内部属性；
• 函数会输出完整的源码字符串，格式不够直观；

要解决这个问题，只需要在遍历的时候判断值的类型，针对性处理：

修改后的代码示例 #

var obj = {
    fname: 'abc',
    lname: 'xyz',
    date: 4,
    year: 2022,
    nestedObj: {
        hobbies: 'nothing'
    },
    fun: function () {
        return 0;
    },
    fullname: function () {
        return this.fname + ' ' + this.lname;
    }
};

for (var key in obj) {
    var value = obj[key];
    let displayContent;

    // 处理函数：可选显示源码或执行结果
    if (typeof value === 'function') {
        // 方案1：显示函数源码
        displayContent = `[函数: ${key}] → ${value.toString()}`;
        // 方案2：显示函数执行后的返回值（注意绑定this上下文）
        // displayContent = `[函数: ${key}] → 返回值：${value.call(obj)}`;
    }
    // 处理嵌套对象：转成JSON字符串或递归遍历内部属性
    else if (typeof value === 'object' && value !== null) {
        // 方案1：转成JSON字符串
        displayContent = `[对象: ${key}] → ${JSON.stringify(value)}`;
        // 方案2：递归遍历并格式化显示内部属性
        // displayContent = `[对象: ${key}] → ${formatNestedObj(value)}`;
    }
    // 普通类型（字符串、数字）直接显示
    else {
        displayContent = value;
    }

    // 同时输出键名和处理后的值，更清晰
    document.write(`${key}: ${displayContent}<br>`);
}

// 可选：递归格式化嵌套对象的辅助函数
function formatNestedObj(nestedObj) {
    const props = [];
    for (let k in nestedObj) {
        props.push(`${k}: ${nestedObj[k]}`);
    }
    return `{ ${props.join(', ')} }`;
}

关键说明 #

1. 函数处理：如果想看到函数的执行结果，必须用call(obj)绑定this（否则像fullname里的this会指向全局，无法正确获取fname和lname）；
2. 嵌套对象处理：JSON.stringify能快速把对象转成可读的字符串，递归遍历则能更灵活地格式化内部属性；
3. 添加键名输出：原来的代码只显示值，补充键名后能明确每个值对应的属性，可读性更强。

内容的提问来源于stack exchange，提问作者biLaL AhmaD