使用嵌套循環的Javascript嵌套數組

Question

我創建了一個嵌套數組，至今爲止我可以，但是我覺得我做錯了或者沒有任何意義。任何人都可以請看看，並告訴我，如果我的數組是建立嵌套數組的方式。我只想在特定標題下創建行，所以我嵌套數據並用嵌套循環調用它。也許這是一種更簡單的方法。下面是代碼：

var data = [ 

    {title:'Row Title 1'}, 

    [{leftCol:'Some text for left column',rightCol:'Some text for right column'}, 
    {leftCol:'Some text for left column',rightCol:'Some text for right column'}, 
    {leftCol:'Some text for left column',rightCol:'Some text for right column'}], 

    {title:'Row Title 2'}, 

    [{leftCol:'Some text for left column',rightCol:'Some text for right column'}, 
    {leftCol:'Some text for left column',rightCol:'Some text for right column'}, 
    {leftCol:'Some text for left column',rightCol:'Some text for right column'}] 

    ]; 

    for (var i=0, j=data.length; i < j; i++) { 

     if(data[i].title != null){ 
      document.write('<b>'+data[i].title+'</b><br />'); 
     } 

     for(p=0,plen=data[i].length; p<plen;p++){ 
      document.write('<p style="background:#eee;">'+data[i][p].leftCol+'</p>'); 
      document.write('<p>'+data[i][p].rightCol+'</p>');  
     } 
    } 

Answer 1

你使用應該更喜歡這樣的結構：

var data = [ 

    {title:'Row Title 1', contents: [ 

     {leftCol:'Some text for left column',rightCol:'Some text for right column'}, 
     {leftCol:'Some text for left column',rightCol:'Some text for right column'}, 
     {leftCol:'Some text for left column',rightCol:'Some text for right column'} 

    ], 

    // ... 
]; 

這樣，每一行是一個「title」屬性和「內容」的對象屬性。那麼你的循環應該是這樣的：

for (var i=0, j=data.length; i < j; i++) { 

    if(data[i].title != null){ 
     document.write('<b>'+data[i].title+'</b><br />'); 
    } 

    for(var p=0, plen=data[i].contents.length; p < plen; p++){ 
     document.write('<p style="background:#eee;">'+data[i].contents[p].leftCol+'</p>'); 
     document.write('<p>'+data[i].contents[p].rightCol+'</p>');  
    } 
} 

Answer 2

如果你想使你的代碼更健壯遵循以下原則：

1. 它總是更好地初始化像這樣的循環，如果你有一個長度：for (var i = 0, l = length; l--; i++) 。這個語法的原因在Nicholas C. Zakas中有更詳細的解釋。
2. 始終將多次訪問的變量存儲在局部變量中。它加快了執行速度（例如idata = data[i];）。
3. 儘量避免鴨子打字（例如data[i].title != null）。首先檢查變量的類型。速度較慢，但​​代碼更易於理解和維護。嘗試在帖子底部的typeOf函數（例如typeOf(idata) === "Object"）。
4. 通常使用===代替==和!==而不是!=會更好，因爲它們不會執行可能導致意外結果的類型強制轉換。
5. 不是創建多個內聯樣式，而是創建一個類.greyBackground { background-color: #EEEEEE; }並將每個leftCol段的className設置爲greyBackground。
6. 避免使用document.write。這很慢，導致文檔重新排版，並在頁面下載時暫停加載資源。使用JavaScript創建動態內容的最佳方式是使用document.createDocumentFragment方法，下面將對此進行說明。
7. 自己創建JavaScript節點總是更好。如果您使用document.write或element.innerHTML中的字符串，則瀏覽器會解析該字符串並將其轉換爲節點。因此使用該方法較慢。

這是我怎麼會寫你的JavaScript：

var data = [ 
    "Row Title 1", 
    { 
     "leftCol": "Some text for left column", 
     "rightCol": "Some text for right column" 
    }, { 
     "leftCol": "Some text for left column", 
     "rightCol": "Some text for right column" 
    }, { 
     "leftCol": "Some text for left column", 
     "rightCol": "Some text for right column" 
    }, 
    "Row Title 2", 
    { 
     "leftCol": "Some text for left column", 
     "rightCol": "Some text for right column" 
    }, { 
     "leftCol": "Some text for left column", 
     "rightCol": "Some text for right column" 
    }, { 
     "leftCol": "Some text for left column", 
     "rightCol": "Some text for right column" 
    } 
]; 

function typeOf(value) { 
    if (value === null) { 
     return "null"; 
    } else if (typeof value === "undefined") { 
     return "undefined"; 
    } else { 
     return Object.prototype.toString.call(value).slice(8, -1); 
    } 
} 

var element; 
var fragment = document.createDocumentFragment(); 
var idata; 

for (var i = 0, l = data.length; l--; i++) { 
    idata = data[i]; 
    if (typeOf(idata) === "Object") { 
     element = document.createElement("p"); 
     element.className = "greyBackground"; 
     element.appendChild(document.createTextNode(idata.leftCol)); 
     fragment.appendChild(element); 

     element = document.createElement("p"); 
     element.appendChild(document.createTextNode(idata.rightCol)); 
     fragment.appendChild(element); 
    } else { 
     element = document.createElement("b"); 
     element.appendChild(document.createTextNode(idata)); 
     fragment.appendChild(element); 

     element = document.createElement("br"); 
     fragment.appendChild(element); 
    } 
} 

document.body.appendChild(fragment); 

測試我的網頁和你的。我很可能會執行得更快。如果您有任何疑問，請隨時問我。乾杯! =）