一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

情况描述

前端要想渲染对应的数据对数据的格式、结构、层级关系、字段等具有一定的要求。但是在工作中我们往往取到的数据并非我们想要的，那么我们应该怎么办？

• 通过第三方库来解决
• 原生JS逻辑代码来解决

✈渲染表格数据的时候

当我们要渲染一个表格的时候我们需要的数据往往是这样的

但是我们拿到的数据确是这样的

如何让数据变成我们想要的呢？

//原始数据
let hobby =[
      {id: "1",name: "张三",hobby:"打篮球"},
      {id: "2",name: "李四",hobby:"踢足球"},
      {id: "3",name: "王五",hobby:"打乒乓"}
    ]
let age = [
      {name: "张三",age: "10"},
      {name: "李四",age: "13"},
      {name:"王五",age:"18"}
    ]
let address = [
      {id: "1",address: "北京"},
      {id: "2",address: "上海"},
      {id: "3",address: "广州"}
    ]

方法一，原生JS+扩展运算符

 //数组hoby和age合并，用arr接收
    var arr=[]
    // 遍历hobby
    for (let i = 0; i < hobby.length; i++) {
     for (let j = 0; j < age.length; j++) {
      if (hobby[i].name==age[i].name) {
        // 把名字相同的对象元素合并为一个新的对象
        let obj={...hobby[i],...age[i]}
        //将此对象插入arr
        arr.push(obj)
      }
     } 
    }
    console.log(arr);
    //将数组arr和address合并，用arr2接收
    var arr2=[]
    // 遍历addres
    for (let k = 0; k < address.length; k++) {
      let newobj={...address[k],...arr[k]}
      arr2.push(newobj)
    }
    console.log(arr2);//目标数据arr2

方法二，Map+obj.assign()

    //map遍历
    hobby.map((item2)=>{
            address.map((item1)=>{
              //根据id相同合并对象
                if(item2.id == item1.id){
                  //添加独有的属性
                    let json = {
                        'name':item2.name,
                        'address':item1.address
                    };
                    //合并对象，相同属性会覆盖，独有属性会保留
                    Object.assign(item2,json);
                    return item2;
                }
            })
        })
  console.log(hobby);
  //再将得到的hobby数组和age数组，走一下上面的步骤即可得到目标数据

✈用el-cascader做多级关联下拉框时

**我们会发现我们想要的数据结构确实是给对了，但是字段不是我们想要的，有没有裂开的感觉😂 **

//我们拿到的数据
        let arr = [
            {
                departmentId: 2,
                departmentName: "技术部",
                list: [
                    {
                        departmentId: 1,
                        departmentName: "技术部1部",
                        parentId: 2,
                        list: [
                            {
                                departmentId: 1,
                                departmentName: "301室",
                                parentId: 2,
                            },
                            {
                                departmentId: 2,
                                departmentName: "302室",
                                parentId: 2,
                            }
                        ]
                    },
                    {
                        departmentId: 2,
                        departmentName: "技术部2部",
                        parentId: 2,
                    },
                    {
                        departmentId: 3,
                        departmentName: "技术部3部",
                        parentId: 2,
                    }
                ]
            },
            {
                departmentId: 1,
                departmentName: "销售部",
                list: [
                    {
                        departmentId: 1,
                        departmentName: "销售部1部",
                        parentId: 1,
                    },
                    {
                        departmentId: 2,
                        departmentName: "销售部2部",
                        parentId: 1,
                    },
                    {
                        departmentId: 3,
                        departmentName: "销售部3部",
                        parentId: 1,
                    },
                ]
            }
        ]

目标数据的结构与样式

如何实现呢？

//封装一个处理这种问题的函数，tree为传入的参数Array
       function frameworktree(tree) {
            var result = []
            // 遍历 tree
            tree.forEach((item) => {
                // 解构赋值
                let {departmentId: value,departmentName: label,list: children} = item
                // 递归
                if (children) {
                    children = frameworktree(children)
                }
                result.push({
                    value,
                    label,
                    children
                })
            })
            return result
        }
        console.log(frameworktree(arr))

结语

工作中可能遇到对的问题不止这些，这些也是最基础的。上述的解决方案页不唯一，如果有更好的解决方案欢迎大家留言，如果有不恰当之处欢迎指正✈