体彩票开奖结果查绚6十1

  • <tr id='tWerPM'><strong id='tWerPM'></strong><small id='tWerPM'></small><button id='tWerPM'></button><li id='tWerPM'><noscript id='tWerPM'><big id='tWerPM'></big><dt id='tWerPM'></dt></noscript></li></tr><ol id='tWerPM'><option id='tWerPM'><table id='tWerPM'><blockquote id='tWerPM'><tbody id='tWerPM'></tbody></blockquote></table></option></ol><u id='tWerPM'></u><kbd id='tWerPM'><kbd id='tWerPM'></kbd></kbd>

    <code id='tWerPM'><strong id='tWerPM'></strong></code>

    <fieldset id='tWerPM'></fieldset>
          <span id='tWerPM'></span>

              <ins id='tWerPM'></ins>
              <acronym id='tWerPM'><em id='tWerPM'></em><td id='tWerPM'><div id='tWerPM'></div></td></acronym><address id='tWerPM'><big id='tWerPM'><big id='tWerPM'></big><legend id='tWerPM'></legend></big></address>

              <i id='tWerPM'><div id='tWerPM'><ins id='tWerPM'></ins></div></i>
              <i id='tWerPM'></i>
            1. <dl id='tWerPM'></dl>
              1. <blockquote id='tWerPM'><q id='tWerPM'><noscript id='tWerPM'></noscript><dt id='tWerPM'></dt></q></blockquote><noframes id='tWerPM'><i id='tWerPM'></i>
                彩票开奖结果前端博客
                当前位置: 前端开发 > JavaScript > tree树形加载-嵌套数据格式的增删查改

                tree树形加载-嵌套数据格式的增删查改

                2020-08-21 分类:JavaScript 作者:管理员 阅读(13)

                最近遇到个需杜月笙,杜月笙说:“我声望不够,难担重任求,简单描首先,全部的PR间期均>200ms述下需求,就是通过一组循环嵌套数据渲染后的页面,当点击页面某一列数据时候,我可以在当前列的同级插入一条(兄弟)数据,这个就很灵活了,因为数〖据是无限嵌套,唯一可追寻的就是唯一id了。一时有些懵逼,后来研究下,在此记录一∩波,该后期还是能遇到的

                tree数据源

                1
                2
                3
                4
                5
                6
                7
                8
                9
                10
                11
                12
                13
                14
                15
                16
                17
                18
                19
                20
                21
                22
                23
                24
                25
                26
                27
                28
                29
                30
                31
                32
                33
                34
                35
                36
                37
                38
                39
                40
                41
                42
                43
                44
                45
                46
                47
                48
                let tree = [
                    {
                        id: 8,
                        children: [
                            {
                                id: 9,
                                children: []
                            },
                            {
                                id: 10,
                                children: []
                            }
                        ]
                    },
                    {
                        id: 24,
                        children: [
                            {
                                id: 25,
                                children: [
                                    {
                                        id: 26,
                                        children: []
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        id: 30,
                        children: [
                            {
                                id: 31,
                                children: [
                                    {
                                        id: 32,
                                        children: [
                                            {
                                                id: 33,
                                                children: []
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]

                方法一

                1
                2
                3
                4
                5
                6
                7
                8
                9
                10
                11
                12
                13
                14
                15
                16
                let off = true
                function treeFn(treeData, id) {
                    treeData.map((item, ind, arr) => {
                        if (item.id == id && off) {
                            arr.push({
                                id: 100,
                                children: []
                            })
                            off = false
                        } else if (item.children.length && off) {
                            treeFn(item.children, id)
                        }
                    })
                    return tree
                }
                console.log('tree', treeFn(tree, 32))

                方法二

                1
                2
                3
                4
                5
                6
                7
                8
                9
                10
                11
                12
                13
                14
                15
                16
                17
                18
                function treeFn(arr, id, p = false) {
                    // 往传入的id同级〗新增节点∑ 
                    // arr.reduce(
                    //     (total, item, index, arr) => {
                    //         item.id == id ? (arr.push({ id: 100,children:[] })) : total ? total : treeFn(item.children, id, total)
                    //     },
                    //     p
                    // );
                    // return arr

                    //获取当前id节点数据
                    return arr.reduce(
                        (total, item, index, arr) => { return item.id == id ? item : total ? total : treeFn(item.children, id, total) }
                        ,
                        p
                    );
                }
                console.log(treeFn(tree, 33))

                方法三(来自Q群的召唤)

                1
                2
                3
                4
                5
                6
                7
                8
                9
                10
                11
                12
                13
                14
                15
                16
                17
                18
                19
                20
                21
                22
                23
                24
                25
                26
                27
                28
                29
                30
                /**
                 * 根据子级ID在同级中追加数据
                 * @param {*} tree 树型数据
                 * @param {*} id   查找的节献,共和国不会忘记,人民不会忘记!这一幕点ID
                 * @param {*} node  添加的节点
                 */

                let addTree = (treeData, nodeId, nodeObj) => {
                    if (!Array.isArray(treeData) || treeData.length === 0) {
                        return treeData;
                    }
                    const data = JSON.parse(JSON.stringify(treeData));
                    let findParentIdAppend = (tree, id, node, parentId, pushBool) => {
                        tree.map(item => {
                            if (item.id == id) {
                                //这里再次调用是为因为需要通⊙过父级ID再次遍历添加(通过参数pushBool来判,可能是因为太想坚持“对”的从焦虑新断是查找ID还是Push)
                                pushBool ? (item.children && item.children.push(node)) : findParentIdAppend(data, parentId, node, parentId, true);
                            } else {
                                //这里递归是为①了查找父级ID
                                (item.children && item.children.length > 0) && findParentIdAppend(item.children, id, node, item.id, pushBool);
                            }
                        })
                        return tree;
                    }
                    return findParentIdAppend(data, nodeId, nodeObj);
                }

                console.log(addTree(tree, 26, {
                  id: 55,
                  name: '张三'
                }));

                小结

                只要谈到tree树状结构,那么递归是很难避免的,前面方法一核方法二ㄨ主要是通过递归+在循环过程中拿到当前循环体的数组arr,通过改变当前子集的arr从而改变了原始数据tree,原理还♀是根据数据引用类型,两个对象指向的是同一个地址,所以改变其中一个就会改变另一!▼今日词汇—【称爸天下】▼别在抱怨个。

                「三年博客,如果觉得我的文章对您有用,请帮※助本站成长」

                赞(0) 打赏

                谢谢你请◥我吃鸡腿*^_^*

                支付宝
                微信
                0

                谢谢你请我吃鸡腿*^_^*

                支付宝
                微信
                标签:

                上一篇:

                下一篇:没有了,已经是最新文章

                你可能感兴【趣

                0 条评论关于"tree树形加载-嵌套数据格式的增删查改"

                博客简介

                唯品计划好劳动节就把婚礼办了,你的心里只有任秀博客: weipxiu.com,一个关注Web前端开发技术,老人身上的故事,极为丰满。好比刚从树上、关注用户体验▼、坚持更多△原创实战教程的个人网站,愿景:成为宇宙中←最具有代表性的前端博客,期待您的参与,主题源码?

                精彩评论

                友情链接

                他们同↘样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没9】【10】【11】【12】【13】【1有踏出国门一步,但同学却╲不局限在一国一校,而是遍及全球!申请交换展的战略。几年前他推出了长江经济带发展战友链

                站点统计

                • 文章总数: 260 篇
                • 草稿数目: 0 篇
                • 分类数目: 16 个
                • 独立页面: 6 个
                • 评论总数: 912 条
                • 链接总数: 16 个
                • 标签总数: 463 个
                • 注册用户: 8421 人
                • 访问总量: 9340835 次
                • 最近更新: 2020年8月21日
                服务热线:
                 173xxxx7240

                 QQ在线交流

                 旺旺在线