有没有童鞋遇到过同样的问题：前端对请求数据做预处理/格式化的方式。

Question

问题描述
在与后台交互的过程中遇到的关于处理数据格式的问题。
问题出现的环境背景及自己尝试过哪些方法
比如:后台传过来一个list,格式如下
list:[
{
id:10086,
firstName:'小',
lastName:'明',
birth:1546072820279,
age:11,
sex:0,
//其他属性
...
},
...
]
然后，我想对数据做预处理，原因有下面两点：
渲染在页面上之前，需要先对data中的某些项做数据处理。
防止后端同学修改了字段，如id->userId，如果不统一在model层做处理，那后期维护就很麻烦，需要在页面中一个个找id,然后换成userId
我的想法是单独创建一个model.js用于统一处理这些数据预处理。
方法1:类
//model.js
classPerson{
constructor(props){
//将原始data的所有的属性做挂载Question1:此处印象中应有更方便的写法用于挂载所有属性Object.create(props)?
Object.keys(props).forEach(prop=>{
this[prop]=props[prop];
});
//将需要处理的数据进行处理/重写
this.name=props.firstName+props.lastName;
this.birthDate=newDate(props.birth);
//假设0为男1为女
this.sex=props.sex===0?'男':'女'
}
//后期如需扩展，可以写一些原型方法
//如通过id请求手机号
getPhone(){
fetch(xxx,{id:this.id}).then(...)
}
}
//最终我们就可以直接在页面/业务组件中直接渲染format之后的list
exportconstformatList=list=>list.map(item=>newPerson(item));
方法2:代理
//model.js
constpersonHandler={
get(target,property){
switch(property){
case'name':
returntarget.firstName+target.lastName;
case'birthDate':
returnnewDate(target.birth);
case'sex':
returntarget.sex===0?'男':'女';
//其他属性直接返回，相比于方法1，省去了遍历挂载的过程。
//Question2但是这里如何给target添加原型方法呢？总不能直接target.getPhone=function(){...}吧？那岂不是每个target都挂载了一个方法，没有必要。
default:returntarget[property];
}
}
};
exportconstformatList=list=>list.map(item=>newProxy(item,personHandler));
结论
对于原因1:我们将这些数据的预处理(与业务逻辑无关)，从业务组件/逻辑中抽离出来，让业务组件/逻辑更加纯粹地处理业务。对于原因2:如果后端同学说将id改为userId,我只需要在class或proxy中加一行代码就搞定了方法1中：this.id=props.userId，方法2中：case'id':returntarget.userId
问题:注释中的question1和2.question3:方法1和方法2哪个更适合处理这种场景呢。求大佬们帮忙对比分析下。