Как js получает идентификатор или имя, соответствующее узлу в древовидной структуре (используя рекурсию)

Недавно мы внезапно столкнулись с запросом, то есть когда мы получаем данные структуры дерева, если мы знаем id определенного узла, как найти его соответствующее имя, или мы знаем id последнего дочернего узла, как узнать какие узлы есть у его родителя и каковы их соответствующие идентификаторы узлов, классическим примером является пример каскадного селектора (el-cascader) в пользовательском интерфейсе Ele.me:

const options = [
  {
    id: 'zhinan',
    name: '指南',
    children: [
      {
        id: 'shejiyuanze',
        name: '设计原则',
        children: [
          {
            id: 'yizhi',
            name: '一致',
            children:[
               {
                  id:'yizhi1',
                  name: '一致1',  
               },     
               {
                  id:'yizhi2',
                  name: '一致2',  
               },   
            ]    
          },
          {
            id: 'fankui',
            name: '反馈'
          }
        ]
      },
      {
        id: 'daohang',
        name: '导航',
        children: [
          {
            id: 'cexiangdaohang',
            name: '侧向导航'
          },
          {
            id: 'dingbudaohang',
            name: '顶部导航'
          }
        ]
      }
    ]
  }
];

Изображение выше представляет собой стандартные данные древовидной структуры, многомерный массив, один слой и один слой. Как правило, фон данных будет записан нам, и идентификатор не должен повторяться, чтобы мы могли следить. Теперь, если мы только знаем, что идентификатор «shejiyuanze», так как же найти соответствующее имя? Ниже приведен рекурсивный метод, вызовите этот метод напрямую и поместите в него идентификатор и его данные.

  function findNameById(id, data) {
        for (let i = 0; i < data.length; i++) {
            if (data[i].id === id) {
               return data[i].name;  //名称
            } else if (data[i].children) {
            const result = findNameById(id, data[i].children);
            if (result) {
                return result;
              }
            }
        }
        return null;
   }

  //调用
  findNameById('shejiyuanze',options)

После того, как это решение завершено, возникает внезапная проблема, потому что используется каскадный селектор, когда вы хотите отобразить данные, иногда фон дает вам только идентификатор, так как же вы можете найти соответствующий родительский набор идентификаторов? вверх. Вот еще один рекурсивный метод:

//根据 最后一项的id 获取所有父级的id
    function findParentIdsById(id, data, parentIds = []) {
        for (let i = 0; i < data.length; i++) {
          if (data[i].id === id) {
            return parentIds;
          } else if (data[i].children) {
            const result = findParentIdsById(id, data[i].children, [...parentIds, data[i].id]);
            if (result) {
              return result;
            }
          }
        }
        return null;
    }

 //调用
 findParentIdsById('yizhi1',options)

Затем передайте идентификатор и исходные данные, и вы получите все идентификаторы родительского узла, соответствующие текущему идентификатору, который представляет собой набор массивов.

Примечание. Этот массив не содержит текущий идентификатор, который вы передали. Если вы хотите отобразить данные, не забудьте передать текущий идентификатор в массив.

Таким образом  будет получен массив id, соответствующий эль-каскадеру, и параметры будут присвоены обратно, а селектор каскада будет эхом.

Если вы не понимаете, вы можете прокомментировать и оставить сообщение. . .