前端歌谣-第十三课-javascript树形结构化

前言

我是歌谣 最好的种树是十年前 其次是现在 今天继续给大家带来的是javascript树形结构化的讲解

环境配置

npm init -y
yarn add vite -D

修改page.json配置端口

{
  "name": "react_ts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vite --port 3002",
    "server":"ts-node-dev ./server/app.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/express": "^4.17.17",
    "@types/jquery": "^3.5.18",
    "express": "^4.18.2",
    "jquery": "^3.7.1",
    "ts-node-dev": "^2.0.0",
    "typescript": "^5.2.2",
    "vite": "^4.4.9"
  }
}
 

数据部分

const data=[{
    id:2,
    pid:0,
    path:'/course',
    name:"Course",
    title:"课程管理"
},{
    id:3,
    pid:2,
    path:'/course',
    name:"Course",
    title:"歌谣管理"
},{
    id:4,
    pid:3,
    path:'/course',
    name:"Course",
    title:"方方管理"
},
{
    id:4,
    pid:2,
    path:'/course',
    name:"Course",
    title:"康康管理"
},
{
    id:5,
    pid:4,
    path:'/course',
    name:"Course",
    title:"康康管理"
}
]

处理逻辑部分

function formatDataTree(data){
    let parents=data.filter(p=>p.pid===0),
    children=data.filter(c=>c.pid!==0)
   
    dataToTree(parents,children)
    console.log(parents)
    function dataToTree(parents,children){
        parents.map(p=>{
            children.map((c,i)=>{
             if(c.pid===p.id){
                console.log("--------")
                let _children=JSON.parse(JSON.stringify(children))
                _children.splice(i,1)
                console.log(_children,"_children is")
                dataToTree([c],_children)
                if(p.children){
                    p.children.push(c)
                }else{
                    p.children=[c]
                }
             }
           }
    
           ) 
        })
    }
}
 
formatDataTree(data)

运行结果

[
{
“id”: 3,
“pid”: 2,
“path”: “/course”,
“name”: “Course”,
“title”: “歌谣管理”,
“children”: [
{
“id”: 4,
“pid”: 3,
“path”: “/course”,
“name”: “Course”,
“title”: “方方管理”,
“children”: [
{
“id”: 5,
“pid”: 4,
“path”: “/course”,
“name”: “Course”,
“title”: “康康管理”
}
]
}
]
},
{
“id”: 4,
“pid”: 3,
“path”: “/course”,
“name”: “Course”,
“title”: “方方管理”
}
]

处理逻辑2

function formatDataTree(data){
    let _data=JSON.parse(JSON.stringify(data))
    return _data.filter(p=>{
        const _arr=_data.filter(c=>c.pid===p.id);
        _arr.length&&(p.children=_arr)
        return p.pid===0
    })
}

运行结果

[
    {
        "id": 2,
        "pid": 0,
        "path": "/course",
        "name": "Course",
        "title": "课程管理",
        "children": [
            {
                "id": 3,
                "pid": 2,
                "path": "/course",
                "name": "Course",
                "title": "歌谣管理",
                "children": [
                    {
                        "id": 4,
                        "pid": 3,
                        "path": "/course",
                        "name": "Course",
                        "title": "方方管理",
                        "children": [
                            {
                                "id": 5,
                                "pid": 4,
                                "path": "/course",
                                "name": "Course",
                                "title": "康康管理"
                            }
                        ]
                    }
                ]
            },
            {
                "id": 4,
                "pid": 2,
                "path": "/course",
                "name": "Course",
                "title": "康康管理",
                "children": [
                    {
                        "id": 5,
                        "pid": 4,
                        "path": "/course",
                        "name": "Course",
                        "title": "康康管理"
                    }
                ]
            }
        ]
    }
]