数据格式如下:

let arr = [
    {
        "id": 275,
        "name": "测试公司",
        "userList": [
              {
                  "id": 697,
                  "userName": "11111"
              }
         ]
     }, {
         "id": 327,
         "name": "有限公司",
         "userList": [
               {
                   "id": 743,
                   "userName": "张三"
                }, {
                    "id": 744,
                    "userName": "李四"
                }
           ]
      }
];

问题一:动态修改name为text,userName也修改为text,userList为children

处理方法:

方案一:封装copyTransFunc方法,参数有两个,一个是arr,一个是数组,数组里可以配置修改的key和替换的value,支持多个

// 将arr对象中的name键改为text、userName键改为text、userList键改为chilren
            console.log(this.copyTransFunc(arr, [{ key: "name", value: "text" }, { key: "userName", value: "text" },{ key: "userList", value: "chilren" }]));



copyTransFunc (obj, typeArr) {
                let result;
                let toString = Object.prototype.toString;
                if (toString.call (obj) === '[object Array]') {
                    result = [];
                    for (let i = 0; i < obj.length; i++) {
                        result[i] = this.copyTransFunc (obj[i], arguments[1])
                    }
                } else if (toString.call (obj) === '[object Object]') {
                    result = {};
                    for (let _key in obj) {
                        if (obj.hasOwnProperty (_key)) {
                            let flag = 0, _value = null;
                            for (let j = 0; j < arguments[1].length; j++) {
                                if (arguments[1][j].key === _key) {
                                    flag = 1;
                                    _value = arguments[1][j].value
                                }
                            }
                            if (flag)
                                result[_value] = this.copyTransFunc (obj[_key], arguments[1]);
                            else
                                result[_key] = this.copyTransFunc (obj[_key], arguments[1])
                        }
                    }
                } else {
                    return obj
                }
                return result
            }

方案二:递归解决

copyTransFun (arr) {
                arr.forEach ((item) => {
                    if (item.name) {
                        item.text = item.name;
                        delete item.name;
                    }
                    if (item.userName) {
                        item.text = item.userName;
                        delete item.userName;
                    }
                    if (item.userList) {
                        item.children = item.userList;
                        delete item.userList;
                        if (item.children.length) {
                            this.copyTransFun (item.children);
                        }
                    }
                });
            },

方案三:处理两级情况

//处理只有两级情况
let col = [];
            arr.forEach((item, index) => {
                col.push({
                        id: item.id,
                        text: item.name,
                        children: item.userList,
                    },
                );
            });
            col.forEach((_item, _index) => {
                if (_item.children && _item.children.length) {
                    _item.children.forEach((item, index) => {
                        if (Object.getOwnPropertyNames(item).length) {
                            item.id = item.id;
                            item.text = item.userName;
                        }
                    })
                }
            });

 交流


1、QQ群:可添加qq群共同进阶学习: 进军全栈工程师疑难解  群号:   856402057

2、公众号:公众号「进军全栈攻城狮」 ,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!

 工作之余,不要忘记吃饭了,天天可领哦!

           

    

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