前端如何处理后端返回数据中的冗余字段问题

Question

let localData = {
name: '',
sex: ''
}
let resData = {
name: 'zzs',
sex: 'boy',
age: 18,
birthday: '10-21',
address: 'demo'
}
localData = resData
// { name: 'zzs',
//   sex: 'boy',
//   age: 18,
//   birthday: '10-21',
//   address: 'demo' }
console.log(localData) 

我希望得到的结果是{名称："zzs"，性别："男孩"}

我不想用下面的方式来做。

localData.name = resData.name;
localData.sex = resData.sex;

有没有一种好的性能方法可以实现？感谢

Answer 1

您可以使用合并两个对象

Object.keys(resData).filter(key => key in localData).forEach(key => localData[key] = resData[key]);

因此，使用您的示例数据，请参阅下面的工作fiddle(打开控制台(或工作片段：

let localData = {
name: '',
sex: ''
}
let resData = {
name: 'zzs',
sex: 'boy',
age: 18,
birthday: '10-21',
address: 'demo'
}
Object.keys(resData).filter(key => key in localData).forEach(key => localData[key] = resData[key]);
console.log(localData)

工作原理：

Object.keys返回给定对象自己的可枚举属性名称的数组。所以在这种情况下，我们找到了resData的所有密钥

然后，我们在localData数据密钥上使用filter，使用forEach循环它们，并从相应的resData密钥设置它们的值

这将动态工作(您不必指定要合并的键(。如果localData和resData中都存在相同的密钥，则该密钥将合并到localData中

Answer 2

您可以这样做：

let {name,sex} = resData; //Destructure only values required
localData = {name,sex} // assign to localdata
console.log(localData) //{name: "zzs", sex: "boy"} 

Answer 3

您可以使用外部库lodash-来完成此代码

let localData = {
name: '',
sex: ''
}
let resData = {
name: 'zzs',
sex: 'boy',
age: 18,
birthday: '10-21',
address: 'demo'
}
localData = _.pick(resData,_.keys(localData));
console.log(localData)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>

Answer 4

您可以通过映射localData的键来获取resData中的值来使用Object.fromEntries()。这将创建一个新对象：

const localData = {
name: '',
sex: ''
}
const resData = {
name: 'zzs',
sex: 'boy',
age: 18,
birthday: '10-21',
address: 'demo'
}
const res = Object.fromEntries(Object.keys(localData).map(k => [k, resData[k]]));
console.log(res);