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

Question

问题描述在与后台交互的过程中遇到的关于处理数据格式的问题。问题出现的环境背景及自己尝试过哪些方法比如:后台传过来一个list,格式如下list:[{id:10086,firstName:'小',lastName:'明',birth:1546072820279,age:11,sex:0,//其他属性...},...]然后，我想对数据做预处理，原因有下面两点：渲染在页面上之前，需要先对data中的某些项做数据处理。防止后端同学修改了字段，如id->userId，如果不统一在model层做处理，那后期维护就很麻烦，需要在页面中一个个找id,然后换成userId我的想法是单独创建一个model.js用于统一处理这些数据预处理。方法1:类//model.jsclassPerson{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之后的listexportconstformatList=list=>list.map(item=>newPerson(item));方法2:代理//model.jsconstpersonHandler={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哪个更适合处理这种场景呢。求大佬们帮忙对比分析下。