查找树形数据的某个值

很多场景都需要使用树形数据,比如:一级菜单 - 二级菜单、省-市-区、公司-部门-小组、界-门-纲-目-科-属-种 等等。
数据结构通常如下所示(以下代码为ts写法):

const groupList: Group[] = [
  {
    groupId: '0',
    groupName: '江西省',
    isDefaultGroup: '0',
    children: [
      {
        groupId: '0-0',
        groupName: '赣州市',
        isDefaultGroup: '0',
        children: [
          {
            groupId: '0-0-0',
            groupName: '瑞金市',
            isDefaultGroup: '0',
          },
        ],
      },
    ],
  },
  {
    groupId: '1',
    groupName: '浙江省',
    isDefaultGroup: '1',
    children: [
      {
        groupId: '1-0',
        groupName: '杭州市',
        isDefaultGroup: '0',
        children: [
          {
            groupId: '1-0-0',
            groupName: '西湖区',
            isDefaultGroup: '0',
          },
        ],
      },
    ],
  },
  {
    groupId: '2',
    groupName: '江苏省',
    isDefaultGroup: '0',
    children: [
      {
        groupId: '2-0',
        groupName: '南京市',
        isDefaultGroup: '0',
        children: [
          {
            groupId: '2-0-0',
            groupName: '中华门',
            isDefaultGroup: '0',
          },
        ],
      },
    ],
  },
];

已知groupId1-0-0如何找到它对应的名字:西湖区呢???

思路:

  1. 输入树形数据、需要匹配的字段、需要匹配字段的值、需要查找的字段。
  2. 遍历数组直到找出groupId1-0-0的对象。
  3. 保存结果并返回需要查找的字段的值。

知识点

  1. 闭包
  2. 递归

实现

// 以下代码有ts报错,知道怎么解决的请告诉我

const findFieldValue = <T>(treeData: T[], key: string, value: string | number, field: string): string | number | boolean | null => {
  let res: string | number | null = null;
  const fn = (treeData: T[], key: string, value: string | number, field: K) => {
    if (!treeData?.length) return key;
    for (let index = 0; index < treeData.length; index++) {
      if (treeData[index][key] === value) {
        res = treeData[index][field];
        break;
      }
      if (treeData[index]?.children?.length) {
        fn(treeData[index].children, key, value, field);
      }
    }
  };
  fn(treeData, key, value, field);
  return res;
}

结果

	cosole.log(findFieldValue(treeData, 'groupId', '1-0-0', 'title')) // 西湖区

你可能感兴趣的:(业务,数据结构,js,typescript)