二维数组转化为表格数据进行渲染

最近做项目的时候遇到这个小小的算法题目，我记录一下。欢迎发现我这篇文章的朋友给我提供更简单的转化方案，，，

首先我们拿到一个很有意思的二维数组，如下：

let arr = [  ["姓名", "年龄", "身份证号",],
  ["蔡徐坤", "100", "420115212320125230",],
  ["吴亦凡", "100", "420114201236201254",],
 ]

我们要把他转化为像这样的表格：

怎么转化才能显示呢？

我想到了用for循环，那好开干。。。

    // 我们先定义两个表格渲染需要用到的数组
    let tableNamesData = [] // 表格名数组
    let tableData = []      // 表格数据
    // 再定义空对象
    let obj = {}
    // 第一步：
    // 把表格名:label 和渲染字段:prop 先给循环出来
    for (let i = 0; i < arr[0].length; i++) {
      const item = arr[0][i];
      tableNamesData.push({label: item, prop: item})
    }
    // 第二步：
    // 双重循环
    // 把表格数据:tableData 先给循环出来
    for (let i = 1; i < arr.length; i++) {
      for (let j = 0; j < arr[i].length; j++) {
        obj[tableNamesData[j].label] = arr[i][j]
      }
      tableData.push(obj)
      obj = {}
    }
    // 如果有家人们不知道双重循环怎么实现的，可以在循环里面打印一步一步看哦！！！
    console.log(tableNamesData); // [{"label": "姓名", "prop": "姓名"}, {"label": "年龄", "prop": "年龄"}, {"label": "身份证号", "prop": "身份证号"}]
    console.log(tableData) // [{"姓名": "蔡徐坤", "年龄": "100", "身份证号": "420115212320125230"},{"姓名": "吴亦凡", "年龄": "100", "身份证号": "420114201236201254"}]
    // 最后就完成啦！！！

最后怎么 渲染到表格就不用我演示了把，如果要就评论找我哦。

家人们要是觉得我这种复杂了可以评论让我学习一下，谢谢啦！