js中树与数组的相互转化（树的子节点若为空隐藏children字段）

写博客是为了记笔记

前言

在使用elmentUI或者antUI等中的 cascader 级联选择器时 ，需要树级结构，有时就会需要进行树与数组的相互转换，这里的树与数组的转化将子children为空时省去了，避免出现选择时空白页的情况（如图一）

---

一、树转数组

   treeToArray(list, newArr = []) {
      list.forEach(item => {
        const { children} = item
        if (children) {
          delete item.children
          if (children.length) {
            newArr.push(item)
            return this.treeToArray(children, newArr)
          }
        }
        newArr.push(item)
      })
      return newArr
    }

二、数组转树

listToTree(list, parentId = null) {
      return list.filter(item => item.parentId === parentId).map(item => {
        let children= this.listToTree(list, item.id)
        if (children.length > 0) {
          return {
            ...item,
            children
          }
        } else {
          return {
            ...item
          }
        }
      })
    }

三、使用

1.data中定义的数据(树)options

 options: [
         {
            value: 'zhinan',
            label: '指南',
            parentId:'0',
            id: "aa",
            children: [
               {
                  value: 'shejiyuanze',
                  label: '设计原则',
                  parentId:'aa',
                  id: "aa01",
                  children: [
                     {
                        value: 'yizhi',
                        label: '一致',
                        parentId:'aa01',
                        id: "aa0101",
                     }, 
                     {
                        value: 'fankui',
                        label: '反馈',
                        parentId:'aa01',
                        id: "aa0102",
                     }, 
                  ]
               }, 
            ]
         }, 
         {
            value: 'zujian',
            label: '组件',
            parentId:'0',
            id: "bb",
            children: [
               {
                  value: 'basic',
                  label: 'Basic',
                  parentId:'bb',
                  id: "bb01",
                  children: [
                     {
                        value: 'layout',
                        label: 'Layout 布局',
                        parentId:'bb01',
                        id: "bb0101",
                     }, 
                  ]
               }, 
               {
                  value: 'form',
                  label: 'Form',
                  parentId:'bb',
                  id: "bb02",
                  children: []
               },  
            ]
         }, 
      
         ],

2.使用树转数组（注意转成数组时默认删除children属性）

let list = this.treeToArray(this.options)
console.log("list",list)

2.使用数组转树

let tree = this.listToTree(list,list[0].parentId)
console.log("tree",tree)

注意这里当children为[]时，默认不挂载children属性

---