如何显示JavaScript对象？

Question

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

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

Answer 1

使用本机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"

Answer 2

使用Firefox

如果您想打印对象以进行调试,我建议您安装Firebug for Firefox并使用以下代码:

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

使用Chrome

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

会显示

注意:您只能记录该对象.例如,这不起作用:

console.log('My object: ', obj);

Answer 3

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

Answer 4

console.dir(object):

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

请注意,该console.dir()功能是非标准的.请参阅MDN Web Docs

Answer 5

试试这个 :

console.log(JSON.stringify(obj))

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

Answer 6

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

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

Answer 7

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

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

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

Answer 8

如果您希望以表格格式查看数据,则可以使用

console.table(obj);

如果单击表列,则可以对表进行排序.

您还可以选择要显示的列:

console.table(obj, ['firstName', 'lastName']);

您可以在此处找到有关console.table的更多信息

Answer 9

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

Answer 10

功能:

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/

Answer 11

正如之前所说的最好,最简单的方式我找到了

var getPrintObject=function(object)
{
    return JSON.stringify(object);
}

Answer 12

使用带有颜色作为奖励的Node.js打印完整对象:

console.dir(object, {depth: null, colors: true})

颜色当然是可选的,'depth:null'将打印完整的对象.

浏览器似乎不支持这些选项.

参考文献:

https://developer.mozilla.org/en-US/docs/Web/API/Console/dir

https://nodejs.org/api/console.html#console_console_dir_obj_options

Answer 13

用这个:

console.log('print object: ' + JSON.stringify(session));

Answer 14

如果你想打印它的全长物体,可以使用

console.log(require('util').inspect(obj,{showHidden:false,depth:null})

如果要通过将对象转换为字符串来打印对象

的console.log(JSON.stringify(OBJ));

Answer 15

只需使用

JSON.stringify(obj)

例

var args_string = JSON.stringify(obj);
console.log(args_string);

要么

alert(args_string);

另请注意，javascript函数被视为对象。

实际上，您可以像这样分配新属性

foo.moo = "stackoverflow";
console.log(foo.moo);

Answer 16

(这已添加到我的GitHub库中)

在这里重新发明轮子!这些解决方案都不适用于我的情况.所以,我很快就抄写了pagewil的答案.这个不是用于打印到屏幕(通过控制台,或文本字段或其他).然而,它是用于数据传输的.这个版本似乎返回了一个非常相似的结果toSource().我没试过JSON.stringify,但我认为这是一回事.此函数的结果是一个有效的Javascript对象声明.

我不会怀疑这样的事情是否已经出现在某个地方,但它只是缩短了时间,而不是花一些时间来搜索过去的答案.而且当我开始搜索这个问题时,这个问题是谷歌的热门话题.我想把它放在这里可能会帮助别人.

无论如何,此函数的结果将是对象的字符串表示形式,即使您的对象具有嵌入的对象和数组,即使这些对象或数组具有更多的嵌入对象和数组.(我听说你喜欢喝酒？所以,我用冷却器给你的车拉了个屁.然后,我用冷却器给你的冷却器拉了个屁.所以,你的冷却器可以喝,而你很酷.)

存储的数组[]代替,{}因此没有键/值对,只有值.像常规数组一样.因此,它们像数组一样被创建.

此外,引用了所有字符串(包括键名),除非这些字符串具有特殊字符(如空格或斜杠),否则不需要这样做.但是,我不想检测这只是为了删除一些原本仍能正常工作的报价.

然后,可以将此结果字符串与其一起使用eval或仅将其转储到var thru字符串操作中.因此,从文本中重新创建对象.

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那么此函数将错误地将其视为一个数组.

编辑:添加了对空值对象的检查.谢谢Brock Adams

编辑:下面是固定功能,可以打印无限递归对象.这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并不意味着转换为字符串.因为它要么太大,要么违反安全策略来访问某些属性.除非,我搞砸了一些事情,告诉我!

Answer 17

注意：在这些示例中，yourObj定义了要检查的对象。

首先，我最不喜欢但使用最多的显示对象的方式：

这是显示对象内容的实际方法

console.log(yourObj)

会产生类似：

我认为最好的解决方案是先查看“对象键”，然后查看“对象值”（如果您真的想查看对象的内容）...

console.log(Object.keys(yourObj));
console.log(Object.values(yourObj));

它将输出类似： （如上图：对象中存储的键/值）

如果您使用的是ECMAScript 2016或更高版本，则还有一个新选项：

Object.keys(yourObj).forEach(e => console.log(`key=${e}  value=${yourObj[e]}`));

这将产生整洁的输出： 先前答案中提到的解决方案：console.log(yourObj)显示太多参数，不是显示所需数据的最人性化方法。这就是为什么我建议分别记录键和值的原因。

接下来：

console.table(yourObj)

有人在较早的评论中建议过这个，但是它对我没有用。如果它确实适用于其他浏览器或其他工具上的其他人，则表示荣誉！病态的代码仍然放在这里供参考！将这样输出到控制台：

Answer 18

我需要一种递归打印对象的方法,提供了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) ); 

Answer 19

这是一种方法：

console.log("%o", obj);

Answer 20

您还可以使用 ES6 模板字面量概念以字符串格式显示 JavaScript 对象的内容。

alert(`${JSON.stringify(obj)}`);

alert(`${JSON.stringify(obj)}`);

Answer 21

最简单的方法:

console.log(obj);

或者留言:

console.log("object is: %O", obj);

传递的第一个对象可以包含一个或多个格式说明符.格式说明符由百分号(%)后跟一个表示要应用的格式的字母组成.

更多格式说明符

Answer 22

我总是用console.log("object will be: ", obj, obj1).这样我就不需要使用带有JSON的stringify来解决这个问题.对象的所有属性都将很好地扩展.

Answer 23

在控制台中显示对象的另一种方法是使用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));

Answer 24

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> 

通过Javascript 中的 print_r

Answer 25

var list = function(object) {
   for(var key in object) {
     console.log(key);
   }
}

object你的对象在哪里

或者你可以在chrome dev工具,"console"选项卡中使用它:

console.log(object);

Answer 26

假设对象 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

希望有所帮助!

Answer 27

我更喜欢使用console.table以获得清晰的对象格式，所以想象你有这个对象：

const obj = {name: 'Alireza', family: 'Dezfoolian', gender: 'male', netWorth: "$0"};

您将看到一个整洁且可读的表格，如下所示：