如何讓JavaScript對象更具可讀性/可導航性？

我用一堆嵌套對象創建一個對象。在與網絡檢查員一起工作時，我經常不得不重新調整方向，因爲所有這些對象都被簡稱爲Object。我的對象樹的縮寫版本如下所示：如何讓JavaScript對象更具可讀性/可導航性？

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'

或者這只是我將要處理的事情？

來源

2013-06-20 Marcus McLean

您的意思是你想要一個DOM樹嗎？ – bfavaretto

那麼，對象是'Object's - 檢查員寫出'.constructors'名稱。但是我想爲了簡單的調試改變你的代碼庫並沒有什麼意義。 – Bergi

不，我正在做一個DOM樹的對象來操作服務器端。 –

要自動擴展所有屬性，而不是在任何地方都讀取Object或Array[l]，常用技巧是記錄令人滿意的JSON表示。它還具有在對象在登錄後發生變化時不會在控制檯中進行更改的好處。你不應該使用非常大的對象來做它，並且這對循環對象來說是不可能的。

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

來源

2013-06-20 17:01:06 Bergi

如果您希望閱讀純文本，您可以console.log(JSON.stringify(your_object))。

來源

2013-06-20 16:45:25

使用命名函數來創建對象：

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的this very detailed answer克羅德對我的問題。

來源

2013-06-20 16:47:10

如何（中）效率是這樣做的？ –

@MarcusMcLean查看我答案的更新。 –

@Marcus：當然，它比使用Object文字效率低得多，但你也可以獲得繼承。我不會在純數據對象上推薦它，但是，例如從簡單的JSON字符串解析。 – Bergi

如何讓JavaScript對象更具可讀性/可導航性？

回答

相關問題