js 面向对象操作树形数据，可以查找指定数据，父级数据，子集，路径数组，可以做到树形数据溯源

本文介绍了一种对树形数据结构进行改造的方法，通过添加层级和唯一路径ID，便于管理和检索。提供了具体实现代码及示例。

话不多说，思路就是给每层添加唯一的路径id，层级，可以自己继续扩展方法
main.js文件

export class ChangeTree{
  constructor(tree){
    this.treeData = tree
    this.treeData_temp = []
  }
  // 判断是否为数组
  validArr(arr,funName){
    if(!(arr instanceof Array)){
      throw new TypeError( funName + ' 只接受Array')
    }
  }
  // 对树型数据进行改造
  changeData(){
    this.validArr(this.treeData,'changeData')
    this.treeData_temp = JSON.parse(JSON.stringify(this.treeData))
    this.handleData(this.treeData_temp)
    return this.treeData_temp
  }
  // 操作树-工具函数
  handleData(arr,level = 0,fId = null){
    arr.forEach((item,index)=>{
      item['level'] = level // 添加level属性
      item['fId'] = fId // 添加fId属性 ：父id
      item['selfId'] = fId === null ? index + '' : fId + '-' + index
   })
   if(arr.length > 0){
      level = level + 1
    }
    for(let i = 0 ;i < arr.length;i++){
      if(arr[i].children && arr[i].children.length > 0){
        this.handleData(arr[i].children,level,arr[i].selfId)
      }
    }
  }
  // 递归查找
  findData(id){
    const data = this.handleFindData(this.treeData_temp,id)
    return data
  }
  // 工具函数
  handleFindData(arr,id){
    let arr_temp = []
    const funFind = (arr)=>{
      for(let i = 0 ;i < arr.length;i++){
        if(arr[i].selfId == id){
          arr_temp = arr[i]
          break;
        }
        if(arr[i].children && arr[i].children.length > 0){
          funFind(arr[i].children)
        }
      }
    }
    funFind(arr)
    return arr_temp;
  }
  // 获取改造后的树
  getHandleData(){
    const tree = this.changeData();
    return tree
  }
  // 获取当前的数据
  getNodeData(id){
    return this.findData(id)
  }
  // 获取父级数据
  getFatherData(id){
    let idArr = id.split('-')
    if(idArr.length > 1){ //判断截取字符串长度是否大于1，大于1说明有父级
      idArr.pop()
    }else{
      return []
    }
    const fid = idArr.join('-')
    return this.getNodeData(fid)
  }
  // 获取路径数组
  getAncestors(id){
    const idArr = id.split('-')
    const arr_temp = JSON.parse(JSON.stringify(idArr))
    let arr = []
    idArr.forEach((item)=>{
      const arr_join =  arr_temp.join('-')
      arr.push(arr_join)
      arr_temp.pop()
    })
    return arr.reverse()
  }
  // 获取子集数组
  getChildrenData(id){
    const nodeData = this.getNodeData(id) //获取当前数据
    if(nodeData.children){
      return nodeData.children
    }else{
      return null
    }
    
  }
}

html文件中

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<script type="module">
			import { ChangeTree } from "./main.js";
			const treeData = [
				{
					orgId: "1",
					orgName: "John Brown sr.",
					roleId: "",
					roleName: null,
					parentId: "",
					optional: 0,
					selected: 1,
					children: [
						{
							orgId: "",
							orgName: "",
							roleId: "11",
							roleName: "管理员",
							parentId: "1",
							optional: 1,
							selected: 0,
						},
						{
							orgId: "",
							orgName: "",
							roleId: "12",
							roleName: "测试员",
							parentId: "1",
							optional: 1,
							selected: 0,
						},
						{
							orgId: "13",
							orgName: "test1",
							roleId: "",
							roleName: null,
							parentId: "1",
							optional: 1,
							selected: 0,
						},
						{
							orgId: "14",
							orgName: "test2",
							roleId: "",
							roleName: null,
							parentId: "1",
							optional: 1,
							selected: 0,
							children: [
								{
									orgId: "",
									orgName: null,
									roleId: "141",
									roleName: "测试员",
									parentId: "1",
									optional: 1,
									selected: 0,
								},
							],
						},
					],
				},
      ];
      const change_tree = new ChangeTree(treeData) //初始化数据
      const tree_temp = change_tree.getHandleData() //获取改造后的数据
      console.log('改造后数组',tree_temp)
      const nodeData = change_tree.getNodeData('0-0')
      console.log('当前数据',nodeData)
      const fatherData =  change_tree.getFatherData('0-1')
      console.log('当前数据的爸爸',fatherData)
      const ancestors = change_tree.getAncestors('0-2')
      console.log('当前数据的路径selfId 数组',ancestors)
      const childrenData = change_tree.getChildrenData('0-2')
      console.log('当前数据的子集 ',childrenData)
		</script>
	</body>
</html>

这里面采用了script的module类型，可以根据自己的需求自行修改
注：type为module 和没有type 的script标签数据不共享