如何使 JavaScript 对象更具可读性/可导航性？

Question

我正在创建一个包含一堆嵌套对象的对象。在使用网络检查器时，我经常不得不重新定位自己，因为所有这些对象都被简单地称为Object。我的对象树的精简版本如下所示：

v Object
    v fields: Array[3]
        v 0: Object
            v fields: Array[2]
                v 0: Object
                    name: 'name'
                    placeholder: 'name'
                    tag: 'input'
                    type: 'text'
                > 1: Object
            name: 'name'
            tag: 'fieldset'
        > 1: Object
        > 2: Object
    name: 'name'

这很快就会变老。有什么方法可以使它更具可读性/可导航性？如果是这样，它是否有效？像这样：

v form
    v fields: Array[3]
        v 0: fieldset
            v fields: Array[2]
                v 0: input
                     name: 'name'
                     placeholder: 'name'
                     tag: 'input'
                     type: 'text'
                > 1: textarea
            name: 'name'
            tag: 'fieldset'
        > 1: fieldset
        > 2: button
    name: 'name'

或者这只是我必须处理的事情？

Answer 1

如果您想阅读纯文本，可以console.log(JSON.stringify(your_object))。

Answer 2

要自动扩展所有属性而不是到处读取Object 或Array[l]，一种常见的技术是记录漂亮的JSON 表示。当您的对象在记录后发生变异时，它还具有不会在控制台中更改的好处。你不应该只对非常大的对象执行此操作，并且在循环对象上是不可能的。

console.log(JSON.stringify(tree, null, 4));

Answer 3

使用命名函数来创建你的对象：

  var a = {foo:"bar"};
  var b = new function myobj() {
    this.foo = "bar";
  }
  console.log(a,b); // Object, myobj

如果你想要可重用的对象，你应该使用

  function myobj() {
    this.foo = "bar";
  }
  var objA = new myobj();
  var objB = new myobj();
  console.log(objA,objB); // myobj, myobj

如果您想深入了解这些差异，请参阅 TJ Crowder 的 this very detailed answer 来回答我的问题。