多级嵌套对象数据,怎么递归转成数组对象?

新手上路,请多包涵

原数据

const obj = {

"手机": {
  "华为": {
      "内存": ["16g","32g","64g"],
      "尺寸": ["4.8","5.2","6.8"]
  }
  "苹果": {
      "芯片": ["A12","A13","A14"],
      "内存": ["16g","32g","64g"],
      "电池容量": ["3800","4000","4200"]
  },
  "小米": {
      "内核": ["4核","6核","8核"]
  }
},
"电脑": {
  "联想": {
      "价格": ["4500","5800","6400"],
      "颜色": ["白色","黑色","银色"]
  },
  "华硕": {
      "性能": ["一般","中等","良好"],
      "显卡": ["4g","8g","10g"],
      "对角比": ["12:8","16:9","16:12"]
  }
}

}

想要转换成的数据

[{
    title: '手机',
    expand: true,
    children: [
        {
            title: '华为',
            expand: true,
            children: [
                {
                    title: '内存',
                    value: ["16g","32g","64g"]
                },
                {
                    title: '尺寸',
                    value: ["4.8","5.2","6.8"]
                }
            ]
        },
        {
            title: '苹果',
            expand: true,
            children: [
                {
                    title: '芯片',
                    value: ["A12","A13","A14"]
                },
                {
                    title: '内存',
                    value: ["16g","32g","64g"]
                },
                {
                    title: '电池容量',
                    value: ["3800","4000","4200"]
                }
            ]
        },
        {
            title: '小米',
            expand: true,
            children: [
                {
                    title: '内核',
                    value: ["4核","6核","8核"]
                }
            ]
        }
    ]
},
{
    title: '电脑',
    expand: true,
    children: [
        {
            title: '联想',
            expand: true,
            children: [
                {
                    title: '价格',
                    value: ["4500","5800","6400"]
                },
                {
                    title: '颜色',
                    value: ["白色","黑色","银色"]
                }
            ]
        },
        {
            title: '华硕',
            expand: true,
            children: [
                {
                    title: '性能',
                    value: ["一般","中等","良好"]
                },
                {
                    title: '显卡',
                    value: ["4g","8g","10g"]
                },
                {
                    title: '对角比',
                    value: ["12:8","16:9","16:12"]
                }
            ]
        }
    ]
}]



阅读 2.3k
2 个回答

可以不需要递归
image.png

let obj = {

"手机": {
  "华为": {
      "内存": ["16g","32g","64g"],
      "尺寸": ["4.8","5.2","6.8"]
  },
  "苹果": {
      "芯片": ["A12","A13","A14"],
      "内存": ["16g","32g","64g"],
      "电池容量": ["3800","4000","4200"]
  },
  "小米": {
      "内核": ["4核","6核","8核"]
  }
},
"电脑": {
  "联想": {
      "价格": ["4500","5800","6400"],
      "颜色": ["白色","黑色","银色"]
  },
  "华硕": {
      "性能": ["一般","中等","良好"],
      "显卡": ["4g","8g","10g"],
      "对角比": ["12:8","16:9","16:12"]
  }
}
};
Object.entries(obj).map(([title,children])=>({title, expand: true, children: Object.entries(children).map(([title,children])=>({title, expand: true, children: Object.entries(children).map(([title,value])=>({title, value}))}))}));

https://segmentfault.com/q/10...

https://codepen.io/pantao/pen...

一个可行的函数:

const convert = obj => 
    // 取得 entries [手机, {}] 这样的数组
    Object.entries(obj)
        // map  entries 之后
        .map(([key, entry]) => 
            // 判断 entry 的值是否为数组
            Array.isArray(entry)
                // 如果为数组,就是最下一层了,直接返回 title value 对象
                ? ({title: key, value: entry})
                // 否则返回 title, expand, children 对象,children 为 convert(entry)
                : ({
                  title: key,
                  expand: true,
                  children: convert(entry)
                }));
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题