如何实现平级数据的树形转换？

问题： 从后台接收的数据是列表项，但是渲染页面需要树形结构数据，每条数据中，都有一个pid和id字段，pid代表父级的id，0代表是一级菜单,id 为当前菜单的唯一标识

以下为模拟的平级数据:

[
{element:'图片',id:'1',pid:'0'},//count=1 
{element:'大图片',id:'2',pid:'1'}, {element:'png',id:'3',pid:'2'}, {element:'jpeg',id:'4',pid:'2'}, {element:'gif',id:'5',pid:'2'}, {element:'gif11',id:'6',pid:'5'}, {element:'gif111',id:'7',pid:'6'}, {element:'gif222',id:'8',pid:'6'}, 
{element:'文字',id:'9',pid:'0'}, 
{element:'宋体',id:'10',pid:'9'}, 
{element:'宋体111',id:'11',pid:'10'},
{element:'宋体222',id:'12',pid:'10'},
{element:'黑体',id:'13',pid:'9'}
]

以下为树状数据格式：

列表项数据结构 
var list=[
    {id:1, pid:'0', name:'settnig'},
    {id:2, pid:'1', name:'setting-chird'},
    ...
]
树形结构
var targetList=[
    {
    id:1, pid:'0', 
    name:'settnig',
    children:[
        {id:2, pid:'1', name:'setting-chird'},
        ...
    ],
    ...
]

关系图 使用递归算法实现

function tranListToTreeData(list, rootValue) {
  // 声明一个数组用来接收符合条件的元素
  var arr = []
  // 注意我们在查找时一定不能是写死的条件
  list.forEach(item => {
     根据id找所有子节点
    if (item.pid === rootValue) {
      // 将找到的父节点追加到数组中
      arr.push(item)
      // 根据父亲的ID找他的孩子
      const children = tranListToTreeData(list, item.id)
      // 同时将找到的孩子放到父亲的children树形里
      if (children.length) {
        item.children = children
      }
    }
  })
  // 最后返回操作完的数组
  return arr
}