dom对比差异_js插件详情比对-优快云博客

本文链接：https://blog.youkuaiyun.com/a501760843/article/details/136606538
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let oldTreeList = [
            { id: 1, lv: 1, tecName: '基础科学-1', belong: 'node1' },
            { id: 2, lv: 2, tecName: '基础科学-2', belong: 'node1' },
            { id: 3, lv: 3, tecName: '基础科学-3', belong: 'node1' },
        ]
        let newTreeList = [
            { id: 1, lv: 0, tecName: '基础科学-1', belong: 'node1' },
            { id: 2, lv: 1, tecName: '基础科学-2 修改', belong: 'node1' },
            { id: 3, lv: 2, tecName: '基础科学-3', belong: 'node1' },
            { id: 4, lv: 2, tecName: '基础科学-3', belong: 'node1' },
            { id: 5, lv: 0, tecName: '基础科学-1', belong: 'node2' },
            { id: 6, lv: 1, tecName: '基础科学-2 修改', belong: 'node2' },
            { id: 7, lv: 2, tecName: '基础科学-3', belong: 'node2' },
            { id: 8, lv: 2, tecName: '基础科学-3', belong: 'node2' },
        ]
        // 返回 oldTreeList值
        function compareTreeLists(oldList, newList) {
            const result = [];

            function findNode(id, list) {
                return list.find(node => node.id === id);
            }

            function compareNodes(oldNode, newNode) {
                if (!newNode) {
                    // 节点在新列表中不存在，标记为删除
                    return { ...oldNode, type: 'delete' };
                } else {
                    // 节点在两个列表中都存在
                    const children = [];
                    const oldChildren = oldNode ? oldNode.children : [];
                    const newChildren = newNode.children || [];

                    for (let i = 0; i < newChildren.length; i++) {
                        const oldChild = findNode(newChildren[i].id, oldChildren);
                        children.push(compareNodes(oldChild, newChildren[i]));
                    }

                    // 判断节点是否修改
                    if (!oldNode || !Object.entries(oldNode).every(([key, value]) => newNode[key] === value)) {
                        return { ...newNode, children, type: oldNode ? 'update' : 'add' };
                    }

                    return { ...newNode, children };
                }
            }

            for (let i = 0; i < oldList.length; i++) {
                const newNode = findNode(oldList[i].id, newList);
                result.push(compareNodes(oldList[i], newNode));
            }

            return result;
        }
        const comparisonResult = compareTreeLists(oldTreeList, newTreeList);
        console.log(comparisonResult);

        // 返回 newTreeList值
        function compareTreeLists1(oldList, newList) {
            const result = [];

            function findNode(id, list) {
                return list.find(node => node.id === id);
            }

            function compareNodes(oldNode, newNode) {
                if (!newNode) {
                    // 节点在新列表中不存在，标记为删除
                    return { ...oldNode, type: 'delete' };
                } else {
                    // 节点在两个列表中都存在
                    const children = [];
                    const oldChildren = oldNode ? oldNode.children : [];
                    const newChildren = newNode.children || [];

                    for (let i = 0; i < newChildren.length; i++) {
                        const oldChild = findNode(newChildren[i].id, oldChildren);
                        children.push(compareNodes(oldChild, newChildren[i]));
                    }

                    // 判断节点是否修改
                    if (!oldNode || !Object.entries(oldNode).every(([key, value]) => newNode[key] === value)) {
                        return { ...newNode, children, type: oldNode ? 'update' : 'add' };
                    }

                    return { ...newNode, children };
                }
            }

            for (let i = 0; i < oldList.length; i++) {
                const newNode = findNode(oldList[i].id, newList);
                result.push(compareNodes(oldList[i], newNode));
            }

            // 找到在新列表中但不在旧列表中的节点，标记为添加
            for (let i = 0; i < newList.length; i++) {
                if (!findNode(newList[i].id, oldList)) {
                    result.push({ ...newList[i], type: 'add' });
                }
            }

            return result;
        }
        const comparisonResult1 = compareTreeLists1(oldTreeList, newTreeList);
        console.log(comparisonResult1);

        // 平铺数据转换为tree
        function convertTreeData(list) {
            console.log(list)
            // 以下转换
            const deleteIds = []
            list.forEach((i) => {
                i.children = []
                list.forEach((item) => {
                    // 判断是否有父级（有：将其push到父级的children里，且将该id推进要删除的ids里）
                    if (item.lv === i.id && item.lv !== 0) {
                        i.children.push(item)
                        deleteIds.push(item.id)
                    }
                })
                // 如果children为空，则删除该children
                if (i.children.length === 0) {
                    delete i.children
                }
            })
            // 过滤在deleteIds的id
            const result = list.filter(i => !deleteIds.includes(i.id))
            return result
        }
        console.log(convertTreeData(newTreeList))
        // 平铺数据分组
        function arrayGroup(arr) {
            console.log(arr)
            const m = new Map();
            arr.map(item => {
                m.set(item.belong, [...(m.get(item.belong) || ''), item])
            })
            console.log(m.entries())
            return Object.fromEntries(m.entries());
        }
        let batchSetForm = arrayGroup(newTreeList)
        // 分组后，循环将平铺数据改变为树形结构
        function batchSet(batchSetForm) {
            let changeTreeList = []
            console.log(batchSetForm)
            for (const key in batchSetForm) {
                if (Object.hasOwnProperty.call(batchSetForm, key)) {
                    console.log(batchSetForm, key)
                    const element = batchSetForm[key];
                    // changeTreeList.push(convertTreeData(element))
                    if (key == 'node2') {
                        console.log(convertTreeData(element), element)
                    }
                    // convertTreeData(element)
                }
            }
            console.log(changeTreeList)
            return changeTreeList
        }
        console.log(convertToTree(newTreeList))

    </script>
</body>

</html>