1. 介绍
在使用 JavaScript 编写程序时，尝试显示对象时可能会看到字符串 “[object Object]”。这是一种常见情况，发生在 JavaScript 对象直接输出而未进行格式化时。
本文将解释 “[object Object]” 实际意味着什么，以及如何以可读的方式正确显示对象的内容。
本指南面向初学者到中级开发者，包含实用示例和代码片段，帮助你更深入地理解该主题。
2. 什么是 ‘[object Object]’？
在 JavaScript 中，当你尝试将对象转换为字符串时，默认行为通常会产生 “[object Object]”。该输出仅表示值的类型信息，却没有显示对象的实际内容。
为什么会出现 ‘[object Object]’？
JavaScript 对象拥有默认的 toString() 方法。每当对象被当作字符串使用时，都会调用此方法。然而，根据 JavaScript 标准规范，对象在转换为字符串时默认返回以下格式。
console.log({}); // Output: [object Object]
这种行为仅显示 “object” 这一类型信息，并不包含对象内部键和值的任何细节。因此，开发者需要使用其他方法来正确检查和显示对象数据。
3. 为什么会出现 ‘[object Object]’
toString() 方法的作用
所有 JavaScript 对象都继承自 Object.prototype.toString() 方法。当对象被转换为字符串时，该方法会自动被调用。
要确认默认行为，请查看下面的代码：
const obj = { key: "value" };
console.log(obj.toString()); // Output: [object Object]
如你所见，toString() 默认会为普通对象返回 “[object Object]”。
隐式类型强制转换导致的示例
当对象与字符串进行拼接时，也会出现相同的行为。
const obj = { key: "value" };
console.log("Data: " + obj); // Output: Data: [object Object]
在此示例中，obj 被转换为字符串，内部调用了 toString()，导致输出为 “[object Object]”。 
4. 如何避免 ‘[object Object]’
4.1. 使用 JSON.stringify() 将对象转换为字符串
最简单、最常用的方法是使用 JSON.stringify() 将对象转换为 JSON 格式的字符串。
示例：基本的 JSON.stringify 用法
const obj = { key: "value", id: 123 };
console.log(JSON.stringify(obj)); // Output: {"key":"value","id":123}
在这段代码中，对象的键和值会以 JSON 格式准确显示。
美化输出（带缩进）
你还可以使用缩进输出格式化的 JSON，以提升可读性。
console.log(JSON.stringify(obj, null, 2));
输出：
{
"key": "value",
"id": 123
}
由于 JSON.stringify() 能够整洁地格式化复杂对象和嵌套结构，它在调试时极为有用。
4.2. 使用 console.dir() 详细检查对象
通过 console.dir()，可以在层级结构中检查对象的属性和方法。
示例：如何使用 console.dir
const obj = { key: "value", nested: { a: 1, b: 2 } };
console.dir(obj);
此输出以一种可以在 DevTools 中展开并检查对象结构的格式呈现。
console.dir 与 console.log 的区别：
console.log(obj)以单行样式显示对象，不适合检查复杂结构。console.dir(obj)保留层级结构，适用于嵌套对象和数组的检查。
4.3. 实现自定义的 toString() 方法
通过在对象上定义自己的 toString() 方法，可以自定义默认的 “[object Object]” 输出。
示例：自定义 toString 实现
const obj = {
key: "value",
id: 123,
toString() {
return `Key: ${this.key}, ID: ${this.id}`;
},
};
console.log(obj.toString()); // Output: Key: value, ID: 123
使用这种方法时，当对象被当作字符串处理，它将输出自定义格式而不是默认值。
4.4. 使用 for…in 循环打印对象内容
另一种选择是遍历对象的键和值并手动打印它们。
示例：使用 for…in 循环
const obj = { key: "value", id: 123 };
for (const key in obj) {
console.log(`${key}: ${obj[key]}`);
}
输出：
key: value
id: 123
这种方法简单且易于自定义，适合快速检查小型对象。
4.5. 使用 Object.entries() 或 Object.keys()
从 ES6 开始，JavaScript 提供了将键和值提取为数组的方法。
示例：使用 Object.entries
const obj = { key: "value", id: 123 };
console.log(Object.entries(obj));
输出：
[ [ 'key', 'value' ], [ 'id', 123 ] ]
通过将键值对获取为数组，你可以利用数组方法进行进一步处理。
5. 高级示例：显示复杂对象和数组
5.1. 显示嵌套对象
当对象包含其他对象时，让我们看看一种清晰显示内容的简便方法。
示例：显示嵌套对象
const data = {
user: {
name: "John",
age: 30,
address: {
city: "Tokyo",
country: "Japan",
},
},
hobbies: ["reading", "traveling"],
};
console.log(JSON.stringify(data, null, 2));
输出：
{
"user": {
"name": "John",
"age": 30,
"address": {
"city": "Tokyo",
"country": "Japan"
}
},
"hobbies": [
"reading",
"traveling"
]
}
如上所示，使用 JSON.stringify() 可以让嵌套对象的结构易于理解。
5.2. 显示包含数组的对象
如果对象包含数组，你可以以类似方式处理它。
示例：显示包含数组的对象
const order = {
id: 101,
items: [
{ name: "Apple", price: 150 },
{ name: "Banana", price: 100 },
{ name: "Cherry", price: 200 },
],
total: 450,
};
console.table(order.items);
输出：
| (index) | name | price |
|---|---|---|
| 0 | Apple | 150 |
| 1 | Banana | 100 |
| 2 | Cherry | 200 |
在此示例中，console.table() 以表格形式显示数组项。这使得可视化检查数据结构更为容易，并提升调试效率。
5.3. 处理具有循环引用的对象
在 JavaScript 中，如果对象包含循环引用，直接使用 JSON.stringify() 会抛出错误。
示例：循环引用错误
const objA = {};
const objB = { a: objA };
objA.b = objB;
console.log(JSON.stringify(objA)); // TypeError: Converting circular structure to JSON
在这种情况下，你可以通过使用第三方库或实现自定义函数来处理循环引用，从而解决问题。
解决方案示例：使用 flatted 库
const { stringify } = require("flatted");
console.log(stringify(objA));
此方法允许你安全地对包含循环引用的对象进行字符串化。
5.4. 仅获取对象或数组的键
在探索数据结构时，提取并仅显示键或值也很有用。
获取键列表：
const obj = { id: 101, name: "Alice", age: 25 };
console.log(Object.keys(obj)); // Output: [ 'id', 'name', 'age' ]
获取值列表：
console.log(Object.values(obj)); // Output: [ 101, 'Alice', 25 ]
获取键值对：
console.log(Object.entries(obj)); // Output: [ [ 'id', 101 ], [ 'name', 'Alice' ], [ 'age', 25 ] ]
这些方法有助于高效分析数据并提取特定信息。
6. 常见错误及修复
6.1. 循环引用错误：“Converting circular structure to JSON”
错误信息：
TypeError: Converting circular structure to JSON
原因：
当对象的属性再次引用同一个对象时，会形成循环结构，从而触发此错误。
示例：
const objA = {};
const objB = { parent: objA };
objA.child = objB;
console.log(JSON.stringify(objA)); // Error occurs
解决方案 1：使用自定义序列化函数
function safeStringify(obj) {
const seen = new WeakSet();
return JSON.stringify(obj, (key, value) => {
if (typeof value === "object" && value !== null) {
if (seen.has(value)) return "[Circular]";
seen.add(value);
}
return value;
});
}
console.log(safeStringify(objA));
// Output: {"child":{"parent":"[Circular]"}}
解决方案 2：使用第三方库
如果使用专门处理循环引用的库，例如 flatted，可以更轻松地避免此错误。
const { stringify } = require("flatted");
console.log(stringify(objA));
这种方式借助库的帮助，能够安全地处理复杂的循环结构。
6.2. 处理 undefined 或 null 时的错误
错误示例：
const obj = undefined;
console.log(obj.key); // TypeError: Cannot read properties of undefined
原因：
尝试在 undefined 或 null 上访问属性会导致错误。
解决方案：使用可选链（Optional Chaining）
const obj = undefined;
console.log(obj?.key); // Output: undefined (no error)
可选链 (?.) 即使对象不存在也能安全访问属性。
6.3. 未定义属性错误
错误示例：
const obj = {};
console.log(obj.value.toString()); // TypeError: Cannot read properties of undefined
原因：
当尝试访问不存在的属性时会出现此错误。
解决方案 1：设置默认值
console.log((obj.value || "default").toString()); // Output: default
解决方案 2：结合可选链和空值合并运算符（Nullish Coalescing）
console.log(obj.value?.toString() ?? "default"); // Output: default
这样可以使属性访问更安全，防止运行时错误。
6.4. 使用 Object.assign() 时的错误
错误示例：
const target = null;
Object.assign(target, { key: "value" }); // TypeError: Cannot convert undefined or null to object
原因：
Object.assign() 的第一个参数必须是对象，传入 null 或 undefined 会导致错误。
解决方案：
将空对象作为初始值传入。
const target = Object.assign({}, { key: "value" });
console.log(target); // Output: { key: "value" }
6.5. JSON.parse 错误：“Unexpected token”
错误示例：
const jsonString = "{key: 'value'}";
console.log(JSON.parse(jsonString)); // SyntaxError: Unexpected token k in JSON
原因：
JSON 语法严格。使用单引号或省略键名的引号会导致无效的 JSON。
解决方案：
将字符串修正为合法的 JSON 格式。
const jsonString = '{"key": "value"}';
console.log(JSON.parse(jsonString)); // Output: { key: 'value' }
7. 总结
本文介绍了 JavaScript 中常见的 “[object Object]” 显示问题，阐述了产生原因并提供了实用的解决方案。下面回顾关键要点并梳理所学内容。
7.1. “[object Object]” 实际含义
- JavaScript 对象默认通过
toString()方法转换为字符串。 - 因此，普通对象会以 “[object Object]” 的形式显示。
7.2. 正确展示对象内容的方法
我们提供了多种实用手段，以更清晰地检查和展示对象数据。
- 使用
JSON.stringify()将对象转换为可读的字符串：
- 以 JSON 格式显示对象，并支持美化输出（格式化）。
console.dir()用于层级对象检查：
- 让你在 DevTools 中直观地浏览对象的详细结构。
- 实现自定义
toString()方法：
- 允许你为对象定义自己的显示格式。
- 使用循环和
Object.entries()：
- 提取键和值并手动打印它们。
7.3. 高级用例与复杂对象处理
- 嵌套对象和数组：
JSON.stringify()和console.table()可帮助以整洁、易读的格式显示数据。 - 如何处理循环引用错误：
使用自定义函数或第三方库来避免失败。 - 高效的数据提取：
使用Object.keys()、Object.values()和Object.entries()高效获取信息。
7.4. 错误预防与调试技巧
我们还解释了与对象操作相关的常见错误及其解决办法。
- 循环引用错误：
- 使用 自定义序列化器 或库来处理。
- 访问未定义或 null 时的错误：
- 使用可选链（optional chaining）并设置默认值。
- JSON.parse 错误：
- 确保字符串是有效的 JSON 格式。
通过运用这些技术，你可以提前预防错误，使调试过程更加顺畅。
7.5. 最后思考
JavaScript 对象是灵活管理数据的强大工具。但如果不了解对象的行为，可能会遇到诸如 “[object Object]” 的显示问题或意外的运行时错误。
请使用本文介绍的技术和错误处理策略，编写更简洁、更安全、更高效的代码。
后续步骤：
- 为了加深对对象处理的理解，请查阅相关文章和官方文档。
- 编写并运行真实代码，以验证行为并提升技能。
以上就是我们对 JavaScript 对象显示问题的完整说明。感谢阅读！
