将数组转为树

news/2024/7/19 15:13:55 标签: js
const data = [
        { 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: '运维工程师' }
      ]

      // 完成代码
      function arrToTree(data) {
        // 你的代码
        // 先把传进来的数据的 name 修改为 label 再删除 name
        data.map(item => {
          item.label = item.name
          delete item.name
        })
        // 声明空数组 接收最后的结果
        let arr = []
        // 定义空对象 接收每个人的信息并准备划分层级
        let obj = {}
        // 判断传送进来的值是否为数组,可以使用Array.isArray()方法判断,也可以用instanceof Array 进行判断
        if (!(data instanceof Array)) {
          return arr
        }
        // 循环 data 先把所有的数据放进一个对象里
        data.forEach(item => {
          obj[item.id] = item
        })
        // 定义遍历删除id、job、pid的方法
        function del(del) {
          return del.forEach(i => {
            delete i.id
            delete i.job
            delete i.pid
          })
        }
        data.forEach(item => {
          if (obj[item.pid]) {
            if (obj[item.pid].children) {
              obj[item.pid].children.push(item)
              // 遍历删除id、job、pid
              del(obj[item.pid].children)
            } else {
              ;(obj[item.pid].children = []).push(item)
              del(obj[item.pid].children)
            }
          } else {
            arr.push(item)
            del(arr)
          }
        })
        return arr
      }
      // 目标:
      const treeData = arrToTree(data)
      console.log(treeData)
    </script>


http://www.niftyadmin.cn/n/482523.html

相关文章

数组-拷贝

//map()用法&#xff0c;经过函数处理符合条件的放在新数组里&#xff0c;返回这个新数组 const newArrthis.channelList.map(obj>{ const newObj{...obj} //将对象卸载在原地&#xff0c;也就是放在新数组中 return newObj })

搜索-历史记录数据去重: Array.from ()里面部署了很多的接口对象,利用set可以实现数组去重

let str[ 1,2,3,4,5,1,2,,7,8] let str1Array.from(new Set(str) ) // new Set 是实现数组去重、Array.from() 把去重后转换为数组

一级路由path是‘/’,二级children下的path

{path:/home,component:()>import(组件路径)&#xff0c;children&#xff1a;[path:/tree,component:()>import(组件路径)]} //如果path&#xff1a;/tree带着/&#xff0c;地址栏直接就是/tree&#xff0c;不会带着一级路由的路径&#xff0c;跳转到子路由的页面如果pa…

query和params之间的区别

1.query要用path来引入&#xff0c;params要用name来引入 2.接收参数时&#xff0c;分别是this.$route.query.name和this.$route.params.name 3.query更加类似于ajax中get传参&#xff0c;而params类似与post&#xff0c;前者在浏览器的地址栏中显示&#xff0c;params不显示…

VUE项目运行基本过程

main.js是项目的入口&#xff0c;webpack会根据main.js将所有js文件嵌入到打包后build文件夹下的index.html里。 build文件夹下&#xff0c;index.html的由来是由public下的index.html而来的&#xff0c; public下的index.html里有 <div id"app"></div>…

MongoDB错误:Command failed: mongorestore -h 127.0.0.1:27017 -d people ./src/doc/database --drop

错误信息: 错误原因&#xff1a;没有正常关闭MongoDB(应使用CtrlC关闭) 解决&#xff1a;打开服务启动即可 在命名行输入&#xff1a;npm start

数组常用方法总结

前言 数组的方法总结 一、可分类数组方法 1.添加类&#xff1a; var fruits[Apple,Banana] 添加元素到数组末尾&#xff1a;var newArray fruits.push(Orange) 添加元素到数组的头部&#xff1a;var newArrayfruits.unshift(Strawberry) 2.删除类&#xff1a; 删除末尾元素…

如何在新项目使用svg-icon组件 步骤

1.安装依赖npm i svg-sprite-loader4.1.3 2.配置 vue.config.js const path require(path) function resolve (dir) {return path.join(__dirname, dir) } 补充一个配置{ } const path require(path) function resolve (dir) {return path.join(__dirname, dir)module.exp…