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

How to make JavaScript objects more readable/navigable?

本文关键字：导航 可读性 何使 JavaScript 对象      更新时间：2023-09-26

我正在创建一个具有一堆嵌套对象的对象。当使用web检查器时，我经常不得不重新定位自己，因为所有这些对象都被简单地称为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'

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

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

要自动展开所有属性，而不是到处读取Object或Array[l]，常用的技术是记录经过美化的JSON表示。它还有一个好处，就是当您的对象在记录后发生变化时，不会在控制台中进行更改。您不应该只对非常大的对象这样做，而对循环对象则不可能这样做。

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

使用命名函数创建对象:

  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对我的问题的非常详细的回答

相关文章：