JavaScript数据格式/漂亮打印机

Question

我正在尝试找到一种pretty print易于理解的JavaScript数据结构html" target="_blank">调试方法。

我有一个相当大和复杂的数据结构存储在JS中，我需要编写一些代码来对其进行操作。为了弄清楚我在做什么和哪里出了问题，我真正需要的是能够完整地查看数据结构，并在我通过UI进行更改时对其进行更新。

除了找到一种将JavaScript数据结构转储到人类可读的字符串的好方法外，我还能处理所有这些事情。JSON可以，但是确实需要很好地格式化和缩进。为此，我通常会使用Firebug出色的DOM转储工具，但是我确实确实需要能够立即查看整个结构，这在Firebug中似乎是不可能的。

欢迎任何建议。

提前致谢。

Answer 1

我写了一个函数来以可读的形式转储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$/, "");
}

选择带有递归调用的行上的缩进，然后在此行之后切换注释行，以支撑样式。

…我看到您整理了自己的版本，很好。参观者将有选择。