将数组切片成几个块

Question

请看一下这个fiddle。

如何将一个数组分割成几个小数组

var data = 
[ { number: '1' },
  { number: '2' },
  { number: '3' },
  { number: '4' },
  { number: '5' },
  { number: '6' },
  { number: '7' },
  { number: '8' },
  { number: '9' },
  { number: '10'}
            ];

并为每个人建立一个表？ 示例：

<table>
  <thead>
   <tr>
    <th>Number</th><th>Number</th><th>Number</th>
   </tr>
  </thead>
  <tbody>
    <tr>
     <td>1</td><td>2</td><td>3</td>
    </tr>
  </tbody>
 </table>

 <table>
  <thead>
   <tr>
    <th>Number</th><th>Number</th><th>Number</th>
   </tr>
  </thead>
  <tbody>
    <tr>
     <td>4</td><td>5</td><td>6</td>
    </tr>
  </tbody>
 </table>
 ........

以下代码不起作用。输出有点乱。正如您在小提琴中看到的，我无法访问密钥（数字），并且表之间有空的<table></table> 标签。谁能告诉我如何正确分割数组。

代码：

var data = [ { number: '1' },
  { number: '2' },
  { number: '3' },
  { number: '4' },
  { number: '5' },
  { number: '6' },
  { number: '7' },
  { number: '8' },
  { number: '9' },
  { number: '10'}
            ];
var chunks = [];
var item_html ="";
for (var i=0; i<data.length; ) {
    chunks.push(data.slice(i, i+=3));
}
for (var i=0; i<chunks.length; i++) {

     item_html += "<table><thead><tr>";

       (i, chunks[i].map(function(key,v){
       item_html += "<th>"+key+"</th>";
       })); 
     item_html += "</tr></thead><tbody><tr>";

       (i, chunks[i].map(function(v){
       item_html += "<td>"+v.number+"</td>";
       })); 

     item_html += "</tr></tbody><table>";

}

$('#area').append(item_html)

Answer 1

不正确的标题是因为在第一次 .map() 调用中迭代函数的参数顺序错误。第一个参数是值，第二个参数是键。应该是：

chunks[i].map(function (v, key) {

空表是因为拼写错误。这一行：

 item_html += "</tr></tbody><table>";

应该是：

 item_html += "</tr></tbody></table>";

您在</table> 中缺少/。

修正后的循环是：

for (var i = 0; i < chunks.length; i++) {

    item_html += "<table><thead><tr>";

    chunks[i].map(function (v, key) {
        item_html += "<th>" + key + "</th>";
    });
    item_html += "</tr></thead><tbody><tr>";

    chunks[i].map(function (v) {
        item_html += "<td>" + v.number + "</td>";
    });

    item_html += "</tr></tbody></table>";

}

在每次调用.map() 时，您所拥有的额外(i, ...) 毫无意义，因此我将其删除。

Updated fiddle