对象数组为:
var arr=[
{id:1001,name:"苹果IphoneX",price:6900,num:2,info:"最新的苹果手机"},
{id:1002,name:"小米10",price:3900,num:3,info:"最新的小米手机"},
{id:1003,name:"华为meta10",price:8900,num:4,info:"最新的华为手机"},
{id:1004,name:"锤子手机",price:1900,num:1,info:"最新的锤子手机"},
{id:1005,name:"三星手机",price:4900,num:2,info:"最新的三星手机"},
{id:1006,name:"vivo手机",price:2900,num:4,info:"最新的vivo手机"},
{id:1007,name:"魅族手机",price:1900,num:5,info:"最新的魅族手机"},
]
最后的渲染结果如下图所示:

function zhuanhuan(arr){//定义一个函数,将上面的arr对象数组转换为一个二维数组
var arr2=[];//先定义一个一维数组。
for(var i=0;i<arr.length;i++){
arr2[i]=Object.values(arr[i]);//将arr对象数组中的每一行通过Object.values方法取出来,然后再赋值给arr2这个一维数组,一次添加一组数据,
//形成一个二维数组。本行代码不懂的话可以先查阅一下二维数组的定义和用法,和Object.values方法。
}
console.log(arr2.length);//在控制台打印,供查看数据是否复制过来了。
return arr2;//将复制过后的数组传出来,供外部变量接收。
}
var arr3=zhuanhuan(arr);//定义一个变量,接收上个函数传出的数据。
console.log(arr3);//打印试看数据是否正确
function creatTable(arr){//定义这个打印表格的函数
document.write("<table>")//首先在外围打印一个table标签
for(var i=0;i<8;i++){
if(i===0){//打印第一行表头部分
document.write("<thead><tr><th>"+"id"+"</th><th>"+"name"+"</th><th>"+"price"+"</th><th>"+"num"+"</th><th>"+"info"+"</th></tr></thead>");
}
else{//打印tbody部分
var s=true;//定义一个变量,控制tbody标签打印一次。
if(s){//如果变量是true,则打印。
document.write("<tbody");
}
document.write("<tr>")//打印每一行的行标签前一半。
for(var b=0;b<5;b++){//循环打印每一个td标签,并将获取到的数据填充。
document.write("<td>"+arr[i-1][b]+"</td>")
}
document.write("</tr>")//打印每一行的行标签的另一半。
if(s){//由上面定义的s变量的值为true可知,打印一次tbody标签的后半部分。
document.write("</tbody")
s=false;//打印一次之后,将s变量的值设置为false,下一次循环就不再打印tbody标签。
}
}
}
document.write("</table>")//打印标签的后半部分,与上面形成一组完整的标签。
}
creatTable(arr3);//调用函数生成表格。
