js对树形结构数组进行扁平化处理,并进行模糊查询。

js树形结构数组扁平化

1、将树形结构——>转化为扁平化数据

应用场景。树状菜单管理。(这里为前端进行模糊查询)
为了实现table表格模糊搜索。 需要把tree形数据,转换为1维数组。

测试数据页面:
js对树形结构数组进行扁平化处理,并进行模糊查询。_第1张图片
自己随便搞的测试数据

[
  {
    "createTime": "2023-04-24 20:50:11",
    "id": 3,
    "menuName": "模型",
    "pid": 0,
    "identifying": null,
    "childSdResourceConfMenu": [
      {
        "createTime": "2023-04-24 19:31:36",
        "id": 2,
        "menuName": "火星",
        "pid": 3,
        "identifying": null,
        "childSdResourceConfMenu": null
      },
      {
        "createTime": "2023-04-25 16:22:44",
        "id": 8,
        "menuName": "3维",
        "pid": 3,
        "identifying": 1,
        "childSdResourceConfMenu": null
      }
      
    ]
  },
  {
    "createTime": "2023-04-24 20:50:33",
    "id": 4,
    "menuName": "3d场景",
    "pid": 0,
    "identifying": null,
    "childSdResourceConfMenu": [
      {
        "id": 6,
        "menuName": "地球",
        "pid": 4,
        "identifying": null,
        "childSdResourceConfMenu": [
          {
            "id": 5,
            "menuName": "普通球地",
            "pid": 6,
            "identifying": 3,
            "childSdResourceConfMenu": null
          }
        ]
      }
      
    ]
  }
]

扁平化处理

//Array.isArray()是JavaScript中的一个方法,用于检测一个变量是否为数组类型,
//如果是数组类型则返回true,否则返回false。这个方法可以用于区分对象和数组类型
list(data){
	//data传入的要进行扁平化的数据
  const res = [];  //要存储的一维数组
   const fn = arr => {
     for (let i = 0; i < arr.length; i++) {
       if (Array.isArray(arr[i].childSdResourceConfMenu)) {
         fn(arr[i].childSdResourceConfMenu);
       } 
       arr[i].childSdResourceConfMenu=undefined  //设置子集为空
       // res.push(arr[i]);   //插入数组后面
       res.unshift(arr[i]);  //插入数组前面
     }
   }
   fn(data);
   return res
 },
//模糊查询方法
 filterHandler() {
     const tableData = this.resourceList
     let date= this.list(tableData);  //将数据扁平化
     let search=this.queryParams.menuName  //要搜索的数据
     const list=[];						//存储 搜索符合的数据
     date.map((item,index)=>{
       if(item.menuName.includes(search)){  //是否包含要搜索的字段
         list.push(item)
       }
     })
     console.log(list)

     this.resourceList=list
   }
 },

你可能感兴趣的:(js计算方法,javascript,前端,elementui)