更新动态嵌套对象的结构答案

【问题标题】：Updating the structure of dynamic nested object更新动态嵌套对象的结构
【发布时间】：2017-11-16 03:42:00
【问题描述】：

我有一个动态深度的嵌套对象。我需要稍微改变它的结构。

例如我有一个这样的对象：

let root = {
    data:{
      id:"5df6608a-59f0-42ac-9c2e-fb2a53df9008",
      name:"Product"
    },
    children:[
      {
         data:{
           id:"b527b1f5-4fd5-4f11-b4f1-6deeb33473d8",
           name:"productId"
         },
         children:[
           {
             data:{
               id:"7045051e-b97e-4836-9048-e93d72c75751",
               name:"rating"
             },
             children:[
               {
                  data:{
                    id:"88025b92-4309-4864-9c40-d4effd33a38b",
                    name:"ratingId"
                  },
                  children:[

                  ]
               }
             ]
           }
         ]
      }
    ]
  }

根对象包含一个名为 data 的对象和一个子数组，它们又具有与根对象相同的结构，我需要删除数据对象并将数据对象内部的 id 和 name 值移动到相同的位置级别为子数组，如下所示。

let root = {
   id:"5df6608a-59f0-42ac-9c2e-fb2a53df9008",
   name:"Product",
   children:[
      {
         id:"b527b1f5-4fd5-4f11-b4f1-6deeb33473d8",
         name:"productId",
         children:[
           {
            id:"7045051e-b97e-4836-9048-e93d72c75751",
            name:"rating",
            children:[
               {
                  id:"88025b92-4309-4864-9c40-d4effd33a38b",
                  name:"ratingId",
                  children:[

                  ]
               }
             ]
           }
         ]
      }
    ]
}

我如何使用 javascript 来做到这一点？

因此，我编写了一种方法，使用该方法我可以将对象遍历到两个级别的深度，但对象的深度是动态的。

下面是我用 reactjs 写的代码

formateTreeChlidren(treeData){
    let rootObject = {
        name: treeData.data.name,
        id: treeData.data.id,
        children: []
    }
    let tempArray= [];
    treeData.children.map( child => {
        let childrenArray = [];
        if(child.children.length > 0){
            child.children.map( subChild => {
                let subChildObject= {
                    name: subChild.data.name,
                    id: subChild.data.id,
                    children:subChild.children
                }
                childrenArray.push(subChildObject);
            });
        }
        let childObject= {
            name: child.data.name,
            id: child.data.id,
            children:childrenArray
        }
        tempArray.push(childObject);
    });
    rootObject["children"] = tempArray;
}

【问题讨论】：

.. 通过编写 Javascript。到目前为止，您尝试过什么？您在哪里卡住了？
您可以发布一些您尝试过的代码吗？会帮助我们帮助你。谢谢。

标签： javascript reactjs object recursion

【解决方案1】：

为每个节点类型声明一个接口

const OldNode = ( id , name , ...children ) =>
  ( { data : { id , name }
    , children : children
    }
  )

const NewNode = ( id , name , ...children ) =>
  ( { id
    , name
    , children 
    }
  )

然后做一个函数在两者之间进行转换

const old2new = ( { data : { id = 0 , name = '' } , children = [] } )  =>
  NewNode ( id
          , name
          , children .map ( old2new )
          )

一些数据集

const data0 =
  [ OldNode ( 1
            , 'a'
            , OldNode ( 2 , 'b' )
            , OldNode ( 3 , 'c' )
            )
  , OldNode ( 4
            , 'd'
            , OldNode ( 5 , 'e' )
            , OldNode ( 6 , 'f' )
            )
  ]

console.log (data0)
// [ { data: { id : 1
//           , name : 'a'
//           }
//   , children : [ { data : { id : 2
//                           , name : 'b'
//                           }
//                  , children : []
//                  }
//                , { data : { id : 3
//                           , name : 'c'
//                           }
//                   , children : []
//                  }
//                ]
//   }
// , { data : { id : 4
//            , name : 'd'
//            }
//   , children : [ { data : { id : 5
//                           , name : 'e'
//                           }
//                  , children : []
//                  }
//                , { data : { id : 6
//                           , name : 'f'
//                           }
//                  , children : []
//                  }
//                ]
//   }
// ]

使用Array.prototype.map进行转换

const data1 =
  data0 .map ( old2new )

console.log (data1)
// [ { id : 1
//   , name : 'a'
//   , children : [ { id : 2
//                  , name : 'b'
//                  , children : []
//                  }
//                , { id : 3
//                  , name : 'c'
//                  , children : []
//                  }
//                ]
//   }
// , { id : 4
//   , name : 'd'
//   , children : [ { id : 5
//                  , name : 'e'
//                  , children : []
//                  }
//                , { id : 6
//                  , name : 'f'
//                  , children : []
//                  }
//                ]
//   }
// ]

代码演示

const OldNode = ( id , name , ...children ) =>
  ( { data : { id , name }
    , children : children
    }
  )
  
const NewNode = ( id , name , ...children ) =>
  ( { id
    , name
    , children 
    }
  )
  
const old2new = ( { data : { id = 0 , name = '' } , children = [] } )  =>
  NewNode ( id
          , name
          , children .map ( old2new )
          )
          
const data0 =
  [ OldNode ( 1
            , 'a'
            , OldNode ( 2 , 'b' )
            , OldNode ( 3 , 'c' )
            )
  , OldNode ( 4
            , 'd'
            , OldNode ( 5 , 'e' )
            , OldNode ( 6 , 'f' )
            )
  ]
  
const data1 =
  data0 .map ( old2new )
  
console.log (data1)
// [ { id : 1
//   , name : 'a'
//   , children : [ { id : 2
//                 , name : 'b'
//                 , children : []
//                 }
//               , { id : 3
//                 , name : 'c'
//                 , children : []
//                 }
//               ]
//   }
// , { id : 4
//   , name : 'd'
//   , children : [ { id : 5
//                 , name : 'e'
//                 , children : []
//                 }
//               , { id : 6
//                 , name : 'f'
//                 , children : []
//                 }
//               ]
//   }
// ]

【讨论】：