题 如何显示JavaScript对象?


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

我希望显示对象的格式相同的方式。


1259
2018-06-05 19:01


起源


你能改回一下你的问题吗? “格式化方式”是什么意思?如同使用丰富的格式,如粗体/斜体/等? - Sasha Chedygov
有没有办法通过使用一些控制台命令打印变量的值来显示变量的运行时值? - BlackPanther
@BlackPanther就这么做 console.log("", yourObject1, yourObject2, yourObject3, etc...);。更短的版本就是这么做 console.log(yourObject1, yourObject2, etc...);。 - tom_mai78101
您能否选择更准确反映社区共识的更好答案? - HoldOffHunger


答案:


用Firefox

如果要打印对象以进行调试,我建议改为安装 适用于Firefox的Firebug 并使用代码:

console.log(obj)

使用Chrome

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

会显示

screenshot console chrome

注意 : 你必须 只要 记录对象。例如,这不起作用:

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

752
2018-06-05 19:15



使用JavaScript控制台时,该功能也适用于Google Chrome(Shift + Control + J或Shift + Control + I,具体取决于Chrome版本)。另请注意 console.log(obj1, obj2) 工作也非常好,所以你不必打电话 console.log() 记录多个变量时的每个对象。此外,请始终记住在生产中删除所有此类调用,因为它会破坏不实现它的浏览器(例如Internet Explorer)。 - Felix
这不起作用打印[object Object] - Doug Molineux
是的它打印[object Object]但它旁边有一个expando-toggly按钮,可以让你检查对象的内容。 - hughes
@hughes它实际上可以做到这两点。我有一个我创建的对象:var obj = {“foo”:false};和另一个从服务器传递回调的对象,通过回调传递的对象用小箭头打印,这样你就可以打开它,静态创建的对象只打印没有箭头的[object Object]。我也试图解决这个问题,其他任何想法? - benstraw
console.log("id:"+obj);将无法正确输出,因为它会输出您在那里看到的字符串,您需要像这样指定它: console.log("id:"); console.log(obj); - Anriëtte Myburgh


使用原生 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.)

使用自定义 JSON.stringify替换器 如果你 遇到这个Javascript错误

"Uncaught TypeError: Converting circular structure to JSON"

1723
2017-11-27 17:52



要获得更易读的输出,请尝试JSON.stringify(obj,null,4)。这将把它写成整齐的缩进文本 - Ben Clayton
JSON.stringify只能显示一小部分javascript值,并会为其余部分抛出异常 - console.log没有此问题。 - Marc Lehmann
如果你是像我这样的新手,别忘了 console.log 即 console.log(JSON.stringify(obj,null, 4)); - nilesh
当ob = window时,“Uncaught TypeError:将循环结构转换为JSON”。 - Michael
>在Node.js中,您可以使用 util.inspect(对象)。它会自动用“[Circular]”替换循环链接。 -----信用: Erel Segal-Halevi 在那个JSON.stringify替换链接中 - DaveLak


var output = '';
for (var property in object) {
  output += property + ': ' + object[property]+'; ';
}
alert(output);

368
2018-06-05 19:18



我一直在寻找一种PHP风格 foreach() 谢谢! - David Yell
这正是我想要的。我正在使用谷歌地图v3,directionrenderer返回一个对象。这有四个项目,其中一个对象名称不断变化,所以我们需要找到它。为此,这种方法确实有帮助。除此之外,我们可以获取属性和对象的所有名称。或者有没有其他方法来找到对象和属性的名称? - Jayapal Chandran
+1,并非所有的javascript都在浏览器中运行或者可以在其中调试。 - Bill Yang
您可能希望在大多数情况下使用hasOwnProperty屏蔽内置的cruft。 - John
Omg - 0:[; 1:o; 2:b; 3:j; 4:e; 5:c; 6:t; 7:; 8:O; 9:b; 10:j; 11:e; 12:c; 13:t; 14:]; - JSideris


console.dir(object)

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

请注意 console.dir() 功能是非标准的。看到 MDN Web Docs


95
2018-06-03 12:43



这是最好的答案 - davidhq
我很惊讶很少有人接受这个答案。这是一个非常好的解决方案。 - CtheGood
这是最好的解决方案。 - Nevin Madhukar K


尝试这个 :

console.log(JSON.stringify(obj))

这将打印对象的stringify版本。而不是 [object] 作为输出,您将获得对象的内容。


65
2017-08-12 07:53



typeerror: Converting circular structure to JSON? - Kaiden Prince
@KaidenPrince看到你的错误答案: stackoverflow.com/questions/4816099/...  它可能是您对象中的DOM元素。如果是这种情况,你最好尝试在chrome或firefox中登录控制台并在那里进行检查。否则,您必须在调用JSON.stringify之前去除所有循环元素,以使其工作。 - Ace Hyzer
解决方案是简单地分成2个单独的命令,信不信由你:console.log(“id:”);的console.log(OBJ); - Collin Chaffin
为什么要downvote?,请解释downvote的原因。 - Abhishek Goel


好吧,Firefox(感谢@Bojangles获取详细信息) Object.toSource() 将对象打印为JSON和的方法 function(){}

我想这对于大多数调试来说已经足够了。


64
2018-06-05 19:04



Object.toSource()似乎不适用于Chrome,这是预期的吗?或者Chrome不属于“高级浏览器”? =) - tstyle
显然它没有:( - alamar
旧线程,刚刚通过Google找到它。 .toSource() 实际上是Firefox 只要。我想我会告诉你的。 - Bojangles
太糟糕了,我有Chrome,它不起作用 - Nulik


如果要使用警报,要打印对象,可以执行以下操作:

alert("myObject is " + myObject.toSource());

它应该以字符串格式打印每个属性及其对应的值。


51
2017-09-09 07:15



toSource()在非gecko浏览器中不起作用(例如Chrome,Safari) - Yarin
然而,这适用于Firefox(Gecko)浏览器COOL !!!! - Vinothkumar Arputharaj


功能:

var print = function(o){
    var str='';

    for(var p in o){
        if(typeof o[p] == 'string'){
            str+= p + ': ' + o[p]+'; </br>';
        }else{
            str+= p + ': { </br>' + print(o[p]) + '}';
        }
    }

    return str;
}

用法:

var myObject = {
    name: 'Wilson Page',
    contact: {
        email: 'wilson@hotmail.com',
        tel: '123456789'
    }  
}

$('body').append( print(myObject) );

例:

http://jsfiddle.net/WilsonPage/6eqMn/


31
2017-11-16 14:37



打印方法调用浏览器将页面打印到pdf:p - Marwen Trabelsi
似乎不适用于整数 - jsh
@jsh你应该转动if-else并检查对象而不是字符串。更新小提琴: jsfiddle.net/6eqMn/594 - Michael Walter
@wilsonpage如果我将整数值添加到tel属性,这是失败的:( - ni3


在NodeJS中,您可以使用打印对象 util.inspect(obj)。请务必说明深度,否则您只能打印浅物体。


31
2017-07-15 06:35