如何显示JavaScript对象？


How can I display a JavaScript object?

当我们alert时，我如何在一条弦格式中显示一个标记对象的含量？

同样格式化的方式我想显示一个对象。

相关讨论

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

1
2
3
4
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参考和其他示例。

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

如果需要，请使用自定义json.stringify replacer遇到此javascript错误

1
"Uncaught TypeError: Converting circular structure to JSON"
相关讨论

用火狐

如果您想打印用于调试的对象，我建议您安装firebug for firefox并使用以下代码：

1
console.log(obj)

镀铬

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

将显示

screenshot console chrome

注意：必须只记录对象。例如，这不起作用：

1
console.log('My object : ' + obj)
相关讨论

1
2
3
4
5
var output = '';
for (var property in object) {
  output += property + ': ' + object[property]+'; ';
}
alert(output);
相关讨论

console.dir(object)：

Displays an interactive listing of the properties of a specified JavaScript object. This listing lets you use disclosure triangles to examine the contents of child objects.

注意，console.dir()功能是非标准的。参见MDN Web文档

相关讨论

试试这个：

1
console.log(JSON.stringify(obj))

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

相关讨论

嗯，firefox(感谢@bojangles提供详细信息)有Object.toSource()方法，它将对象打印为json和function(){}。

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

相关讨论

如果要使用Alert打印对象，可以执行以下操作：

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

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

相关讨论

在nodejs中，可以使用util.inspect(obj)打印对象。一定要说明深度，否则你只会得到一个浅打印的对象。

功能：

1
2
3
4
5
6
7
8
9
10
11
12
13
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;
}

用途：

1
2
3
4
5
6
7
8
9
var myObject = {
    name: 'Wilson Page',
    contact: {
        email: '[email protected]',
        tel: '123456789'
    }  
}

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

例子：

http://jsfiddle.net/wilsonpage/6eqmn/

相关讨论

如果要查看表格格式的数据，可以使用

1
console.table(obj);

如果单击表列，则可以对表进行排序。

还可以选择要显示的列：

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

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

正如之前所说，我发现的最好和最简单的方法是

1
2
3
4
var getPrintObject=function(object)
{
    return JSON.stringify(object);
}
相关讨论

使用此：

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

要使用node.js打印完整的对象，并将颜色作为奖励：

1
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_选项

如果要打印其全长的对象，可以使用

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

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

console.log(JSON.stringify(obj));

相关讨论

我需要一种递归打印对象的方法，这是pagewil提供的答案(谢谢！).I稍微更新了一点，以包含一种打印到某个级别的方法，并添加间距，以便根据当前的级别正确缩进，从而使其更具可读性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// 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 = '[cc lang="javascript"]';
    }

    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 += '

；}返回STR；}；< /代码>

用途：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var pagewilsObject = {
    name: 'Wilson Page',
    contact: {
        email: '[email protected]',
        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) );

(这已添加到我在Github的库中)

在这里重新发明轮子！这些解决方案都不适合我的情况。所以，我很快就修改了佩吉的答案。这一个不用于打印到屏幕(通过控制台、文本字段或其他方式)。但是，它是用于数据传输的。这个版本似乎返回了与toSource()非常相似的结果。我没有试过JSON.stringify，但我想这大概是同一件事。此函数的结果是一个有效的javascript对象声明。

我不怀疑这样的事情是否已经在某个地方出现了，但与其花些时间寻找过去的答案，还不如缩短时间。既然这个问题在我开始搜索这个问题的时候是我在谷歌上的头号热门话题，我想把它放在这里可能会对其他人有所帮助。

无论如何，这个函数的结果将是对象的字符串表示，即使对象有嵌入的对象和数组，甚至那些对象或数组有进一步的嵌入对象和数组。(我听说你喜欢喝酒？所以，我用一个冷却器给你的车拉皮条。然后，我用一个冷却器给你的冷却器拉皮条。所以，你的冰柜可以喝，而你的冰柜可以喝。)

数组是用[]而不是{}存储的，因此没有键/值对，只有值。像正则数组一样。因此，它们就像数组一样被创建。

