树形结构数据利用深拷贝和递归修改key值

原创已于 2023-02-06 16:07:09 修改 · 463 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-01-18 14:06:43 首次发布

本文介绍如何在JavaScript中利用深拷贝和递归方法，有效地修改树形结构数据的key值，适用于前端开发，特别是Vue.js项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
    <script>
        let tree = [
            {
                id: '1',
                title: '节点1',
                children: [
                    {
                        id: '1-1',
                        title: '节点1-1'
                    },
                    {
                        id: '1-2',
                        title: '节点1-2'
                    }
                ]
            },
            {
                id: '2',
                title: '节点2',
                children: [
                    {
                        id: '2-1',
                        title: '节点2-1',
                        children: [
                            {
                                id: '3-1',
                                title: '节点3-1'
                            }
                        ]
                    }
                ]
            }
        ]
        let newTree = []
        handleTree(newTree, tree)
        console.log(newTree);
        function handleTree(newTree, oldTree) {
            for (let i = 0; i < oldTree.length; i++) {
                newTree[i] = {}
                for (const key in oldTree[i]) {
                    if (Object.hasOwnProperty.call(oldTree[i], key)) {
                        // 有children的做递归处理
                        if (key === 'children' && oldTree[i].children.length > 0) {
                            newTree[i][key + 's'] = []
                            handleTree(newTree[i][key + 's'], oldTree[i].children)
                        // 没有children的修改key值，修改为自己需要的key
                        } else {
                            const element = oldTree[i][key]
                            if (key === 'id') {
                                newTree[i]['value'] = element
                                // console.log(newTree[i]);
                            } else if (key === 'title') {
                                newTree[i]['lable'] = element
                            } else if (key === 'children') {
                                newTree[i]['childrens'] = element
                            }
                        }
                    }
                }

            }
        }
    </script>
</body>

部分结果展示：key已修改