将现有数组重新分组(将数组分每四个渲染到一组)

最近做项目有一个小功能，将数组玩出了花样，就是要将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);
}

好了，接下来，数据就分组渲染到节点中了。