如何显示JavaScript对象？

如何以字符串格式显示JavaScript对象的内容，例如当我们alert变量时？

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

2290109 次浏览
小开

好吧，Firefox（感谢@Boj的详细信息）有#0方法，它将对象打印为JSON和function(){}。

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

小开
最佳答案

如果要打印对象以进行调试，请使用以下代码：

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

将显示：

截图控制台chrome

备注：您必须只有记录对象。例如，这将不起作用：

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

注意'：您还可以在log方法中使用逗号，然后输出的第一行将是字符串，之后，将呈现对象：

console.log('My object: ', obj);
小开 
var output = '';for (var property in object) {output += property + ': ' + object[property]+'; ';}alert(output);
小开

如果您想使用警报来打印您的对象，您可以这样做：

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

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

小开

使用原生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"
小开

功能：

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/

小开

我需要一种递归打印对象的方法，pagewil的答案提供了（谢谢！）。我对它进行了一点更新，以包括一种打印到特定级别的方法，并添加行间距，以便根据我们所处的当前级别正确缩进，这样它更具可读性。

// Recursive print of objectvar 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 wellif ( 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 wellif ( 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) );
小开

（这已被添加到我的库中，网址为GitHub

在这里重新发明轮子！这些解决方案都不适合我的情况。所以，我很快修改了威尔逊页的答案。这个不是用于打印到屏幕（通过控制台，或文本字段或其他什么）。它在这些情况下工作得很好，并且按照OP要求为alert工作得很好。这里的许多答案都没有按照OP的要求使用alert。无论如何，它是为数据传输格式化的。这个版本似乎返回了与toSource()非常相似的结果。我没有针对JSON.stringify进行测试，但我假设这是同样的事情。这个版本更像是一个聚文件，所以你可以在任何环境中使用它。此函数的结果是一个有效的Javascript对象声明。

我不会怀疑这样的东西是否已经在SO的某个地方，但它只是比花一段时间搜索过去的答案更短。当我开始搜索这个问题时，这个问题是我在谷歌上的热门话题；我想把它放在这里可能会帮助别人。

无论如何，这个函数的结果将是你的对象的字符串表示，即使你的对象有嵌入的对象和数组，即使这些对象或数组有更多的嵌入对象和数组。（我听说你喜欢喝酒？所以，我用冷却器拉你的车。然后，我用冷却器拉你的冷却器。所以，你的冷却器可以喝酒，当你很酷的时候。）

数组以[]而不是{}存储，因此没有键/值对，只有值。像常规数组一样。因此，它们像数组一样被创建。

此外，所有字符串（包括键名）都被引用，除非这些字符串有特殊字符（如空格或斜杠），否则这是不必要的。但是，我不想检测到这一点只是为了删除一些引号，否则这些引号仍然可以正常工作。

然后，这个结果字符串可以与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的属性，那么这个函数会错误地将它视为数组。

编辑：添加了对空值对象的检查。谢谢Brock Adams

编辑：下面是能够打印无限递归对象的固定函数。这与FF中的toSource打印的不一样，因为toSource会打印一次无限递归，其中as，此函数会立即杀死它。此函数运行速度比上一个慢，所以我在此处添加它而不是编辑上述函数，因为只有当您计划将链接回自身的对象传递到某个地方时才需要它。

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不是要转换为字符串。因为它太大了，或者违反了访问某些属性的安全策略。除非，我在这里搞砸了什么，一定要告诉！

小开

我使用了pagewil的print方法，效果非常好。

这是我稍微扩展的版本，带有（草率的）缩进和不同的prop/ob分隔符：

