js数组转换tree树状结构

最新推荐文章于 2024-09-13 23:50:28 发布

新时代农民工Top

最新推荐文章于 2024-09-13 23:50:28 发布

阅读量1.1k

点赞数 10

分类专栏： vue javaScript 文章标签： javascript

本文链接：https://blog.csdn.net/web00_11/article/details/119392106

版权

vue 同时被 2 个专栏收录

35 篇文章 3 订阅

订阅专栏

javaScript

30 篇文章 3 订阅

订阅专栏

数组转成对象

const arr = [
        { label: '男', value: 0 },
        { label: '女', value: 1 }
      ]
转换为： 
     {0: '男', 1:'女'}

具体代码实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const arr = [
        { label: '男', value: 0 },
        { label: '女', value: 1 }
      ]
      function f(arr) {
        // reduce
        return arr.reduce((sum, item) => {
          // 利用对象的新增，给对象传值
          sum[item['value']] = item['label']
          return sum
        }, {})
      }
      const obj = f(arr) // obj ===> {0: '男', 1:'女'}
      console.log(obj)
    </script>
  </body>
</html>

对象转成数组

const obj = { 0: '男', 1: '女' }
转换为：
[{label: '男', value: 0},{label: '女', value: 1}]

具体代码实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const obj = { 0: '男', 1: '女' }
      function f(obj) {
        // 写代码
        let arr = [] // 由于最终结果要的是一个数组，所以先定义一个空数组
        let newObj = {} // 数组里面的每一项是个对象，所以定义一个空对象
        for (let key in obj) {
          // 遍历参数对象，把对应的键传给定义的对象的 value ，把对应的值给定义的 label
          newObj = { label: obj[key], value: key * 1 }
          // 把得到的新对象添加到定义好的空数组中
          arr.push(newObj)
        }
        // return 最后的结果
        return arr
      }
      const arr = f(obj) // arr ===>  [{label: '男', value: 0},{label: '女', value: 1}]
      console.log(arr)
    </script>
  </body>
</html>

数组转成树

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: "运维工程师"}
]
转换为：
data: [{
        label: '张大大',
        children: [
          {
          	label: '小亮',
          	children: [{label: '小丽'}，{label: '大光'}]
        	},
          {
          	label: '小美',
          	children: [{label: '小高'}]
        	},
          {
          	label: '老马',
          	children: [{label: '小刘'}，{label: '小华'},{label: '小李'}]
        	},
          {
          	label: '老王',
          	children: [{label: '小赵'}，{label: '小强'}]
        	},
          {
          	label: '老李',
          	children: [{label: '小涛'}]
        	}
      	]
      }]

具体代码实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      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>
  </body>
</html>