¿Cómo js obtiene la identificación o el nombre correspondiente a un nodo en la estructura de árbol (usando la recursividad)?

Recientemente, de repente nos encontramos con una demanda, es decir, cuando obtenemos los datos de la estructura de árbol, si sabemos la identificación de un determinado nodo, cómo encontrar su nombre correspondiente, o sabemos la identificación del último nodo secundario, cómo Saber qué nodos tiene su padre y cuáles son sus ID de nodo correspondientes, un ejemplo clásico es el ejemplo del selector en cascada (el-cascader) en la interfaz de usuario de 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: '顶部导航'
          }
        ]
      }
    ]
  }
];

La imagen de arriba es una estructura de árbol de datos estándar, una matriz multidimensional, una capa y una capa. Generalmente, el fondo de datos se escribirá en nosotros y la identificación no debe repetirse, para que podamos hacer un seguimiento. Ahora, si solo sabemos que la identificación es 'shejiyuanze', entonces, ¿cómo encontrar el nombre correspondiente? El siguiente es un método recursivo, llame a este método directamente y coloque la identificación y sus datos en él.

  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)

Una vez que se completa esta solución, hay un problema repentino, porque se usa el selector en cascada, cuando desea repetir los datos, a veces el fondo solo le da una identificación, entonces, ¿cómo puede encontrar el conjunto de identificación principal correspondiente? arriba. Aquí hay otro método recursivo:

//根据 最后一项的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)

Luego pase la identificación y los datos de origen, y obtendrá todas las identificaciones del nodo principal correspondientes a la identificación actual, que es un conjunto de matrices.

Nota: Esta matriz no contiene la identificación actual que pasó. Si desea repetir los datos, recuerde enviar la identificación actual a la matriz.

De esta forma,  se obtendrá una matriz de id correspondiente a el-cascader, y se volverán a asignar los parámetros, y se repetirá el selector de cascada.

Si no entiendes, puedes comentar y dejar un mensaje. . .

Supongo que te gusta

Origin blog.csdn.net/qq_42174597/article/details/131418361
Recomendado
Clasificación