js去除数组中存在上下级关系的值

最新推荐文章于 2023-03-27 14:44:42 发布

Meditate_MasterYi

最新推荐文章于 2023-03-27 14:44:42 发布

阅读量279

点赞数

分类专栏：工作中的零碎知识

本文链接：https://blog.csdn.net/meditate_masteryi/article/details/119616619

版权

工作中的零碎知识专栏收录该内容

18 篇文章 0 订阅

订阅专栏

需求说明：
1. 后台给了一个数组，值为已知树形结构的 id；
2. 这个数组存在上下级关系（也可能跨级存在上下级），且可能会重复
3. 要过滤掉上下级的值，且保留上下级关系中的顶层，不存在上下级关系的依然保留；

例子：
省市区关系图中，
后台给了 [ 河北省、石家庄市、长沙市 ] 所对应的id
全国省市区树形数据已知；
最后保留河北省、长沙市
（因为石家庄属于河北省），
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    let treeData = [
        {
            id: 1,
            value: 1,
            parentId: '',
            children: [
                {
                    id: 4,
                    value: 4,
                    parentId: 1,
                    children: [
                        {
                            id: 7,
                            value: 7,
                            parentId: 4
                        },
                        {
                            id: 8,
                            value: 8,
                            parentId: 4,
                            children: [
                                {
                                    id: 9,
                                    value: 9,
                                    parentId: 8
                                },
                                {
                                    id: 10,
                                    value: 10,
                                    parentId: 9
                                },
                            ]
                        },

                    ]
                },
                {
                    id: 5,
                    value: 5,
                    parentId: 1
                },
                {
                    id: 6,
                    value: 6,
                    parentId: 1
                },
            ]
        },
        {
            id: 2,
            value: 2,
            parentId: ''
        },
        {
            id: 3,
            value: 3,
            parentId: '',
            children: [
                {
                    id: 11,
                    value: 11,
                    parentId: 3,
                },
                {
                    id: 11,
                    value: 11,
                    parentId: 3,
                },
            ]
        },
    ];
    let resIds = [9, 4, 9,8,7,4,3,2, 10, 8, 9, 11,];
    function getNewIds() {
        let newResIds = resIds.reduce((total, next, index, self) => {
            let haveParent = haveParentFn(self, treeData, next);//看看resids 中是否有自己的祖宗
            if (haveParent) {
                //如果有自己的祖宗  就跳过 本节点 循环下次  找到自己的祖宗再放入
                return total
            } else {
                //如果没有自己的祖宗 或者本身就是根节点 就把 next 放到新数组中 next 是需要的根节点
                // 查找 next 对应 树中的 项
                return total.concat(next)
            }
        }, [])
        return newResIds
    }
    //查找所有父级
    function familyTree(arr1, id) {
        let temp = []
        let forFn = function (arr, id) {
            for (let i = 0; i < arr.length; i++) {
                let item = arr[i]
                if (item.id === id) {
                    temp.push(item.id)
                    forFn(arr1, item.parentId)
                    break
                } else {
                    if (item.children) {
                        forFn(item.children, id)
                    }
                }
            }
        }
        forFn(arr1, id)
        return temp
    }
    function haveParentFn(resIds, treeData, targetId) {
        // familyTree 会把自己也放进去  并且是第一条 所以要slice 干掉
        let parentIds = familyTree(treeData, targetId).slice(1);
        // if (parentIds.length > 0) {
        //存在父级 节点证明目标值不是顶层节点
        //看看 resIds 中有没有 父级节点 （交集）
        //如果 存在交集证明 resIds 中有自己的父级
        //如果不存在交集   resIds 中没有自己的父级 要么自己是根节点 所以不存在交集  要么就是不是根节点 也不存在交集
        let resIdsHaveP = resIds.some((t) => {
            return parentIds.includes(t);
        })
        if (resIdsHaveP) {
            // 有祖宗
            return true
        } else {
            // 没有祖宗  自己是根节点
            return false
        }
    }

    function quchong(ary) {
        return ary.reduce((total, next) => {
            if (!total.includes(next)) {
                return total.concat(next)
            } else {
                return total
            }
        }, [])
    }
    console.log(quchong(getNewIds()));// 可能重复 因为 resids 重复  所以要去重
    // 至此 已经 将 数据存在层级关系的 id  进行了过滤
    // next  进行树形结构的拼接即可   for 循环调用 arytoTree 的方法 即可

</script>
</body>
</html>