我怎样才能显示一个JavaScript对象？
如何以string格式显示JavaScript对象的内容，就像我们alertvariables一样？
我想要显示一个对象的格式相同。
如果你想打印的对象出于debugging的目的，我build议，而不是安装Firefox的Firebug和使用代码：
console.log(obj)
使用本机JSON.stringify方法。 适用于嵌套对象，所有主stream浏览器都支持这种方法。
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 Reference和其他示例。
obj = JSON.parse(str); // Reverses above operation (Just in case if needed.)
编辑（17/02/2014）：如果遇到此Javascript错误，请使用自定义的JSON.stringifyreplace器
"Uncaught TypeError: Converting circular structure to JSON"
var output = ''; for (var property in object) { output += property + ': ' + object[property]+'; '; } alert(output);
那么，Firefox（感谢@Bojangles的详细信息）有Object.toSource()方法，打印对象为JSON和function(){} 。
我猜，这对于大多数debugging目的来说已经足够了。
console.dir(object) ：
显示指定JavaScript对象的属性的交互式列表。 此列表允许您使用公开三angular形来检查子对象的内容。
尝试这个 ：
console.log(JSON.stringify(obj))
这将打印对象的stringify版本。 所以，而不是[object]作为输出，你会得到的对象的内容。
如果你想使用alert，打印你的对象，你可以这样做：
alert("myObject is " + myObject.toSource());
它应该以string格式打印每个属性及其相应的值。
function：
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) );
例：
在NodeJS中，您可以使用util.inspect（obj）打印一个对象。 一定要说明深度，否则你只会有一个浅的对象的打印。 http://nodejs.org/api/util.html#util_util_inspect_object_options
如果您希望以表格forms查看数据，则可以使用
console.table(obj);
如果您单击表格列，表格可以被sorting。
您也可以select要显示的列：
console.table(obj, ['firstName', 'lastName']);
你可以在这里find更多关于console.table的信息
正如之前所说的，最简单的方式是我find了
var getPrintObject=function(object) { return JSON.stringify(object); }
用这个：
console.log('print object: ' + JSON.stringify(session));
我需要一个recursion的方式来打印对象，哪个pagewil的答案提供（谢谢！）。 我更新了一点，包括一个打印到一定水平的方法，并添加间距，以便根据我们所在的当前级别进行正确缩进，以使其更具可读性。
// Recursive print of object var print = function( o, maxLevel, level ) { if ( typeof level == "undefined" ) { level = 0; } if ( typeof level == "undefined" ) { maxLevel = 0; } var str = ''; // Remove this if you don't want the pre tag, but make sure to remove // the close pre tag on the bottom as well if ( level == 0 ) { str = '<pre>'; } var levelStr = ''; for ( var x = 0; x < level; x++ ) { levelStr += ' '; } if ( maxLevel != 0 && level >= maxLevel ) { str += levelStr + '...</br>'; return str; } for ( var p in o ) { if ( typeof o[p] == 'string' ) { str += levelStr + p + ': ' + o[p] + ' </br>'; } else { str += levelStr + p + ': { </br>' + print( o[p], maxLevel, level + 1 ) + levelStr + '}</br>'; } } // Remove this if you don't want the pre tag, but make sure to remove // the open pre tag on the top as well if ( level == 0 ) { str += '</pre>'; } return str; };
用法：
var pagewilsObject = { name: 'Wilson Page', contact: { email: 'wilson@hotmail.com', tel: '123456789' } } // Recursive of whole object $('body').append( print(pagewilsObject) ); // Recursive of myObject up to 1 level, will only show name // and that there is a contact object $('body').append( print(pagewilsObject, 1) );
如果您想打印其全长的对象，可以使用
console.log（require（'util'）。inspect（obj，{showHidden：false，depth：null}）
如果要通过将对象转换为string来打印对象
的console.log（JSON.stringify（OBJ））;
用颜色作为奖励来打印带有Node.js的完整对象：
console.dir(object, {depth: null, colors: true})
颜色当然是可选的，'深度：空'将打印完整的对象。
这些选项在浏览器中似乎不受支持。
参考文献：
https://developer.mozilla.org/en-US/docs/Web/API/Console/dir
https://nodejs.org/api/console.html#console_console_dir_obj_options
重新在这里的车轮！ 这些解决scheme都不适合我的情况。 所以，我很快find了pagewil的答案。 这不是打印到屏幕（通过控制台，或文本框或其他）。 但是，这是数据传输。 这个版本似乎返回与toSource()非常相似的结果。 我还没有尝试JSON.stringify ，但我认为这是相同的事情。 这个函数的结果是一个有效的Javascript对象声明。
我不会怀疑这样的事情是否已经在某个地方，但是只是花时间去寻找过去的答案而已。 而且，因为这个问题是我在谷歌的时候开始search的。 我想把它放在这里可能会帮助别人。
无论如何，这个函数的结果将是对象的string表示，即使对象已经embedded了对象和数组，即使这些对象或数组还有更多的embedded对象和数组。 （我听说你喜欢喝酒，所以，我用一个冷却器把你的汽车兜了一下，然后我把你的冷却器换成了一个冷却器，这样你的冷却器可以在你凉爽的时候喝下去。）
数组以[]而不是{}存储，因此不具有键/值对，只是值。 像常规数组一样。 因此，它们像数组一样被创build。
而且，所有的string（包括键名称）都被引用，除非这些string具有特殊字符（如空格或斜线），否则这是不必要的。 但是，我不想检测这只是删除一些否则将仍然正常工作的报价。
这个结果string然后可以与eval一起使用，或者只是将其转换为var直通string操作。 因此，从文本中重新创build对象。
function ObjToSource(o){ if (!o) return 'null'; var k="",na=typeof(o.length)=="undefined"?1:0,str=""; for(var p in o){ if (na) k = "'"+p+ "':"; if (typeof o[p] == "string") str += k + "'" + o[p]+"',"; else if (typeof o[p] == "object") str += k + ObjToSource(o[p])+","; else str += k + o[p] + ","; } if (na) return "{"+str.slice(0,-1)+"}"; else return "["+str.slice(0,-1)+"]"; }
让我知道，如果我搞砸了，在我的testing中工作正常。 此外，我能想到检测typesarray的唯一方法是检查length的存在。 因为JavaScript确实将数组存储为对象，所以我不能检查array的types（没有这种types！）。 如果其他人知道更好的方法，我很乐意听到它。 因为，如果你的对象也有一个名为length的属性，那么这个函数将被误认为是一个数组。
编辑：添加检查空值对象。 感谢Brock Adams
编辑：下面是能够打印无限recursion对象的固定function。 这和FF的toSource不一样，因为toSource会一次打印无限recursion，在那里，这个函数会立即杀死它。 这个函数的运行速度比较慢，所以我在这里添加它，而不是编辑上面的函数，因为它只有当你计划传递链接到自己的对象时才需要。
function ObjToSource(o){ if (!o) return 'null'; if (typeof(o) == "object") { if (!ObjToSource.check) ObjToSource.check = new Array(); for (var i=0, k=ObjToSource.check.length ; i<k ; ++i) { if (ObjToSource.check[i] == o) {return '{}';} } ObjToSource.check.push(o); } var k="",na=typeof(o.length)=="undefined"?1:0,str=""; for(var p in o){ if (na) k = "'"+p+ "':"; if (typeof o[p] == "string") str += k + "'" + o[p]+"',"; else if (typeof o[p] == "object") str += k + ObjToSource(o[p])+","; else str += k + o[p] + ","; } if (typeof(o) == "object") ObjToSource.check.pop(); if (na) return "{"+str.slice(0,-1)+"}"; else return "["+str.slice(0,-1)+"]"; }
testing：
var test1 = new Object(); test1.foo = 1; test1.bar = 2; var testobject = new Object(); testobject.run = 1; testobject.fast = null; testobject.loop = testobject; testobject.dup = test1; console.log(ObjToSource(testobject)); console.log(testobject.toSource());
结果：
{'run':1,'fast':null,'loop':{},'dup':{'foo':1,'bar':2}} ({run:1, fast:null, loop:{run:1, fast:null, loop:{}, dup:{foo:1, bar:2}}, dup:{foo:1, bar:2}})
注意：试图打印document.body是一个可怕的例子。 首先，FF在使用toSource时候会打印一个空的对象string。 而当使用上面的函数时，FF在SecurityError: The operation is insecure.崩溃SecurityError: The operation is insecure. 。 Chrome将在Uncaught RangeError: Maximum call stack size exceeded上崩溃Uncaught RangeError: Maximum call stack size exceeded 。 显然， document.body并不是要转换成string。 因为它要么太大，要么违反安全政策来访问某些属性。 除非我在这里搞砸了，否则告诉！
我总是使用console.log("object will be: ", obj, obj1) 。 这样我就不需要用JSON进行stringify了。 对象的所有属性都会很好地展开。
var list = function(object) { for(var key in object) { console.log(key); } }
object是你的对象
或者你可以在chrome开发工具中使用这个“console”标签：
console.log(object);
假设对象obj = {0:'John', 1:'Foo', 2:'Bar'}
打印对象的内容
for (var i in obj){ console.log(obj[i], i); }
控制台输出（Chrome DevTools）：
John 0 Foo 1 Bar 2
希望有所帮助！
Javascript函数
<script type="text/javascript"> function print_r(theObj){ if(theObj.constructor == Array || theObj.constructor == Object){ document.write("<ul>") for(var p in theObj){ if(theObj[p].constructor == Array || theObj[p].constructor == Object){ document.write("<li>["+p+"] => "+typeof(theObj)+"</li>"); document.write("<ul>") print_r(theObj[p]); document.write("</ul>") } else { document.write("<li>["+p+"] => "+theObj[p]+"</li>"); } } document.write("</ul>") } } </script>
打印对象
<script type="text/javascript"> print_r(JAVACRIPT_ARRAY_OR_OBJECT); </script>
通过print_r在JavaScript中
其中最好也最简单的方法是使用console.dir（）;
console.dir(yourObject);
我总是在我的项目中使用一个小辅助函数，通过控制台进行简单，快速的debugging。 来自Laravel的灵感。
/** * @param variable mixed The var to log to the console * @param varName string Optional, will appear as a label before the var */ function dd(variable, varName) { var varNameOutput; varName = varName || ''; varNameOutput = varName ? varName + ':' : ''; console.warn(varNameOutput, variable, ' (' + (typeof variable) + ')'); }
用法
dd(123.55); 输出：
var obj = {field1: 'xyz', field2: 2016}; dd(obj, 'My Cool Obj');
我用pagewil的打印方法，它非常好。
这里是我的稍微扩展版本（马虎）indents和不同的prop / ob分隔符：
var print = function(obj, delp, delo, ind){ delp = delp!=null ? delp : "\t"; // property delimeter delo = delo!=null ? delo : "\n"; // object delimeter ind = ind!=null ? ind : " "; // indent; ind+ind geometric addition not great for deep objects var str=''; for(var prop in obj){ if(typeof obj[prop] == 'string' || typeof obj[prop] == 'number'){ var q = typeof obj[prop] == 'string' ? "" : ""; // make this "'" to quote strings str += ind + prop + ': ' + q + obj[prop] + q + '; ' + delp; }else{ str += ind + prop + ': {'+ delp + print(obj[prop],delp,delo,ind+ind) + ind + '}' + delo; } } return str; };
pagewils代码的另一种修改…他不打印除string以外的任何内容，并将数字和布尔字段留空，我修正了由megaboss创build的函数内部的第二个types的错字。
var print = function( o, maxLevel, level ) { if ( typeof level == "undefined" ) { level = 0; } if ( typeof maxlevel == "undefined" ) { maxLevel = 0; } var str = ''; // Remove this if you don't want the pre tag, but make sure to remove // the close pre tag on the bottom as well if ( level == 0 ) { str = '<pre>'; // can also be <pre> } var levelStr = '<br>'; for ( var x = 0; x < level; x++ ) { levelStr += ' '; // all those spaces only work with <pre> } if ( maxLevel != 0 && level >= maxLevel ) { str += levelStr + '...<br>'; return str; } for ( var p in o ) { switch(typeof o[p]) { case 'string': case 'number': // .tostring() gets automatically applied case 'boolean': // ditto str += levelStr + p + ': ' + o[p] + ' <br>'; break; case 'object': // this is where we become recursive default: str += levelStr + p + ': [ <br>' + print( o[p], maxLevel, level + 1 ) + levelStr + ']</br>'; break; } } // Remove this if you don't want the pre tag, but make sure to remove // the open pre tag on the top as well if ( level == 0 ) { str += '</pre>'; // also can be </pre> } return str; };
可能你正在寻找这一个
console.dir（）
这是function。
function printObj(obj) { console.log((function traverse(tab, obj) { let str = ""; if(typeof obj !== 'object') { return obj + ','; } if(Array.isArray(obj)) { return '[' + obj.map(o=>JSON.stringify(o)).join(',') + ']' + ','; } str = str + '{\n'; for(var p in obj) { str = str + tab + ' ' + p + ' : ' + traverse(tab+' ', obj[p]) +'\n'; } str = str.slice(0,-2) + str.slice(-1); str = str + tab + '},'; return str; }('',obj).slice(0,-1)))};
它可以显示对象使用标签缩进与可读性。
如果你正在寻找可以返回任何JavaScript对象的美化string的东西，请查看https://github.com/fresheneesz/beautinator 。 一个例子：
var result = beautinator({ "font-size": "26px","font-family": "'Open Sans', sans-serif",color: "white", overflow: "hidden",padding: "4px 4px 4px 8px",Text: { display: "block", width: "100%","text-align": "center", "padding-left": "2px","word-break": "break-word"}}) console.log(result)
结果是：
{ "font-size": "26px", "font-family": "'Open Sans', sans-serif", color: "white", overflow: "hidden", padding: "4px 4px 4px 8px", Text: { display: "block", width: "100%", "text-align": "center", "padding-left": "2px", "word-break": "break-word" } }
它甚至可以在你的对象中有函数。
看来，一个简单for...in不能解决问题，特别是当我们要解决自定义，主机，原生或CSSOM对象。 此外，我们正在讨论debugging，谁知道什么时候，哪里需要它！
我的小型图书馆可以处理这样的对象：
obj2 |__ foo = 'bar' |__ loop2 = obj2 | : |__ another = obj1 |__ a1 = 1 |__ b1 = 'baz' |__ loop1 = obj1 | : |__ c1 = true |__ d1 = '' |__ e1 = [1,2,3]
并呈现出他们丰富多彩的身份，如：
- 0，foo，'bar'
- 0，loop2，'包含对索引为0的对象的循环引用'
- 0，另一个“对象”
- 1，a1，1
- 1，b1，'baz'
- 1，loop1，'包含对索引2处的对象的循环引用'
- 1，c1，'true'
- 1，d1，''
- 1，e1，[1,2,3]
但看到那里：
甚至一些预防措施document.body被parsing！
你可以使用我的function。
用一个数组或string或者一个对象来调用这个函数来提醒内容。
function
function print_r(printthis, returnoutput) { var output = ''; if($.isArray(printthis) || typeof(printthis) == 'object') { for(var i in printthis) { output += i + ' : ' + print_r(printthis[i], true) + '\n'; } }else { output += printthis; } if(returnoutput && returnoutput == true) { return output; }else { alert(output); } }
用法
var data = [1, 2, 3, 4]; print_r(data);
如果你只给对象在控制台上显示的所有信息：
console.log(jsonObject);
如果你想显示一条消息并在同一行显示对象的所有信息：
console.log("object is: %O", jsonObject);
更多的格式说明符
