js处理树结构数据常用方法

js处理树结构数据常用方法

PS:主要针对处理级联选择器的数据

1. 递归树结构获得全部数据

getTree(list) {
          
   
    const all = []
    const hasChidren = list => {
          
   
        list.forEach(item => {
          
   
            all.push(item)
            if (item.children && item.children.length !== 0) hasChidren(item.children)
        })
    }
    hasChidren(list)
    return all
}

2. 判断树结构同级目录下有无重复数据

judgeSameLabel(list) {
          
   
    let flag = false
    // 设立单独的标识用于中断递归函数
    const recursion = list => {
          
   
        if (flag) return false
        for (let i = 0; i < list.length; i++) {
          
   
            for (let j = i + 1; j < list.length; j++) {
          
   
                if (list[i].label === list[j].label || list[i].value === list[j].value) {
          
   
                    flag = true
                }
            }
            if (list[i].children && list[i].children.length !== 0) {
          
   
                recursion(list[i].children)
            }
        }
    }
    recursion(list)
    return flag
}

3. 根据id查找树结构中的某一项

findItemById(list, id) {
          
   
    let target = null
    const recursion = list => {
          
   
        if (target) return false
        list.forEach(item => {
          
   
            if (item.id === id) {
          
   
                target = item
            } else if (item.children && item.children.length !== 0) {
          
   
                recursion(item.children)
            }
        })
    }
    recursion(list, id)
    return target
}

4. 根据id查找父级路径

findPathById(treeList, id) {
          
   
    const path = []
    try {
          
   
        const getPath = node => {
          
   
            path.push(node)
            if (node.id === id) {
          
   
                throw new Error(GOT IT)
            }
            if (node.children && node.children.length !== 0) {
          
   
                node.children.forEach(item => {
          
   
                    getPath(item)
                })
                path.pop()
            } else {
          
   
                path.pop()
            }
        }
        for (let i = 0; i < treeList.length; i++) {
          
   
            getPath(treeList[i])
        }
    } catch (e) {
          
   }
    return path
}

5. 级联数组删除空children数据

场景:element-ui 级联选择器的如果删除了子项导致子项为空数组,会出现子项选不中的情况

filterEmptyChildren(list) {
          
   
    for (let i = 0; i < list.length; i++) {
          
   
        const item = list[i]
        if (item.children && item.children.length == 0) {
          
   
            item.children = undefined
        } else if (item.children && item.children.length !== 0) {
          
   
            this.filterEmptyChildren(item.children)
        }
    }
}
经验分享 程序员 微信小程序 职场和发展