此外，所有字符串(包括键名)都被引用，除非这些字符串具有特殊字符(如空格或斜杠)，否则不需要这样做。但是，我不想仅仅为了删除一些引用就检测到这个问题，否则这些引用仍然可以正常工作。

然后，可以将生成的字符串与eval一起使用，或者只是通过字符串操作将其转储到var中。因此，从文本重新创建对象。

1
2
3
4
5
6
7
8
9
10
11
12
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的属性，那么此函数将错误地将其视为数组。

编辑：添加了对空值对象的检查。谢谢布洛克·亚当斯

编辑：下面是固定函数，可以打印无限递归对象。这与FF中的toSource不同，因为toSource将一次性打印无限递归，其中as，此函数将立即终止它。这个函数比上面的函数运行得慢，所以我在这里添加它，而不是编辑上面的函数，因为只有当您计划在某个地方传递链接回自己的对象时，才需要它。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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)+"]";
}

测试：

1
2
3
4
5
6
7
8
9
10
11
12
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());

结果：

1
2
{'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.上崩溃。而且铬会在Uncaught RangeError: Maximum call stack size exceeded上崩溃。显然，document.body并不打算转换成字符串。因为它太大，或者违反安全策略访问某些属性。除非，我把这里搞砸了，告诉我！

相关讨论

最简单的方法：

1
console.log(obj);

或者带着信息：

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

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

更多格式说明符

相关讨论

我总是用console.log("object will be:", obj, obj1)。这样，我就不需要使用JSON进行Stringify的解决方案。对象的所有属性都将很好地展开。

以下是一种方法：

1
console.log("%o", obj);
相关讨论

1
2
3
4
5
var list = function(object) {
   for(var key in object) {
     console.log(key);
   }
}

你的目标是什么？

或者，您可以在chrome dev工具中使用它，"控制台"选项卡：

console.log(object);

相关讨论

在控制台中显示对象的另一种方法是使用JSON.stringify。签出以下示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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));

假设对象obj = {0:'John', 1:'Foo', 2:'Bar'}。

打印对象的内容

1
2
3
for (var i in obj){
    console.log(obj[i], i);
}

控制台输出(chrome devtools)：

1
2
3
John 0
Foo 1
Bar 2

希望有帮助！

javascript函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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>
")
       }
    }

打印对象

1
2
<script type="text/javascript">
print_r(JAVACRIPT_ARRAY_OR_OBJECT);

通过javascript中的打印

相关讨论

我认为最好的解决办法是通过物体键来看待，然后通过物体的价值来看待物体持有的东西。

在这些例子中，Yourobj defines the object you want to examine.ZZU1

它将输出类似的东西：MGX1〔0〕(图像上面：物体中的钥匙/价值)

如果你使用ECMASCRIPT 2016或Newer：

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

This will produce neat output:MGX1〔1〕这个解决方案在一个预先答案中提到：EDOCX1&0)，显示的参数太多，而不是最友好的方式显示你想要的数据。这就是为什么我推荐测井钥匙，然后价值分开。

Next up：

1
console.table(yourObj)

一个早期的人怎么建议这个人，但他从来没有为我工作过。如果有人在不同的浏览器上或在不同的东西上工作，那么库多斯！他仍然把密码放在这里以供参考！Will exput something like this to the console:MGX1〔2〕

最后我最喜欢的

1
console.log(yourObj)

Will produce something like：MGX1〔3〕

相关讨论

简单使用

1
JSON.stringify(obj)

示例

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

黄金

1
alert(args_string);

还注意到Javascript functions are considered as objects.

事实上，你可以这样分配新的财产

1
2
foo.moo ="stackoverflow";
console.log(foo.moo);
相关讨论

我在项目中经常使用一个小助手函数，通过控制台进行简单、快速的调试。灵感来自拉拉维尔。

