大家可能会遇到这样的情况:后端传给你的键名和你需要的形式不一致,比如一个学生管理系统的信息,后台返回给你的学生学号的键名为:id,而你的格式为:stuNo,这个时候一个适配器就可以解决问题。也就是说,你从后台请求的数据,不管你写的是怎样的,后台数据是怎样的,只要用这个东西就能解决,不用每次更改你写的数据名。而且之后你发请求的时候,你的前台都能转换成你所用的,而不是去更改后台的属性名。
例子如下: // 这是后端返回来的数组 let studentHou = [ {id:1,name:"小王",age:20,sex:0,address:"四川成都"}, {id:2,name:"小名",age:25,sex:1,address:"四川绵阳"}, {id:3,name:"小吴",age:18,sex:0,address:"四川成都"}, ] // 这是前端需要得到的形式的对象数组 let studentQian = [ {stuNo:1,Name:"小王",s_Age:20,sex:0,address:"四川成都"}, {stuNo:2,Name:"小名",s_Age:25,sex:1,address:"四川绵阳"}, {stuNo:3,Name:"小吴",s_Age:18,sex:0,address:"四川成都"}, ]思路: // 写个数据适配的方法 // 目的:把studentHou这个对象数组传到方法里去,得到studentQian这种形式的对象数组 第一次错误尝试: // 数据这样写并没有写活!仅仅适用于以上的案例; function dataAdapter(HouData){ let arr = []; HouData.forEach((item)=>{ let obj = new Object(); obj.stuNo = item.id; obj.Name = item.name; obj.s_age = item.age; }) }第二次错误尝试: // 如果把方法写成: function dataAdapter(HouData,['stuNo','Name','s_age']){ } // 这样也不行,这样需求键名一一对应 第三次正确的尝试: 阅读文档如下: /** * item -> 老对象的整体内容 * console.log(item) * **{stuNo:1,Name:"小王",s_Age:20,sex:0,address:"四川成都"}, {stuNo:2,Name:"小名",s_Age:25,sex:1,address:"四川绵阳"}, {stuNo:3,Name:"小吴",s_Age:18,sex:0,address:"四川成都"}** * newArr ->返回的新数组 * HouData(也就是文中的studentHou) ->后端返回的数据 * RelationObj(也就是文中的relObj) ->是传的对象,这个对象就是像stuNo对应id这样的对应关系 * dataAdapter() ->适配器的方法 * o ->new出来的新对象 * */ js代码如下: function dataAdapter(HouData,RelationObj){ // newArr是返回的新数组 let newArr = []; // 不需要用map或者filter来循环产生新数组,所以用forEach HouData.forEach((item)=>{ // new一个新对象把它每次循环的结果放到新数组里面去 console.log(item); let o = new Object(); for(let key in RelationObj){ // 新对象的键名对应的值等于老对象的键名 o[key] = item[RelationObj[key]]; } newArr.push(o); }) return newArr; } // 调用这个方法 let relObj = {"stuNo":"id","Name":"name","s_age":"age","address":"address"}; let newStudent = dataAdapter(studentHou,relObj); console.log(newStudent); - w - 成功啦~ 我们继续把这个方法封装一下便于使用吧 把橙色的那段代码粘贴到新建的js文件中封装并暴露出来,代码如下: ;(function(){ function dataAdapter(HouData,RelationObj){ // newArr是返回的新数组 let newArr = []; // 不需要用map或者filter来循环产生新数组,所以用forEach HouData.forEach((item)=>{ // new一个新对象把它每次循环的结果放到新数组里面去 console.log(item); let o = new Object(); for(let key in RelationObj){ // 新对象的键名对应的值等于老对象的键名 o[key] = item[RelationObj[key]]; } newArr.push(o); }) return newArr; } window.dataAdapter = dataAdapter; })() 再引入就可以啦~ 可是每次写 let relObj = {"stuNo":"id","Name":"name", 那么改进一下,之后你传递relObj时候,只需要传前端和后端不相同的键名即可。 let relObj = {"stuNo":"id","Name":"name","s_age":"age"}; 以下是优化: 在蓝色的那行代码后面再加一句: o = {...item}; 但是这样有个问题:深拷贝过后,得删除重复的数据。 就像是输出这样的格式: 0: Name: "小王" address: "四川成都" age: 20 id: 1 name: "小王" s_age: 20 sex: 0 stuNo: 1 [[Prototype]]: Object 更新后的js代码为: ;(function(){ function dataAdapter(HouData,RelationObj){ // newArr是返回的新数组 let newArr = []; // 不需要用map或者filter来循环产生新数组,所以用forEach HouData.forEach((item)=>{ // new一个新对象把它每次循环的结果放到新数组里面去 console.log(item); let o = new Object(); o = {...item}; for(let key in RelationObj){ // 把这个对象里原来对应的值(键名和键值)给它删掉 delete o[RelationObj[key]]; // 新对象的键名对应的值等于老对象的键名 o[key] = item[RelationObj[key]]; } newArr.push(o); }) return newArr; } window.dataAdapter = dataAdapter; })() ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 搞定~! [626566109于2021-10-14 15:14编辑了帖子]
|
|