阅读 721

一个最简单的扁平数组与树形结构相互转换的算法

数组与结构

扁平数组
[
  {
    "id": "01",
    "name": "张大大",
    "pid": "",
    "job": "项目经理"
  },
  {
    "id": "02",
    "name": "小亮",
    "pid": "01",
    "job": "产品leader"
  },
  {
    "id": "03",
    "name": "小美",
    "pid": "01",
    "job": "UIleader"
  },
  {
    "id": "04",
    "name": "老马",
    "pid": "01",
    "job": "技术leader"
  },
  {
    "id": "05",
    "name": "老王",
    "pid": "01",
    "job": "测试leader"
  },
  {
    "id": "06",
    "name": "老李",
    "pid": "01",
    "job": "运维leader"
  },
  {
    "id": "07",
    "name": "小丽",
    "pid": "02",
    "job": "产品经理"
  },
  {
    "id": "08",
    "name": "大光",
    "pid": "02",
    "job": "产品经理"
  },
  {
    "id": "09",
    "name": "小高",
    "pid": "03",
    "job": "UI设计师"
  },
  {
    "id": "10",
    "name": "小刘",
    "pid": "04",
    "job": "前端工程师"
  },
  {
    "id": "11",
    "name": "小华",
    "pid": "04",
    "job": "后端工程师"
  },
  {
    "id": "12",
    "name": "小李",
    "pid": "04",
    "job": "后端工程师"
  },
  {
    "id": "13",
    "name": "小赵",
    "pid": "05",
    "job": "测试工程师"
  },
  {
    "id": "14",
    "name": "小强",
    "pid": "05",
    "job": "测试工程师"
  },
  {
    "id": "15",
    "name": "小涛",
    "pid": "06",
    "job": "运维工程师"
  }
]
复制代码
树形结构
[
  {
    "id": "01",
    "name": "张大大",
    "pid": "",
    "job": "项目经理",
    "children": [
      {
        "id": "02",
        "name": "小亮",
        "pid": "01",
        "job": "产品leader",
        "children": [
          {
            "id": "07",
            "name": "小丽",
            "pid": "02",
            "job": "产品经理",
            "children": []
          },
          {
            "id": "08",
            "name": "大光",
            "pid": "02",
            "job": "产品经理",
            "children": []
          }
        ]
      },
      {
        "id": "03",
        "name": "小美",
        "pid": "01",
        "job": "UIleader",
        "children": [
          {
            "id": "09",
            "name": "小高",
            "pid": "03",
            "job": "UI设计师",
            "children": []
          }
        ]
      },
      {
        "id": "04",
        "name": "老马",
        "pid": "01",
        "job": "技术leader",
        "children": [
          {
            "id": "10",
            "name": "小刘",
            "pid": "04",
            "job": "前端工程师",
            "children": []
          },
          {
            "id": "11",
            "name": "小华",
            "pid": "04",
            "job": "后端工程师",
            "children": []
          },
          {
            "id": "12",
            "name": "小李",
            "pid": "04",
            "job": "后端工程师",
            "children": []
          }
        ]
      },
      {
        "id": "05",
        "name": "老王",
        "pid": "01",
        "job": "测试leader",
        "children": [
          {
            "id": "13",
            "name": "小赵",
            "pid": "05",
            "job": "测试工程师",
            "children": []
          },
          {
            "id": "14",
            "name": "小强",
            "pid": "05",
            "job": "测试工程师",
            "children": []
          }
        ]
      },
      {
        "id": "06",
        "name": "老李",
        "pid": "01",
        "job": "运维leader",
        "children": [
          {
            "id": "15",
            "name": "小涛",
            "pid": "06",
            "job": "运维工程师",
            "children": []
          }
        ]
      }
    ]
  }
]
复制代码

转换算法

「扁平数组」转「树形结构」
function treeing (arr) {
  let tree = []
  const map = {}
  for (let item of arr) {
    // 一个新的带children的结构
    let newItem = map[item.id] = {
      ...item,
      children: []
    }
    if (map[item.pid]) { // 父节点已存进map则在父节点的children添加新元素
      let parent = map[item.pid]
      parent.children.push(newItem)
    } else { // 没有父节点,在根节点添加父节点
      tree.push(newItem)
    }
  }
  return tree
}
复制代码
「树形结构」转「扁平数组」
function flatten (tree, arr = []) {
  tree.forEach(item => {
    const {children, ...props} = item
    // 添加除了children的属性
    arr.push(props)
    if (children) {
      // 递归将所有节点加入到结果集中
      flatten(children, arr)
    }
  })
  return arr
}
复制代码
文章分类
前端
文章标签