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": "康康管理"
                    }
                ]
            }
        ]
    }
]

总结

我是歌谣 想加入前端巅峰人才交流群私信我

点击上方 蓝字 关注我们

点个在看你最好看

下方查看历史文章

原生+TS实现todolist效果

Vue3+typesctipt实现todolist效果

关于面向对象

关于this指向