Как JavaScript обрабатывает добавление, удаление, изменение и запрос данных с древовидной структурой?

Описание проблемы: JS обрабатывает добавление, удаление, изменение и запрос древовидных структур.

Недавно я разрабатывал модуль управления разрешениями для внутренней системы управления, который включает в себя логику обработки данных различных древовидных структур, таких как: добавление, удаление. , модификация, запрос и т. д.; по сравнению с обычными данными структуры массива, обработка древовидной структуры не так интуитивна, как массива, но требует еще одного шага — рекурсивного поиска для выполнения глубокого обхода данных. Здесь блоггер также подведет итог процесса разработки. Я поделюсь методом, который придумал. Эта статья даст вам полное представление об обработке данных в древовидной структуре JS:

Пример структуры данных

let data = [{
        идентификатор: 1,
        метка: «Уровень 1»,
        дети: [{
          идентификатор: 4,
          метка: «Уровень 1–1»,
          дети: [{
            идентификатор: 9,
            метка: «Уровень 3 1-1-1»
          }, {
            идентификатор: 10,
            метка: «Уровень 3 1-1-2»
          }]
        }]
      }, {
        идентификатор: 2,
        метка: «Уровень 2»,
        дети: [{
          идентификатор: 5,
          этикетка: «Уровень 2–1»
        }, {
          идентификатор: 6,
          этикетка: «Уровень 2–2»
        }]
      }, {
        идентификатор: 3,
        метка: «Уровень 3»,
        дети: [{
          идентификатор: 7,
          этикетка: «Уровень 2 3-1»
        }, {
          идентификатор: 8,
          этикетка: «Уровни 3–2»
        }]
      }]

Решение:

1. Добавьте новый узел

, чтобы найти указанный узел в древовидной структуре и добавить новый дочерний узел. Код следующий:

const AppendNodeInTree = (id,tree,obj) => {.
  Tree.forEach(ele=> {
    если (ele.id === id) {
      ele.children ? ele.children.push(obj) : ele.children = [obj]
    } еще {
      если (ele.дети) {
        appendNodeInTree(id, ele.children, obj)
      }
    }
  })
  вернуть дерево
}

2. Удалить узел.

Найти указанный узел в древовидной структуре и удалить узел. Код следующий

const removeNodeInTree=(treeList, id)=> { // Удалить элементы из массива (деревовидной структуры) по идентификатору if. (!treeList || ! TreeList.length) {
    возвращаться
  }
  for (пусть я = 0; я <treeList.length; я++) {
    если (treeList[i].id === id) {
      TreeList.splice(я, 1);
      перерыв;
    }
    удалитьNodeInTree(treeList[i].children, id)
  }
}

3. Измените узел

для рекурсивного поиска и изменения статуса узла. Код выглядит следующим образом:

const updateNodeInTree=(treeList,id, obj)=> {.
      if (!treeList || !treeList.length) {
        возвращаться;
      }
      for (пусть я = 0; я <treeList.length; я++) {
        если (treeList[i].id == id) {
          TreeList[i]= объект;
          перерыв;
        }
        updateNodeInTree(treeList[i].children,id,obj);
      }
    }

4. Рекурсивно найдите узел

, чтобы найти узел в узле дерева, код:

const findNodeInTree = (данные, ключ, обратный вызов) => {
      for (пусть я = 0; я <data.length; я++) {
        if (data[i].key == ключ) {
          обратный обратный вызов (данные [i], я, данные)
        }
        если (данные[i].дети) {
          findNodeInTree (данные[i].дети, ключ, обратный вызов)
        }
      }
    }

    //Метод сохранения найденного узла let Obj={}
    findNodeInTree(данные, ключ, (элемент, индекс, обр.) => {
      Объект = элемент
    })

    // Это узел, который нужно найти, соответствующий Obj console.log(Obj)