Js将扁平的数组转为树形结构

长安有故里

已于 2022-10-24 13:49:01 修改

阅读量265

点赞数

分类专栏： javascript vue 文章标签： JavaScript 树形结构数组转换 reduce parentId

于 2022-10-24 13:47:40 首次发布

本文链接：https://blog.csdn.net/qq_43494333/article/details/127490993

版权

vue 同时被 2 个专栏收录

9 篇文章 1 订阅

订阅专栏

javascript

5 篇文章 0 订阅

订阅专栏

Js将扁平的数组转为树形结构

转换前数据

let data = [
      {
        id: 1,
        value: '颜色',
        parentId: 0
      },
      {
        id: 101,
        value: '红色',
        parentId: 1
      },
      {
        id: 102,
        value: '蓝色',
        parentId: 1
      },
      {
        id: 10201,
        value: '浅蓝色',
        parentId: 102
      },
      {
        id: 2,
        value: '形状',
        parentId: 0
      },
      {
        id: 201,
        value: '矩形',
        parentId: 2
      },
      {
        id: 202,
        value: '圆形',
        parentId: 2
      },
    ]

关键代码

注意reduce第二个参数传空数组[]

const newData = data.reduce((prev, curr, index, arr) => {
      curr.children = arr.filter(v => v.parentId === curr.id)
      if (!curr.parentId) {
        prev.push(curr)
      }
      return prev
 }, [])