后台传来的路由数据使用比较好理解的方式去处理

原创已于 2023-06-19 22:44:26 修改 · 139 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2023-06-06 16:36:43 首次发布

本文探讨如何以直观方式处理从后台接收到的路由数据。通过JavaScript，我们将解析、组织和利用这些数据来构建动态应用程序。理解这些数据对于前端开发者至关重要，因为它允许我们根据用户的操作无缝导航和更新页面。

            /**
            已知后台传来的路由数据:
             pid 为父级的id
             id 为自身的id
            找出父级把子集放在父级名下
             
             * 1.遍历：找出id == pid的项
             * 2.遍历自己找自己：开辟出一个独立的空间 用于自己对比自己
             * 3.找出一项符合id == pid的项目 把索引收集到一个数组里，这些都是被移动过的 都删除或过滤
             * 4.数组根据数组条件过滤
             **/
            const arr = [ {
                  id: 2,
                  pid: 0,
                  name: '0-2'
            }, {
                  id: 3,
                  pid: 2,
                  name: '2-3'
            }, {
                  id: 5,
                  pid: 2,
                  name: '2-5'
            }, {
                  id: 6,
                  pid: 0,
                  name: '0-6'
            }, {
                  id: 7,
                  pid: 6,
                  name: '6-7'
            }, {
                  id: 8,
                  pid: 6,
                  name: '6-8'
            }, {
                  id: 5,
                  pid: 3,
                  name: '3-5'
            }, { id: 15, pid: 13, name: '3-5' },]


            // id = pid pid那一项加children属性 并把id那项存进去
            const ArrFn1 = arr => {
                  let filterArr = []
                  // id
                  arr.map(item => {
                  // pid
                        arr.map((item1,i) => {
                              if(item.id == item1.pid ){
                                    // console.log(item,item1,'item')
                                    if(!item.children){
                                          item.children = []
                                          // arr.splice(i,1)
                                    }    
                                    // console.log(item,'item')
                                    // console.log(item1,'item1')
                                    // console.log(arr,'arr')
                                    // console.log(i,'i')
                                    // console.log('==================================')
                                    item.children.push(item1)  
                                    filterArr.push(i)
                                    // arr.splice(i,1)
                              }
                  })
            })
            return deleteArr(arr,filterArr)
      }

      const deleteArr = (arr,filterArr) => {
            console.log(arr,filterArr)
            return arr.filter((item,index) => {
                  // console.log(filterArr.indexOf(index))
                  return filterArr.indexOf(index) == -1
            })
      }

      ArrFn1( arr )
      console.log( ArrFn1( arr ) )