我试图找到一种方法以人类可读的形式“漂亮地打印”用于调试的 JavaScript 数据结构。
我有一个相当大而复杂的数据结构存储在 JS 中，我需要编写一些代码来操作它。为了弄清楚我在做什么以及我哪里出错了，我真正需要的是能够完整地查看数据结构，并在我通过 UI 进行更改时更新它。
除了找到一种将 JavaScript 数据结构转储为人类可读字符串的好方法之外，我可以自己处理所有这些事情。JSON 可以，但它确实需要很好地格式化和缩进。为此，我通常会使用 Firebug 出色的 DOM 转储工具，但我确实需要能够立即查看整个结构，这在 Firebug 中似乎是不可能的。
像这样使用Crockford 的 JSON.stringify：
var myArray = ['e', {pluribus: 'unum'}];
var text = JSON.stringify(myArray, null, '\t'); //you can specify a number instead of '\t' and that many spaces will be used for indentation...
变量text看起来像这样：
[
"e",
{
"pluribus": "unum"
}
]
顺便说一句，这仅需要那个 JS 文件 - 它可以与任何库等一起使用。
我写了一个函数来以可读的形式转储一个 JS 对象，虽然输出没有缩进，但添加它应该不会太难：我从我为 Lua 制作的一个函数中制作了这个函数（它要复杂得多) 处理了这个缩进问题。
这是“简单”版本：
function DumpObject(obj)
{
var od = new Object;
var result = "";
var len = 0;
for (var property in obj)
{
var value = obj[property];
if (typeof value == 'string')
value = "'" + value + "'";
else if (typeof value == 'object')
{
if (value instanceof Array)
{
value = "[ " + value + " ]";
}
else
{
var ood = DumpObject(value);
value = "{ " + ood.dump + " }";
}
}
result += "'" + property + "' : " + value + ", ";
len++;
}
od.dump = result.replace(/, $/, "");
od.len = len;
return od;
}
我会考虑改进一下。
注 1：要使用它，请执行od = DumpObject(something)并使用 od.dump。令人费解，因为我也想要 len 值（项目数）用于另一个目的。使函数只返回字符串是微不足道的。
注 2：它不处理引用中的循环。
编辑
我做了缩进的版本。
function DumpObjectIndented(obj, indent)
{
var result = "";
if (indent == null) indent = "";
for (var property in obj)
{
var value = obj[property];
if (typeof value == 'string')
value = "'" + value + "'";
else if (typeof value == 'object')
{
if (value instanceof Array)
{
// Just let JS convert the Array to a string!
value = "[ " + value + " ]";
}
else
{
// Recursive dump
// (replace " " by "\t" or something else if you prefer)
var od = DumpObjectIndented(value, indent + " ");
// If you like { on the same line as the key
//value = "{\n" + od + "\n" + indent + "}";
// If you prefer { and } to be aligned
value = "\n" + indent + "{\n" + od + "\n" + indent + "}";
}
}
result += indent + "'" + property + "' : " + value + ",\n";
}
return result.replace(/,\n$/, "");
}
在递归调用的行上选择缩进，然后通过在此行之后切换注释行来支持样式。
...我看到你掀起了自己的版本，这很好。游客将有选择。
您可以使用以下
<pre id="dump"></pre>
<script>
var dump = JSON.stringify(sampleJsonObject, null, 4);
$('#dump').html(dump)
</script>
在 中Firebug，如果您只是console.debug ("%o", my_object)可以在控制台中单击它并进入交互式对象浏览器。它显示整个对象，并允许您展开嵌套对象。