带有嵌套循环的 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'}

    ],

    // ...
];

这样，每一行都是一个具有“标题”属性和“内容”属性的对象。你的循环将如下所示：

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 循环：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);

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