如何显示 JavaScript 对象?

IT技术 javascript serialization javascript-objects
2021-01-13 03:55:16

我如何像alert变量一样以字符串格式显示 JavaScript 对象的内容

我想显示一个对象的格式相同。

6个回答

使用本机JSON.stringify方法。适用于嵌套对象,所有主要浏览器都支持此方法。

str = JSON.stringify(obj);
str = JSON.stringify(obj, null, 4); // (Optional) beautiful indented output.
console.log(str); // Logs output to dev tools console.
alert(str); // Displays output using window.alert()

链接到Mozilla API 参考和其他示例。

obj = JSON.parse(str); // Reverses above operation (Just in case if needed.)

如果遇到此 Javascript 错误,请使用自定义JSON.stringify 替换器

"Uncaught TypeError: Converting circular structure to JSON"
如果你和我一样是新手,别忘了console.logieconsole.log(JSON.stringify(obj,null, 4));
2021-03-10 03:55:16
要获得更易读的输出,请尝试 JSON.stringify(obj, null, 4)。这会将它写成整齐缩进的文本
2021-03-21 03:55:16
我遇到过它不起作用的情况:它显示{}为非空对象。因此,console.log(obj)strigify()返回时认为您的对象为空之前,请务必检查{}
2021-03-28 03:55:16
JSON.stringify 只能显示 javascript 值的一小部分,其余部分会抛出异常——console.log 没有这个问题。
2021-04-07 03:55:16
ob=window 时出现“未捕获的类型错误:将循环结构转换为 JSON”。
2021-04-07 03:55:16

如果要打印对象以进行调试,请使用以下代码:

var obj = {
  prop1: 'prop1Value',
  prop2: 'prop2Value',
  child: {
    childProp1: 'childProp1Value',
  },
}
console.log(obj)

将显示:

屏幕截图控制台镀铬

注意:您必须记录对象。例如,这行不通:

console.log('My object : ' + obj)

注意 ':您也可以在log方法中使用逗号,那么输出的第一行将是字符串,之后将呈现对象:

console.log('My object: ', obj);
@hughes 它实际上可以做到这两点。我有一个我创建的对象: var obj = { "foo" : false }; 另一个对象从服务器传递到回调中,通过回调打印的对象带有小箭头,以便您可以打开它,静态创建的对象只打印 [object Object] 没有箭头。我也在努力解决这个问题,还有其他想法吗?
2021-03-13 03:55:16
尝试console.log(JSON.stringify(obj))console.dir(obj)
2021-03-14 03:55:16
是的,它打印 [object Object] 但它旁边有一个可扩展的小按钮,可让您检查对象的内容。
2021-03-30 03:55:16
console.log("id:"+obj); 不会正确输出,因为它会输出您在那里看到的字符串,您需要像这样指定它: console.log("id:"); console.log(obj);
2021-04-04 03:55:16
当使用 JavaScript 控制台(Shift+Control+J 或 Shift+Control+I,取决于 Chrome 版本)时,该功能也适用于 Google Chrome。另请注意,这也console.log(obj1, obj2)非常有效,因此您不必console.log()在记录多个变量时调用每个对象。此外,请始终记住在生产中删除所有此类调用,因为它会破坏未实现它的浏览器(例如 Internet Explorer)。
2021-04-08 03:55:16
var output = '';
for (var property in object) {
  output += property + ': ' + object[property]+'; ';
}
alert(output);
这正是我想要的。我正在使用谷歌地图 v3 并且方向渲染器返回一个对象。它有四个项目,其中一个对象的名称不断变化,因此我们需要找到它。为此,这种方法确实有帮助。除此之外,我们还可以获取所有属性和对象的名称。或者有没有其他方法可以找到对象和属性的名称?
2021-03-16 03:55:16
发现这个有点晚了,但正如去年(8 月 29 日)在我生日那天要求的那样,这里有一个工作小提琴。 jsfiddle.net/MrMarlow/fq53o6o9
2021-03-24 03:55:16
大多数时候,您可能想用 hasOwnProperty 掩盖内置的 cruft。
2021-03-31 03:55:16
天哪 -- 0: [; 1: o; 2:乙;3:j;4:e;5:c;6:吨;7: ; 8:哦;9:乙;10:j;11:e;12:c;13:吨;14:];
2021-04-03 03:55:16
+1,并非所有 javascript 都在浏览器中运行或可以在浏览器中调试。
2021-04-06 03:55:16

console.dir(object)

显示指定 JavaScript 对象的属性的交互式列表。此列表允许您使用显示三角形来检查子对象的内容。

请注意,该console.dir()功能是非标准的。查看MDN 网络文档

的一个巨大优势console.dir是,在变量被垃圾收集后,您仍然可以在控制台中扩展和读取值。这在此处的一篇 SO 文章中有所描述
2021-03-18 03:55:16
另一个优点console.dir是,当您将控制台保存到文件时,所有属性都按预期在文件中。仅使用 console.log 时不会发生这种情况。
2021-04-02 03:55:16
是的,这是一个很好的解决方案,但是如果您只想记录对象(例如 console.dir(obj)),它只能按预期工作。如果你想将一个字符串连接到输出,它会给你 [object Object]。
2021-04-05 03:55:16

试试这个 :

console.log(JSON.stringify(obj))

这将打印对象的字符串化版本。因此,[object]您将获得 object 的内容,而不是作为输出。

@KaidenPrince 看到您的错误答案:stackoverflow.com/questions/4816099/... 它可能是您对象中的 DOM 元素。如果是这种情况,您最好尝试在 chrome 或 firefox 中登录到控制台并在那里进行检查。否则,您必须在调用 JSON.stringify 之前去除所有圆形元素才能使其工作。
2021-03-12 03:55:16
解决方案是简单地分成 2 个单独的命令,不管你信不信:console.log("id:"); 控制台日志(对象);
2021-03-23 03:55:16
JSON.stringify 不理解 Map
2021-03-31 03:55:16
typeerror: Converting circular structure to JSON?
2021-04-02 03:55:16