var print = function(obj, delp, delo, ind){delp = delp!=null ? delp : "\t"; // property delimeterdelo = delo!=null ? delo : "\n"; // object delimeterind = ind!=null ? ind : " "; // indent; ind+ind geometric addition not great for deep objectsvar 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 stringsstr += ind + prop + ': ' + q + obj[prop] + q + '; ' + delp;}else{str += ind + prop + ': {'+ delp + print(obj[prop],delp,delo,ind+ind) + ind + '}' + delo;}}return str;};
小开

您可以使用我的功能。
使用数组或字符串或对象调用此函数，它会提醒内容。

函数 

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('print object: ' + JSON.stringify(session));
小开

在NodeJS中，您可以使用#0打印对象。请务必说明深度，否则您将只能浅打印对象。

小开

似乎简单的for...in并不能解决问题，尤其是当我们想处理除自定义、主机、本机或CSSOM对象之外的问题时。此外，我们这里谈论的是调试，谁知道何时何地我们会需要它！

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

    obj2|__ foo = 'bar'|__ loop2 = obj2|            :|__ another = obj1|__ a1 = 1|__ b1 = 'baz'|__ loop1 = obj1|            :|__ c1 = true|__ d1 = ''|__ e1 = [1,2,3]

并呈现给他们丰富多彩的，像：

  1. 0， foo，'bar'
  2. 0，循环2，'包含对索引0处对象的循环引用'
  3. 0，另一个，对象
  4. 1， a1,1
  5. 1， b1， baz
  6. 1，循环1，'包含对索引2处对象的循环引用'
  7. 1， c1，'true'
  8. 1， d1，"
  9. 1， e1，[1,2,3]

但看那里：

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

小开

console.dir(object)：

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

请注意，console.dir()特性是非标准的。请参阅MDN Web文档

小开

正如之前所说我找到的最好最简单的方法是 

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

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>

viaJavaScript中的print_r

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

其中object是您的对象

或者您可以在chrome开发工具的“控制台”选项卡中使用它：

console.log(object);

小开

如果您想查看表格格式的数据，您可以使用：

console.table(obj);

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

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

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

更多关于console.table的信息这里

小开

试试这个：

console.log(JSON.stringify(obj))

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

小开

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

小开

pagewils代码的另一个修改……他没有打印出除了字符串之外的任何东西，并且将数字和布尔字段留空，并且我修复了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 wellif ( 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 appliedcase 'boolean':   // dittostr += levelStr + p + ': ' + o[p] + ' <br>';break;
case 'object':    // this is where we become recursivedefault: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 wellif ( level == 0 ){str += '</pre>';   // also can be </pre>}return str;};
小开

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

打印对象的内容

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

控制台输出（ChromeDevTools）：

John 0Foo 1Bar 2

希望有帮助！

小开

我总是在我的项目中使用一个小助手函数，通过控制台进行简单、快速的调试。灵感来自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');

在此处输入图片描述

小开

如果要打印物体的全长，可以使用

console.log（'util'）//展示隐藏，深度为空

如果您想通过将对象转换为字符串来打印对象，那么

console.log（JSON.stringify（obj））；

小开

这是函数。

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)))};

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

小开

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

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

颜色当然是可选的，“深度：null”将打印完整的对象。

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

参考文献：

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

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

小开

如果您正在寻找可以返回任何javascript对象的美化字符串的东西，请查看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"}}

如果您的对象中有函数，它甚至可以工作。

小开

这里有一个方法来做到这一点：

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

在控制台中显示对象的另一种方法是使用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 IEconsole.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 indentconsole.log(JSON.stringify(gandalf, null, 4));
小开

显示对象内容的一种简单方法是使用console.log如下所示

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

请注意，我没有使用'+'来连接对象。如果我使用'+'，那么我将只获得字符串表示if对象，类似于[Object对象]。

小开

NB：在这些示例中，您的Obj定义了要检查的对象。

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

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

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)

有人在之前的评论中提出了这个建议，但它从来没有对我起作用。如果它确实适用于其他浏览器或其他浏览器上的其他人，那就太好了！我仍然会把代码放在这里供参考！将这样的内容输出到控制台：输入图片描述

小开

试试这个：

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

输出：

在此处输入图片描述

小开

只需使用 

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);
小开

