树🌲过滤小技巧

• 根据关键字搜索树🌲型结构
• 如果父级不含有关键字而子集含有，则父级也要展示
• 如果父级不含有关键字且子集也不含有，则父级子集都不展示

💩比如给你下面这些数据，展示关键字搜索classname的结果，你会怎么做🤔：

const list = [
  {"classname":"资产管理业务","createman":"admin","classcode":"16y1sz0yv96","grade":1,"parentclasscode":"0","dataclasscodes":""},
  {"classname":"柜台业务","createman":"admin","classcode":"1pumsso1wgb","grade":1,"parentclasscode":"0","dataclasscodes":""},
  {"classname":"托管业务","createman":"admin","classcode":"j0oqdtrn1z","grade":1,"parentclasscode":"0","dataclasscodes":""},
  {"classname":"经纪业务","createman":"admin","classcode":"1emjc0w9v5a","grade":1,"parentclasscode":"0","dataclasscodes":""},
  {"classname":"管理平台","createman":"admin","classcode":"16y1sz0yv76","grade":1,"parentclasscode":"16y1sz0yv96","dataclasscodes":""},
  {"classname":"销售管理","createman":"admin","classcode":"1pumsso1wjiqwe","grade":1,"parentclasscode":"1pumsso1wgb","dataclasscodes":""},
  {"classname":"服务介绍","createman":"admin","classcode":"j0oqdtrn1zqwe","grade":1,"parentclasscode":"j0oqdtrn1z","dataclasscodes":""},
  {"classname":"资金总务","createman":"admin","classcode":"1emjc0w90965","grade":1,"parentclasscode":"1emjc0w9v5a","dataclasscodes":""},
  {"classname":"前期总台","createman":"admin","classcode":"16y1szdfjgref","grade":1,"parentclasscode":"16y1sz0yv76","dataclasscodes":""},
  {"classname":"咨询评价","createman":"admin","classcode":"1pumssosfweu","grade":1,"parentclasscode":"1pumsso1wjiqwe","dataclasscodes":""},
  {"classname":"服务介绍","createman":"admin","classcode":"j0oqdtrered","grade":1,"parentclasscode":"j0oqdtrn1zqwe","dataclasscodes":""},
  {"classname":"物流纵向","createman":"admin","classcode":"1emjc0eerb","grade":1,"parentclasscode":"1emjc0w90965","dataclasscodes":""},
  {"classname":"物流咨询纵向","createman":"admin","classcode":"1emjc1234","grade":1,"parentclasscode":"16y1sz0yv76","dataclasscodes":""},
  {"classname":"咨询资金","createman":"admin","classcode":"1emjc1234","grade":1,"parentclasscode":"1emjc0w90965","dataclasscodes":""}
];

🚀1、首先我们先把数据按父级分类

const dataDict = {};

for (let i = 0, len = list.length; i < len; i++) {
  const pareCode = list[i].parentclasscode;
  if (!dataDict[pareCode]) dataDict[pareCode] = [];
  dataDict[pareCode].push(list[i]);
}

🚀2、接下来我们对分类的数据做过滤了（这里面要思考一下下的🤔）

const getTreeData = (data, val) => {
  const dict = JSON.parse(JSON.stringify(data));
  if (!val) return dict;
  const getLevelChildren = (arr, pareCode = '0', gradeCodeList=[]) => {
    const drop = [];
    for (let i = 0, len = arr.length; i < len; i++) {
      const getList = dict[arr[i].classcode];
      if (getList) {
        getLevelChildren(getList, arr[i].classcode, [...gradeCodeList, pareCode])
      } else {
        if (arr[i].classname.indexOf(val) < 0) {
          drop.push(arr[i].classcode);
        }
      }
    }
    if (drop.length && drop.length < arr.length) {
      if (dict[pareCode]) dict[pareCode] = dict[pareCode].filter((item) => drop.indexOf(item.classcode) < 0)
    }
    if (drop.length === arr.length) {
      delete dict[pareCode];
      if (gradeCodeList.length > 0) {
        const gradeCode = gradeCodeList.pop();
        getLevelChildren(dict[gradeCode], gradeCode, gradeCodeList)
      }
    }
  };
  getLevelChildren(dict['0']);
  return dict;
}

🚀3、然后我们对数据做过滤组装树🌲型结构（最后一步啦✅）

const filterDict = getTreeData(dataDict, '咨询');

const parent = filterDict['0'];

const getChildren = (arr) => {
  for (let i = 0, len = arr.length; i < len; i++) {
    const getList = filterDict[arr[i].classcode];
    if (getList) {
      arr[i].children = getList;
      getChildren(arr[i].children)
    }
  }
};

parent && getChildren(parent);

console.log(parent, 'parent====')

通过这样的一个小小的案例里面的逻辑，希望能给作为前端的你一点小小的思考🤔