ES6代码优化

Question

如下两段代码如何写可以更简洁，更易读。

if (res.after.temporary.address) {
    this.state.travellerInfo.after.temporary.address = { ...res.after.temporary.address, ...this.state.travellerInfo.after.temporary.address };
}
if (res.after.temporary.people) {
    this.state.travellerInfo.after.temporary.people = { ...res.after.temporary.people, ...this.state.travellerInfo.after.temporary.people };
}
if (res.after.temporary.stroke) {
    this.state.travellerInfo.after.temporary.stroke = { ...res.after.temporary.stroke, ...this.state.travellerInfo.after.temporary.stroke };
}
if (res.after.temporary.take) {
    this.state.travellerInfo.after.temporary.take = { ...res.after.temporary.take, ...this.state.travellerInfo.after.temporary.take };
}

Object.entries(res.after.show_items).forEach(([key, value]) => {
    if (key === 'people') {
        this.state.travellerInfo.after.temporary.people.show = value;
    } else if (key === 'address') {
        this.state.travellerInfo.after.temporary.address.show = value;
    } else if (key === 'take') {
        this.state.travellerInfo.after.temporary.take.show = value;
    } else if (key === 'stroke') {
        this.state.travellerInfo.after.temporary.stroke.show = value;
    }
});

Answer 1

const KEYS = ['address', 'people', 'stroke', 'take'];
for (let key of KEYS) {
  if (res.after.temporary[key]) {
    this.state.travellerInfo.after.temporary[key] = {...res.after.temporary[key], ...this.state.travellerInfo.after.temporary[key]};
  }
}

Object.entries(res.after.show_items).forEach(([key, value]) => {
  
  //确定不会出现其他键可以这样写
  this.state.travellerInfo.after.temporary[key].show = value;
  
  //不确定的话加个判断
  if (['address', 'people', 'stroke', 'take'].includes(key)) {
    this.state.travellerInfo.after.temporary[key].show = value;
  } 
  
});

Answer 2

我觉得你这代码不足的应该就是字段太深了，其他没啥太大问题

然后这样你看如何

setData(value){
   if (res.after.temporary[value]) {
     this.state.travellerInfo.after.temporary[value] = { ...res.after.temporary[value], ...this.state.travellerInfo.after.temporary[value] }
   }
}

this.setData('address') // 这样调用

fun(type){
   Object.entries(res.after.show_items).forEach(([key, value]) => {
     if (key === type) {
       this.state.travellerInfo.after.temporary[type].show = value;
     }
   });
}

Answer 3

一步步来，改一个做参考

let temporary = res.after.temporary
let stateTemporary = this.state.travellerInfo.after.temporary
if (temporary.address) {
  stateTemporary.address = {
    ...temporary.address,
    ...stateTemporary.address
  }
}
if (temporary.people) {
  stateTemporary.people = {
    ...temporary.people,
    ...stateTemporary.people
  }
}
if (temporary.stroke) {
  stateTemporary.stroke = {
    ...temporary.stroke,
    ...stateTemporary.stroke
  }
}
if (temporary.take) {
  stateTemporary.take = {
    ...temporary.take,
    ...stateTemporary.take
  }
}

第二步

let temporary = res.after.temporary
let stateTemporary = this.state.travellerInfo.after.temporary
let keys = ['address', 'people', 'stroke', 'take']
keys.forEach(key => {
  if (temporary[key]) {
    stateTemporary[key] = {
      ...temporary[key],
      ...stateTemporary[key]
    }
  }
})

第三步

let temporary = res.after.temporary
let stateTemporary = this.state.travellerInfo.after.temporary
let keys = ['address', 'people', 'stroke', 'take']
keys.forEach(key => {
  if (temporary[key]) {
    stateTemporary[key] = Object.assign({}, temporary[key], stateTemporary[key])
  }
})