它在浏览器中不起作用，您可能只需要在您想为您的对象获取有效的JS表示而不是JSON的情况下使用它。它只是运行节点内联评估 

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 }))
小开

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

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

你会看到一个简洁易读的表格，如下所示：console.table

小开

在ES2015中，使用简写属性声明语法表示对象文字，您可以记录对象，同时还可以简洁地保留您的变量名：

console.log("bwib:", bwib, "bwab:", bwab, "bwob": bwob) // old way Aconsole.log({bwib: bwib, bwab: bwab, bwob: bwob})       // old way B
console.log({bwib, bwab, bwob})                         // ES2015+ way

Firefox控制台中的演示

小开

循环引用解决方案

要使字符串没有来自包含重复引用（在许多地方引用相同对象）的对象的冗余信息，包括循环引用，请使用JSON.stringify和替代品（以片段形式呈现），如下所示

let s = JSON.stringify(obj, refReplacer(), 4);

function refReplacer() {let m = new Map(), v= new Map(), init = null;
return function(field, value) {let p= m.get(this) + (Array.isArray(this) ? `[${field}]` : '.' + field);let isComplex= value===Object(value)    
if (isComplex) m.set(value, p);    
let pp = v.get(value)||'';let path = p.replace(/undefined\.\.?/,'');let val = pp ? `#REF:${pp[0]=='[' ? '$':'$.'}${pp}` : value;    
!init ? (init=value) : (val===init ? val="#REF:$" : 0);if(!pp && isComplex) v.set(value, path);   
return val;}}



// ---------------// TEST// ---------------
// gen obj with duplicate referenceslet a = { a1: 1, a2: 2 };let b = { b1: 3, b2: "4" };let obj = { o1: { o2:  a  }, b, a }; // duplicate referencea.a3 = [1,2,b];                      // circular referenceb.b3 = a;                            // circular reference

let s = JSON.stringify(obj, refReplacer(), 4);
console.log(s);alert(s);

这个解决方案基于这个（更多信息）为每个对象值创建JSONPath类似路径，如果同一个对象出现两次（或更多），它使用此路径的引用来引用该对象，例如#REF:$.bar.arr[3].foo（其中$表示主对象）而不是“渲染”整个对象（冗余较少）

奖金：反转

function parseRefJSON(json) {let objToPath = new Map();let pathToObj = new Map();let o = JSON.parse(json);  
let traverse = (parent, field) => {let obj = parent;let path = '#REF:$';
if (field !== undefined) {obj = parent[field];path = objToPath.get(parent) + (Array.isArray(parent) ? `[${field}]` : `${field?'.'+field:''}`);}
objToPath.set(obj, path);pathToObj.set(path, obj);    
let ref = pathToObj.get(obj);if (ref) parent[field] = ref;
for (let f in obj) if (obj === Object(obj)) traverse(obj, f);}  
traverse(o);return o;}


// ------------// TEST// ------------
let s = `{"o1": {"o2": {"a1": 1,"a2": 2,"a3": [1,2,{"b1": 3,"b2": "4","b3": "#REF:$.o1.o2"}]}},"b": "#REF:$.o1.o2.a3[2]","a": "#REF:$.o1.o2"}`;
console.log('Open Chrome console to see nested fields');let obj = parseRefJSON(s);console.log(obj);

小开

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

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

const obj  = {"name" : "John Doe","habbits": "Nothing",};alert(`${JSON.stringify(obj)}`);

小开

如果你正在寻找一个内衬Node.js.…

console.log("%o", object);
小开

console.log（）在调试对象方面做得很好，但是如果您想将对象打印到页面内容中，这是我想出的模仿PHPprint_r（）功能的最简单方法。很多其他答案都想重新发明轮子，但是在JavaScript的JSON.stringify（）和超文本标记语言的之间，您可以得到您想要的东西。

var obj = { name: 'The Name', contact: { email: 'thename@gmail.com', tel: '123456789' }};$('body').append('<pre>'+JSON.stringify(obj, null, 4)+'</pre>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


提交答案