JS输出对象显示[object Object]怎么办？JSON.stringify格式化打印技巧

一、为什么输出对象会变成 [object Object]？

很多初学者在打印调试信息或拼接提示语时，习惯使用 + 运算符将文本和对象连在一起。在 JavaScript 的语法规则中，当 + 的两边有一侧为字符串时，引擎会尝试将另一侧的操作数也转换为原始字符串类型。

const user = { id: 1001, name: "张三", role: "admin" };

// 常见错误 1：字符串加号拼接
console.log("用户信息：" + user); 
// 输出：用户信息：[object Object]

// 常见错误 2：模板字符串插值
console.log(`当前用户详情: ${user}`);
// 输出：当前用户详情: [object Object]

// 常见错误 3：DOM 内容赋值或页面弹窗
alert(user); // 弹出：[object Object]

对于普通 JavaScript 对象，默认的原型链方法是 Object.prototype.toString()。该方法并不会去遍历对象的键名和键值，而是返回该实体的内置类型标签，格式固定为 [object 内部类型名称]。因为 user 是一个常规对象，内部类型名称为 Object，所以转换结果永远是固定不变的 [object Object]，导致内部的所有键值信息被完全屏蔽。

二、四步排查与即时解决流程

遇到该表现时，可以按照以下四个步骤快速定位场景并采取对应的处理手段：

步骤 1：排查是否触发了字符串上下文转换

检查代码中是否存在 "文本" + obj、`${obj}`，或者将对象直接传入需要字符串的 API（如 element.innerHTML = obj、alert(obj)）。只要存在这些语法，对象就会自动丢失明细并退化为类型标签。

步骤 2：控制台调试场景改用多参数或 console.dir

如果当前目的仅是在浏览器 DevTools 或 Node.js 终端中查看数据，不要用加号连接文本与对象，改用 console.log 的多参数特性，用逗号进行分割：

// 推荐做法：通过逗号分开传参
console.log("用户信息：", user);
// 控制台能够保留对象引用，点击小三角可以自由展开折叠每一层字段

// 针对深层嵌套原型或 DOM 节点，可以使用 dir 展开其所有属性
console.dir(user, { depth: null });

// 针对对象数组，可以使用表格形式直观排版
console.table([
  { id: 1, name: "Alice", role: "Dev" },
  { id: 2, name: "Bob", role: "Tester" }
]);

步骤 3：纯文本与落盘场景使用 JSON.stringify 格式化

当需要将对象写进日志文件、发送到警报渠道、或者渲染在页面的 <pre> 容器中时，必须显式序列化为结构化文本：

// 传入 2 个空格缩进排版
const formattedText = JSON.stringify(user, null, 2);
console.log("格式化内容：\n" + formattedText);

步骤 4：处理特殊数据类型与异常

当对象结构复杂，包含循环引用（Circular Reference）、BigInt 大整数，或者需要过滤密码等敏感字段时，需进一步配置 JSON.stringify 的第二个参数（replacer）。

三、核心解析：JSON.stringify 的完整三参数语法

很多开发者只熟悉 JSON.stringify(obj) 的单参数调用方式，这样输出的字符串全部压缩在同一行中，不易阅读。实际上该方法支持三个参数，完整函数签名如下：

JSON.stringify(value, replacer, space)

1. value（待序列化对象）

需要被转换的目标数据，支持普通对象、数组、数值、布尔值及字符串等。若对象内部实现了 toJSON() 方法（例如原生 Date 实例），序列化时会优先执行该方法并对其返回值进行处理。

2. replacer（过滤器与属性转换器）

控制哪些属性被包含以及如何转换属性值。它可以是以下三种形式：

• null 或省略：保留对象所有符合 JSON 规范的键值对。
• 数组（白名单）：只有包含在该数组中的键名才会被输出到最终结果中。
• 函数（映射转换）：签名形式为 (key, value) => transformedValue，在序列化每一个键值对时触发，能够动态修改值或返回 undefined 剔除该属性。

3. space（缩进排版占位符）

用于美化输出排版，控制层级缩进与换行：