1
2
3
4
5
6
7
8
9
10
11
12
/**
 * @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);输出：enter image description here

1
2
var obj = {field1: 'xyz', field2: 2016};
dd(obj, 'My Cool Obj');

enter image description here

这是功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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 + '{
';
    for(var p in obj) {
        str = str + tab + ' ' + p + ' : ' + traverse(tab+' ', obj[p]) +'
';
    }
    str = str.slice(0,-2) + str.slice(-1);                
    str = str + tab + '},';
    return str;
}('',obj).slice(0,-1)))};

它可以使用具有可读性的制表符缩进来显示对象。

相关讨论

对pagewils代码的另一个修改…他只打印字符串，将数字和布尔值字段留空，我修复了Megaboss创建的函数内部第二种类型的打字错误。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
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 = '[cc lang="javascript"]';   // can also be [cc lang="javascript"]
    }

    var levelStr = '';
    for ( var x = 0; x < level; x++ )
    {
        levelStr += '    ';   // all those spaces only work with [cc lang="javascript"]
    }

    if ( maxLevel != 0 && level >= maxLevel )
    {
        str += levelStr + '...';
        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] + ' ';
            break;

          case 'object':    // this is where we become recursive
          default:
            str += levelStr + p + ': [ ' + 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 += '

'；//也可以是[/cc]}返回STR；}；< /代码>

我用了pagewil的打印方法，效果很好。

这是我的略微扩展版本，带有(松散的)缩进和不同的prop/ob分隔符：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var print = function(obj, delp, delo, ind){
    delp = delp!=null ? delp :"\t"; // property delimeter
    delo = delo!=null ? delo :"
"; // 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;
};

如果您正在寻找可以返回任何javascript对象的美化字符串的对象，请访问https://github.com/fresheneesz/beautinator。一个例子：

1
2
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)

结果：

1
2
3
4
5
6
7
8
9
{"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.table来获得清晰的对象格式。

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

你会看到一张近似下面的桌子MGX1〔5〕

一种简单的展示对象内容的方法是使用控制台。log as shown below

1
console.log("Object contents are", obj);

请注意，我没有使用+concatenate the object。如果我使用++than，我只会得到一个字符串代表，如果我的对象，类似的东西[object object]。

试试这个

1
2
var object = this.window;
console.log(object,'this is window object');

输出

MGX1〔4〕

它不会在一个浏览器上工作，而你可能只需要这个，以使JS代表你的对象而不是JSON。运行的节点内线评价

1
2
3
4
5
6
var execSync = require('child_process').execSync

const objectToSource = (obj) =>
  execSync('node -e \'console.log(JSON.parse(`' + JSON.stringify(obj) + '`))\'', { encoding: 'utf8' })

console.log(objectToSource({ a: 1 }))
相关讨论

你可以用我的功能。使用数组、字符串或对象调用此函数，它将通知内容。

功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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) + '
';
        }
    }else {
        output += printthis;
    }
    if(returnoutput && returnoutput == true) {
        return output;
    }else {
        alert(output);
    }
}

用法

1
2
var data = [1, 2, 3, 4];
print_r(data);

似乎一个简单的for...in不能解决这个问题，特别是当我们想处理自定义、宿主、本机或cssom对象之外的问题时。此外，我们在这里讨论调试，谁知道何时何地需要它呢！

我的小库可以处理像这样的对象：

1
2
3
4
5
6
7
8
9
10
11
12
    obj2
     |__ foo = 'bar'
     |__ loop2 = obj2
     |            :
     |__ another = obj1
                    |__ a1 = 1
                    |__ b1 = 'baz'
                    |__ loop1 = obj1
                    |            :
                    |__ c1 = true
                    |__ d1 = ''
                    |__ e1 = [1,2,3]

并呈现出丰富多彩的形象，如：

  • 0，FO，'酒吧'
  • 0，loop2，'包含对索引0处对象的循环引用'
  • 0，另一个，"对象"
  • 1，A1，1
  • 1，B1，BAZ
  • 1，loop1，'包含对索引2处对象的循环引用'
  • 1，C1，"真"
  • 1，d1，''
  • 1，E1，[1,2,3]

    • 但看到那里：

  • https://github.com/centurianii/jsdebug
  • http://jsfidle.net/centurianii/92cmk/36/

    • 有了一些预防措施，甚至解析了document.body！