分享關於遞歸樹形結構增刪改查的方法

在使用樹形節點或級聯組件時常常會碰到根據id處理數據的情況
下麵為大家簡單介紹關於節點遞歸增刪改查方法

1. 根據目標id刪除指定節點

/**
 * 根據目標id刪除指定節點
 * @param {*} list 數據源
 * @param {*} targetId 目標id
 */
function deleteNodeById(list, targetId) {
  if (!list) return
  list.forEach((item, index) => {
    if (item.id === targetId) {
      list.splice(index, 1)
      return
    } else {
      if (Array.isArray(item.children) && item.children.length) {
        deleteNodeById(item.children, targetId)
      }
    }
  })
}

2. 根據目標id查找指定節點

/**
 * 根據目標id查找指定節點
 * @param {*} list 數據源
 * @param {*} targetId 目標id
 */
function selectNodeById(list, targetId) {
  if (!list) return
  let nodeTree = null
  for (let i = 0; i < list.length; i++) {
    if (nodeTree !== null) break
    let node = list[i];
    if (node.id === targetId) {
      nodeTree = node
      break
    } else {
      if (Array.isArray(node.children) && node.children.length) {
        nodeTree = selectNodeById(node.children, targetId)
      }
    }
  }
  return nodeTree
}

3. 添加節點到目標id下

/**
 * 添加節點到目標id下
 * @param {*} list 數據源
 * @param {*} targetId 目標id
 * @param {*} obj 目標對象
 */
function appendNodeById(list, targetId, obj) {
  if (!list) return
  list.forEach(item => {
    if (item.id === targetId) {
      item.children ? item.children.push(obj) : item['children'] = obj
    } else {
      if (Array.isArray(item.children) && item.children.length) {
        appendNodeById(item.children, targetId, obj)
      }
    }
  })
}

4. 修改目標id數據

/**
 * 修改目標id數據
 * @param {*} list 數據源
 * @param {*} targetId 目標id
 * @param {*} obj 目標對象
 */
function updateNodeById(list, targetId, obj) {
  if (!list) return
  list.forEach((item, index) => {
    if (item.id === targetId) {
      list.splice(index, 1, obj)
      return
    } else {
      if (Array.isArray(item.children) && item.children.length) {
        updateNodeById(item.children, targetId, obj)
      }
    }
  })
}

歡迎大家評論，如有幫助可以關註+收藏，我會經常更新博客，大家一起討論學習