如何展示 JavaScript 对象

技术背景

在 JavaScript 开发中，经常需要查看对象的内容，以便调试代码或了解数据结构。由于对象可能包含嵌套结构、循环引用等复杂情况，因此需要一些方法来有效地展示对象。

实现步骤

1. 使用 JSON.stringify 方法

JSON.stringify 是一个原生方法，适用于嵌套对象，并且大多数主流浏览器都支持。

const obj = { key: 'value', nested: { subKey: 'subValue' } };
// 简单转换
let str = JSON.stringify(obj);
console.log(str); 

// 美化输出
str = JSON.stringify(obj, null, 4); 
console.log(str); 

// 使用 alert 显示
alert(str); 

// 反向操作
const parsedObj = JSON.parse(str); 

2. 处理循环引用

如果遇到 Uncaught TypeError: Converting circular structure to JSON 错误，可以使用自定义的 JSON.stringify replacer。

function refReplacer() {
    let m = new Map(), v = new Map(), init = null;

    return function (field, value) {
        let p = m.get(this) + (Array.isArray(this) ? `[${field}]` : '.' + field);
        let isComplex = value === Object(value);

        if (isComplex) m.set(value, p);

        let pp = v.get(value) || '';
        let path = p.replace(/undefined\.\.?/, '');
        let val = pp ? `#REF:${pp[0] === '[' ? '$' : '$.'}${pp}` : value;

        !init ? (init = value) : (val === init ? val = "#REF:$" : 0);
        if (!pp && isComplex) v.set(value, path);

        return val;
    };
}

let a = { a1: 1, a2: 2 };
let b = { b1: 3, b2: "4" };
let obj = { o1: { o2: a }, b, a }; 
a.a3 = [1, 2, b]; 
b.b3 = a; 

let s = JSON.stringify(obj, refReplacer(), 4);
console.log(s);
alert(s);

3. 简单展示

仅展示对象的直接属性及其值，不包含对象内部的对象。

const object = { prop1: 'value1', prop2: 'value2' };
let output = '';
for (let property in object) {
    output += property + ': ' + object[property] + '; ';
}
console.log(output);

4. 分层展示

包含对象内部的对象，处理逻辑相对复杂，需要处理数组和 null 被识别为对象的情况。

const order = {
    Apple: 12,
    Banana: 4,
    Watermelon: 1,
    Orange: 8,
    Grape: { Muscat: 20 },
    Summary: [12, 4, 1, 8, 20],
    Pack: false,
    Null: null
};

function objectAsString(obj) {
    return Object.keys(obj)
      .map(property => {
            const value = obj[property];
            if (typeof value === 'object' && !Array.isArray(value) && value !== null) {
                return `${property}: {${objectAsString(value)}}`;
            } else {
                return `${property}: ${value}`;
            }
        })
      .join('; ');
}

console.log(objectAsString(order));

5. 使用 console 方法

• console.log：最常用的调试方法，可以直接输出对象。

const obj = { key: 'value' };
console.log(obj);

• console.dir：显示指定 JavaScript 对象的属性的交互式列表。

const obj = { key: 'value' };
console.dir(obj);

• console.table：以表格形式显示对象。

const obj = { name: 'Alireza', family: 'Dezfoolian', gender: 'male', netWorth: "$0" };
console.table(obj);

最佳实践

• 调试阶段：使用 console.log 或 console.dir 快速查看对象内容。
• 需要格式化输出：使用 JSON.stringify 并设置缩进参数。
• 处理循环引用：使用自定义的 replacer 函数。
• 展示大量数据：使用 console.table 以表格形式展示。

常见问题

1. JSON.stringify 无法处理循环引用

解决方法：使用自定义的 replacer 函数，如上述的 refReplacer。

2. console.log 输出 [object Object]

原因：使用 + 拼接对象时，对象会被转换为字符串。
解决方法：使用逗号分隔，或者使用 JSON.stringify。

const obj = { key: 'value' };
// 错误方式
console.log('My object: ' + obj); 
// 正确方式
console.log('My object: ', obj); 
console.log('My object: ' + JSON.stringify(obj)); 

3. console.table 在某些浏览器中不工作

这是因为 console.table 是一个非标准的特性，部分浏览器可能不支持。可以尝试使用其他方法展示对象。