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"属性和"contents"属性的对象。你的循环看起来像这样:

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++)，那么最好像这样初始化for循环。Nicholas C. Zakas详细解释了这种语法的原因。
总是将多次访问的变量存储在一个局部变量中。它加快了执行速度(例如idata = data[i];)。
2. 尽量避免鸭子输入(如data[i].title != null)。首先检查变量的类型。它比较慢，但是代码更容易理解和维护。试试下面的typeOf函数(例如typeOf(idata) === "Object")。
3. 通常使用===代替==和!==代替!=更好，因为它们不执行可能导致意外结果的类型强制转换。
4. 与其创建多个内联样式，不如创建单个类.greyBackground { background-color: #EEEEEE; }，并将每个leftCol段落的className设置为greyBackground。
5. 避免使用document.write。它很慢，导致文档流，并且在页面下载时停止加载资产。使用JavaScript创建动态内容的最佳方法是使用document.createDocumentFragment方法，我将在下面解释。
最好自己用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);

测试我和你的页面。我的很可能执行得更快。如果你有任何疑问，请尽管问我。干杯!div =)