如何像alert
使用变量一样以字符串格式显示JavaScript对象的内容?
我想显示对象的格式相同。
console.log("", yourObject1, yourObject2, yourObject3, etc...);
。可以做一个简短的版本console.log(yourObject1, yourObject2, etc...);
。
console.log('a string', aNumber, anObject)
如何像alert
使用变量一样以字符串格式显示JavaScript对象的内容?
我想显示对象的格式相同。
console.log("", yourObject1, yourObject2, yourObject3, etc...);
。可以做一个简短的版本console.log(yourObject1, yourObject2, etc...);
。
console.log('a string', aNumber, anObject)
Answers:
如果要出于调试目的打印对象,请使用以下代码:
var obj = {prop1: 'prop1Value', prop2: 'prop2Value', child: {childProp1: 'childProp1Value'}}
console.log(obj)
将显示:
注意:您只能记录该对象。例如,这将不起作用:
console.log('My object : ' + obj)
注意':您也可以在log
方法中使用逗号,然后输出的第一行将是字符串,然后将呈现对象:
console.log('My object: ', obj);
console.log(obj1, obj2)
工作原理也非常好,因此console.log()
在记录多个变量时不必调用每个对象。此外,请始终记住删除生产中的所有此类调用,因为这会破坏未实现该调用的浏览器(例如Internet Explorer)。
console.log("id:"+obj);
不正确,因为它输出一个字符串如您所见,有输出,你需要这样指定它:console.log("id:"); console.log(obj);
console.log(JSON.stringify(obj))
或console.dir(obj)
使用本机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.log
即console.log(JSON.stringify(obj,null, 4));
{}
了一个非空对象。因此,一定console.log(obj)
要先进行检查,然后再考虑strigify()
返回对象为空{}
。
var output = '';
for (var property in object) {
output += property + ': ' + object[property]+'; ';
}
alert(output);
console.log(JSON.stringify(obj))
这将打印对象的字符串化版本。因此,[object]
您将获得对象的内容而不是作为输出。
typeerror: Converting circular structure to JSON
?
好的,Firefox(感谢@Bojangles提供详细信息)具有Object.toSource()
将对象打印为JSON和的方法function(){}
。
我想,对于大多数调试目的而言,这就足够了。
.toSource()
实际上仅是Firefox 。只是以为我会让你知道。
在NodeJS中,您可以使用来打印对象util.inspect(obj)
。请务必说明深度,否则您只会看到浅浅的物体。
功能:
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) );
例:
只需使用
JSON.stringify(obj)
例
var args_string = JSON.stringify(obj);
console.log(args_string);
要么
alert(args_string);
另外,javascript函数中的note会被视为对象。
另外要注意的是:
实际上,您可以像这样分配新属性并访问console.log或在警报中显示它
foo.moo = "stackoverflow";
console.log(foo.moo);
alert(foo.moo);
就像以前所说的,我发现的最好最简单的方法是
var getPrintObject=function(object)
{
return JSON.stringify(object);
}
navigator
。
要使用带有颜色作为奖励的Node.js打印完整对象,请执行以下操作:
console.dir(object, {depth: null, colors: true})
颜色当然是可选的,“ depth:null”将打印整个对象。
浏览器似乎不支持这些选项。
参考文献:
https://developer.mozilla.org/zh-CN/docs/Web/API/Console/dir
https://nodejs.org/api/console.html#console_console_dir_obj_options
注意:在这些示例中,yourObj定义了要检查的对象。
这是显示对象内容的实际方法
console.log(yourObj)
console.log(Object.keys(yourObj));
console.log(Object.values(yourObj));
Object.keys(yourObj).forEach(e => console.log(`key=${e} value=${yourObj[e]}`));
这将产生整洁的输出:
上一个答案中提到的解决方案:console.log(yourObj)
显示太多参数,并且不是显示所需数据的最人性化方式。这就是为什么我建议分别记录键和值的原因。
console.table(yourObj)
有人在较早的评论中建议过这个,但是它对我没有用。如果它确实适用于其他浏览器或其他工具上的其他人,则表示荣誉!病态的代码仍然放在这里供参考!将这样输出到控制台:
console.table(yourObj)
在Google Chrome版本77.0.3865.90(正式版)(64位)上为我工作。感谢分享!
(这已添加到我在GitHub上的库中)
在这里重新发明轮子!这些解决方案都不适合我的情况。因此,我很快就确定了wilsonpage的答案。这不是用于打印到屏幕上(通过控制台,文本字段或其他方式)。在这些情况下,它确实可以正常运行,并且可以按照OP的要求正常运行alert
。此处的许多答案未按alert
要求的OP 解决。无论如何,它是为数据传输而格式化的。此版本似乎返回与十分相似的结果toSource()
。我尚未针对进行测试JSON.stringify
,但我认为这是差不多的事情。这个版本更像是一个poly-fil,因此您可以在任何环境中使用它。该函数的结果是有效的Javascript对象声明。
我毫不怀疑这样的事情是否已经在某处出现了,但是比花一些时间搜索过去的答案要短得多。既然这个问题是我开始搜索时在Google上的热门话题;我想把它放在这里可能会帮助其他人。
无论如何,此函数的结果将是对象的字符串表示形式,即使您的对象具有嵌入式对象和数组,即使这些对象或数组具有甚至更多的嵌入式对象和数组也是如此。(我听说您喜欢喝酒吗?所以,我用一个凉爽的汽车拉皮箱。然后,我用一个凉爽的空调器拉皮箱。这样,您的凉爽的冰箱可以在凉爽的同时喝酒。)
数组使用[]
而不是存储,{}
因此没有键/值对,只有值。像常规数组一样。因此,它们像数组一样被创建。
另外,所有字符串(包括键名)都用引号引起来,除非这些字符串具有特殊字符(例如空格或斜杠),否则没有必要。但是,我不想检测到此问题只是为了删除一些本来可以正常工作的报价。
然后,可以将生成的字符串与字符串一起使用,eval
或者直接将其转储到var中。因此,根据文本重新创建对象。
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)+"]";
}
让我知道是否将其弄乱了,在测试中效果很好。另外,我想到的唯一检测类型的方法array
是检查是否存在length
。因为Javascript实际上将数组存储为对象,所以我实际上无法检查类型array
(没有这样的类型!)。如果其他人知道更好的方法,我很想听听。因为,如果您的对象还具有一个名为的属性,length
则此函数将错误地将其视为数组。
编辑:添加了对空值对象的检查。谢谢布罗克·亚当斯
编辑:下面是固定的功能,能够打印无限递归的对象。这toSource
与FF的打印效果不同,因为toSource
它将打印一次无限递归,而该函数将立即终止它。此函数的运行速度比上面的函数慢,因此我将其添加到此处而不是编辑上面的函数,因为只有在您计划将链接到自身的对象传递到某个地方时,才需要此函数。
const ObjToSource=(o)=> {
if (!o) return null;
let str="",na=0,k,p;
if (typeof(o) == "object") {
if (!ObjToSource.check) ObjToSource.check = new Array();
for (k=ObjToSource.check.length;na<k;na++) if (ObjToSource.check[na]==o) return '{}';
ObjToSource.check.push(o);
}
k="",na=typeof(o.length)=="undefined"?1:0;
for(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)+"]";
}
测试:
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
。并且当使用上述功能时,FF在上崩溃SecurityError: The operation is insecure.
。Chrome将会崩溃Uncaught RangeError: Maximum call stack size exceeded
。显然,document.body
这并不意味着要转换为字符串。因为它要么太大,要么违反安全策略来访问某些属性。除非,我在这里弄乱了,一定要告诉!
ObjToSource(document.body)
例如,尝试。
ObjToSource(document.body)
由于无限递归,您仍然做不到。即使document.body.toSource()
在FireFox中,也会返回一个空对象。
document.body
仍然无法打印。看注释。
document.body
只是指出一些大问题的捷径。您现在已经解决了最糟糕的情况,而我已经投票赞成。(尽管我确实相信可以使用其他方法document.body
。这里的大多数答案也不能很好地解决这个问题。)
如果您想打印其全长的对象,可以使用
console.log(require('util')。inspect(obj,{showHidden:false,depth:null})
如果要通过将对象转换为字符串来打印对象,则
console.log(JSON.stringify(obj));
JSON.stringify
当您尝试与字符串对象连接时,需要添加。如果使用console.log(object)
,它应该漂亮地打印对象的内容
我需要一种递归打印对象的方法,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) );
在控制台内显示对象的另一种方法是使用JSON.stringify
。查看以下示例:
var gandalf = {
"real name": "Gandalf",
"age (est)": 11000,
"race": "Maia",
"haveRetirementPlan": true,
"aliases": [
"Greyhame",
"Stormcrow",
"Mithrandir",
"Gandalf the Grey",
"Gandalf the White"
]
};
//to console log object, we cannot use console.log("Object gandalf: " + gandalf);
console.log("Object gandalf: ");
//this will show object gandalf ONLY in Google Chrome NOT in IE
console.log(gandalf);
//this will show object gandalf IN ALL BROWSERS!
console.log(JSON.stringify(gandalf));
//this will show object gandalf IN ALL BROWSERS! with beautiful indent
console.log(JSON.stringify(gandalf, null, 4));
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>
我经常在项目中使用的一个辅助功能,用于通过控制台进行简单,快速的调试。灵感来自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) + ')');
}
用法
var obj = {field1: 'xyz', field2: 2016};
dd(obj, 'My Cool Obj');
我使用了pagewil的打印方法,并且效果很好。
这是我的略微扩展版本,带有(草率的)缩进和不同的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代码的另一种修改...他除了字符串以外不打印其他任何内容,并将数字和布尔字段留空,我将第二个typeof的错字固定在megaboss创建的函数中。
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;
};
这是功能。
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)))};
它可以使用带有可读性的制表符缩进来显示对象。