具有嵌套循環的Javascript嵌套數組

Question

我到目前為止創建了一個嵌套數組，但我覺得我做錯了或者沒有意義。 任何人都可以看看，告訴我我的數組是否是構建嵌套數組的方法。 我想要的只是在特定標題下創建行，所以我嵌套數據並使用嵌套循環調用它。 也許theres是一種更簡單的方法。 這是代碼：

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; } .greyBackground { background-color: #EEEEEE; }並設置className每個leftCol段落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);

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