• 传入正整数（常用 2 或 4）：代表每一级嵌套缩进对应数量的空格。最大值为 10，超过 10 会自动限制为 10。
• 传入字符串（如 " "）：使用指定字符串作为缩进标记。例如制表符。
• 传入 0 或省略：输出紧凑的单行文本，适合网络报文传输，不适宜阅读。

四、JSON.stringify 实战进阶打印技巧

技巧 1：数组白名单快速提取关键字段

当对象属性非常繁杂（例如从接口获取的巨大配置实体），而我们只需要排查其中两三个核心属性时，无需手动解构，直接将所需键名作为数组传入第二个参数：

const apiResponse = {
  code: 200,
  message: "success",
  requestId: "req-99214710",
  timestamp: 1718002931000,
  data: {
    userId: "u-8891",
    token: "eyJhbGciOiJIUzI1Ni...",
    permissions: ["read", "write", "upload"]
  }
};

// 仅打印 code、message 和 data 字段，使用 2 空格缩进
const summary = JSON.stringify(apiResponse, ["code", "message", "data", "userId"], 2);
console.log(summary);

技巧 2：函数转换器动态过滤敏感数据与补充转换

当需要打印用户实体但不能泄露 password、token 等隐私字段时，或者需要将某些枚举数字翻译为可读文本时，可以使用 replacer 函数：

const account = {
  username: "admin_dev",
  passwordHash: "$2a$12$e8Y9zJ8a7...",
  secretKey: "k-secret-9988",
  status: 1
};

const safeLog = JSON.stringify(account, (key, value) => {
  // 过滤掉密码与密钥
  if (key === "passwordHash" || key === "secretKey") {
    return undefined; // 返回 undefined 会让 JSON.stringify 忽略该属性
  }
  // 转换状态编码
  if (key === "status") {
    return value === 1 ? "ACTIVE (正常)" : "SUSPENDED (停用)";
  }
  return value;
}, 2);

console.log(safeLog);
/* 输出示例：
{
  "username": "admin_dev",
  "status": "ACTIVE (正常)"
}
*/

五、边界情况与异常处理：循环引用与特殊类型

在实际生产环境中，盲目使用 JSON.stringify 会在遇到某些 JavaScript 特殊结构时抛出错误或静默丢失数据。下表系统列出了这些特殊场景的表现与应对方案：

1. 循环引用导致 TypeError 崩溃

当对象的属性直接或间接指向对象自身时（例如 DOM 节点、双向链表、React 虚拟 DOM 节点），JSON.stringify 会陷入递归死循环并直接抛出 TypeError: Converting circular structure to JSON。

针对这种情况，可以编写一个基于 WeakSet 的通用安全序列化函数：

function getSafeStringify() {
  const seen = new WeakSet();
  return function (key, value) {
    if (typeof value === "object" && value !== null) {
      if (seen.has(value)) {
        return "[Circular (循环引用)]"; // 检测到重复对象，返回标识占位
      }
      seen.add(value);
    }
    // 兼容 BigInt 无法序列化的问题
    if (typeof value === "bigint") {
      return value.toString() + "n";
    }
    return value;
  };
}

// 测试循环引用
const nodeA = { name: "Node A" };
const nodeB = { name: "Node B" };
nodeA.sibling = nodeB;
nodeB.sibling = nodeA; // 构造相互引用

// 安全打印，避免报错
console.log(JSON.stringify(nodeA, getSafeStringify(), 2));

2. BigInt 序列化抛错

JavaScript 原生 JSON.stringify 规范中不支持 BigInt（例如 1234567890123456789n），一旦遇到会直接报错 TypeError: Do not know how to serialize a BigInt。在 replacer 中拦截并转换为字符串（如 value.toString()）即可平稳解决。

3. undefined、函数与 Symbol 属性静默丢失

在普通对象中，值为 undefined、函数或 Symbol 的属性在序列化过程中会被直接忽略跳过；如果它们存在于数组中，则会被统一替换为 null。如果需要保留函数名或明确查看未定义状态，可以在 replacer 中将它们转换为可读字符串（如 "[Function: " + value.name + "]"）。

六、打印方案选择与总结

解决 [object Object] 并不是只有 JSON.stringify 一种方式，不同工作环节应根据场景选用最合适的输出手段：