如何将后端传到前端的对象数组转化成树形结构的对象数组

原创

于 2019-09-25 09:50:15 发布 · 1.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#算法

本文介绍如何将后端传递的普通对象数组转换为前端使用的树形结构对象数组，详细步骤见链接：https://blog.youkuaiyun.com/w1418899532/article/details/90065633。转化前后对象数组对比及转化方法的调用方法也在文中说明。

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

具体实现原理请参考：https://blog.youkuaiyun.com/w1418899532/article/details/90065633

一、问题描述

需要被转化的对象数组：

this.state = {
test : [
                {id: 7,  name: '快鱼',  pid: 2},
                {id: 8,  name: '海澜之家',  pid: 2},
                {id: 9,  name: '森马',  pid: 2},
                {id: 13,  name: '华为mate10',  pid: 4},
                {id: 14,  name: '华为mate20',  pid: 4},
                {id: 15,  name: '华为mate30',  pid: 4},
                {id: 4,  name: '华为',  pid: 1},
                {id: 5,  name: 'ViVo',  pid: 1},
                {id: 6,  name: 'OPPO',  pid: 1},
                {id: 10,  name: '长虹',  pid: 3},
                {id: 11, name: '飞利浦',  pid: 3},
                {id: 12, name: '松下',  pid: 3},
                {id: 1,  name: '手机'},
                {id: 2,  name: '服装'},
                {id: 3,  name: '家电'}    
            ],
}

转化成树形后的对象数组：

[
     {id: 1,  name: '手机', pid: 0, children: [
         {id: 4,  name: '华为',  pid: 1, children: [
             {id: 13,  name: '华为mate10',  pid: 4},
             {id: 14,  name: '华为mate20',  pid: 4},
             {id: 15,  name: '华为mate30',   pid: 4}
         ]},
         {id: 5,  name: 'ViVo',  pid: 1, children: []},
         {id: 6,  name: 'OPPO',  pid: 1, children: []}