如果 else 语句[关闭]，您将如何优化此 javascript答案

【问题标题】：How would you optimise this javascript if else statement [closed]如果 else 语句[关闭]，您将如何优化此 javascript
【发布时间】：2021-05-28 03:12:03
【问题描述】：

我一直致力于构建一些平台，除了给定的一个之外，我找不到任何其他有效的优化方法。你的解决方案是什么来优化给出多个 if else 语句？...................... ....................................

if (response['total_visits'] == visitNumber.val()) {
  visitNumber.css('color', 'green');
} else {
  visitNumber.css('color', 'red');
}
if (response['best_thing'] == aboutCity.val()) {
  aboutCity.css('color', 'green');
} else {
  aboutCity.css('color', 'red');
}
if (response['fav_attraction'] == favAttraction.val()) {
  favAttraction.css('color', 'green');
} else {
  favAttraction.css('color', 'red');
}
if (response['destination_dining'] == destinationDining.val()) {
  destinationDining.css('color', 'green');
} else {
  destinationDining.css('color', 'red');
}
if (response['method_transport'] == transportMethod.val()) {
  transportMethod.css('color', 'green');
} else {
  transportMethod.css('color', 'red');
}
if (response['age_group'] == ageGroup.val()) {
  ageGroup.css('color', 'green');
} else {
  ageGroup.css('color', 'red');
}
if (response['income_level'] == incomeLevel.val()) {
  incomeLevel.css('color', 'green');
} else {
  incomeLevel.css('color', 'red');
}
if (response['visit_purpose'] == onBusiness.val()) {

  onBusiness.css('color', 'green');
} else {
  onBusiness.css('color', 'red');
}
if (response['accomodation_cost'] == accomadationCost.val()) {

  accomadationCost.css('color', 'green');
} else {
  accomadationCost.css('color', 'red');
}
if (response['occupation'] == occupation.val()) {
  occupation.css('color', 'green');
} else {
  occupation.css('color', 'red');
}

【问题讨论】：

标签： javascript optimization

【解决方案1】：

我会将它们存储在一个对象中，并使用Object.keys 来更新css

const obj = {
  total_visits: visitNumber,
  best_thing: aboutCity,
  fav_attraction: favAttraction,
  destination_dining: destinationDining,
  method_transport: transportMethod,
  age_group: ageGroup,
  income_level: incomeLevel,
  visit_purpose: onBusiness,
  accomodation_cost: accomadationCost,
  occupation: occupation
};

Object.keys(obj).map((key) => {
  if (response[key] === obj[key].val()) {
    obj[key].css('color', 'green');
  } else {
    obj[key].css('color', 'red');
  }
})

在上述对象中，visitNumber、aboutCity... 等与您在代码中使用的对象完全相同。

【讨论】：

【解决方案2】：

使用ternary，这样会更整洁。

let color = response.total_visits == visitNumber.val() ? 'green' : 'red';
visitNumber.css('color', color);

对其余部分重复。

【讨论】：