將現有數組重新分組(將數組分每四個渲染到一組)

最近做項目有一個小功能，將數組玩出了花樣，就是要將ajax從後臺拿到的數據，四個一組，渲染到頁面上，特此記下筆記，以作安利：

首先，頁面上建立一DOM節點：<div id="test"></div>

假如我們從後臺拿到的數據結構爲：var data = [1, 2, 3, 4, 5, 6, 7, 8, 9,10];

接下來直接上代碼：

var result = [];
var data = [1, 2, 3, 4, 5, 6, 7, 8, 9,10];
var chunk = 4; //每3個分一組

for (var i = 0, j = data.length; i < j; i += chunk) {
    result.push(data.slice(i, i + chunk));
}

console.log(result);
console.log('原有數組被分成幾組:', result.length);

    for (var k = 0; k < result.length; k ++) {
    console.log(result[k]);
}

瀏覽器打印結果：

我們拿到分組的數據後，自然而然就知道怎麼將這些數據渲染到頁面上了：

var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var table = document.createElement("table");
document.querySelector("body").appendChild(table);
var tr = document.createElement("tr");
table.appendChild(tr);
for (var i = 0; i < data.length; i++) {
    if (i % 4 === 0) {
        tr = document.createElement("tr");
        table.appendChild(tr);
    }
    var td = document.createElement("td");
    td.innerHTML = data[i];
    tr.appendChild(td);
}

好了，接下來，數據就分組渲染到節點中了。