javascript将JSON Array转为树状结构

我们在项目应用中会有这样一种情况,有一张表是层级的关系,通过parentId来确认层级,但是在页面展示的时候需要把基础的Array数据转化为Tree树状结构,通常的处理方式是递归还处理,但今天分享一种非递归的处理函数。

/**
 * 更新 数组中的 item
 * @param {array} list
 * @param {objecg} item
 * @param {string} idkey
 * @param {string} childrenKey
 */
function jsonArrayToTree(list, idKey, parentKey, childrenKey) {
        const hash = {}
        const r = []
        for (let i = 0; i < list.length; i++) {
          hash[list[i][idKey]] = list[i]
        }
        for (let i = 0; i < list.length; i++) {
          const item = list[i]
          const itemParent = hash[item[parentKey]]
          if (itemParent) {
            !itemParent[childrenKey] && (itemParent[childrenKey] = [])
            itemParent[childrenKey].push(item)
          } else {
            r.push(item)
          }
        }
        return r
}

核心思想是把数组转化为一个hash对象,然后根据parentKey查找父对象,找到了就给父对象添加子数组,没找到就直接push到结果数据,由于javascript中对象是地址引用,所以一次遍历下来就会形成一个tree结构的链条。

以下面数据做测试:

const testArray = [
    {
      id: 1,
      parentId: 0,
      value: 1
    },
    {
      id: 2,
      parentId: 0,
      value: 2
    },
    {
      id: 3,
      parentId: 0,
      value: 3
    },
    {
      id: 4,
      parentId: 1,
      value: 4
    },
    {
      id: 5,
      parentId: 1,
      value: 5
    },
    {
      id: 6,
      parentId: 4,
      value: 6
    },
    {
      id: 7,
      parentId: 2,
      value: 7
    },
    {
      id: 8,
      parentId: 1,
      value: 8
    }
  ]

  console.log(jsonArrayToTree(testArray, 'id', 'parentId', 'children'));

测试结果:

[
        {
          id: 1,
          parentId: 0,
          value: 1,
          children: [
            {
              id: 4,
              parentId: 1,
              value: 4,
              children: [{ id: 6, parentId: 4, value: 6 }]
            },
            { id: 5, parentId: 1, value: 5 },
            { id: 8, parentId: 1, value: 8 }
          ]
        },
        {
          id: 2,
          parentId: 0,
          value: 2,
          children: [{ id: 7, parentId: 2, value: 7 }]
        },
        { id: 3, parentId: 0, value: 3 }
      ]

 

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注