博客

var arr = [
            {
                id: 1,
                name: "石家庄市",
                parentId: 2
            }, {
                id: 2,
                name: "河北省",
                parentId: 0
            },{
                id: 3,
                name: "保定市",
                parentId: 2
            }, {
                id: 4,
                name: "深泽县",
                parentId: 1
            }, {
                id: 5,
                name: "铁杆镇",
                parentId: 4
            }, {
                id: 6,
                name: "满城县",
                parentId: 3
            }, {
                id: 7,
                name: "北京市",
                parentId: 0
            }, {
                id: 8,
                name: "西城区",
                parentId: 7
            },
        ]
        const buildTree = (arr, parentId) => {
            let tree = [];
            arr.map((item) => {
                if (item.parentId === parentId) {
                    item.children = buildTree(arr, item.id);
                    tree.push(item);
                }
            });
            return tree;
        }
        console.log(buildTree(arr, 0)); //根id:是0

核心点:


①arr是多层级无序结构组成的对象数组,对象的parentId标识者父元素的id,在示例中,根id是0)

②buildTree函数用来循环查找指定parentId的子元素,若找到相应的子元素,则继续递归处理,找该子元素的子元素,一直往下,直至匹配完毕,返回数组。

总结:


这种数据类型的处理在工作中很常用,比如前端从后台获取权限路由,人员组织结构,省份地区等, 有些后台程序员并未处理成树结构,所以前端自己得排序,处理。示例中的数据我简单化处理了,方便观察。

结果预览: