使用嵌套循环的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); 

测试我的网页和你的。我很可能会执行得更快。如果您有任何疑问，请随时问我。干杯! =）