我怎样才能重构这一堆if语句？

Question

想象一下,我有一个名为incomingValue的变量,我从API获取一个数字作为它的值.这些值在0到1之间,我正在设置另外两个变量,具体取决于这个值,使用一堆if语句,如下所示.

var incomingValue; // Set by an API
var setValueName;
var setValueIcon;
if (incomingValue < 0.10 ) { 
  setValueName = 'something'; 
  setValueIcon = 'something.png' 
}
if (incomingValue > 0.09 && incomingValue < 0.20 ) { 
  setValueName = 'somethingElse'; 
  setValueIcon = 'somethingElse.png';
}

在实际实现中,我有大约10个if语句检查特定时间间隔直到1.例如,如果它大于0.10但小于0.16,则执行此操作,依此类推.

作为一个JavaScript初学者,感觉这不是正确的做事方式,即使它完成了工作.我该如何重构这段代码？

更新:根据要求,我正在添加原始代码中使用的全套间隔.我之前没有包括完整列表,因为间隔不遵循某种模式.

• 0到0.09
• 0.09至0.20
• 0.20到0.38
• 0.38至0.48
• 0.48至0.52
• 0.52至0.62
• 0.61到0.80
• 0.80比1

Answer 1

记住单一责任原则.把代码带到一个单独的函数,如下所示:

function determineNameAndIcon(incomingValue) {
  if (incomingValue < 0.10) { 
    return { 
      name: "something",
      icon: "something.png"
    };
  }
  if (incomingValue < 0.20) { 
    return {
      name: "somethingElse",
      icon: "somethingElse.png"
    };
  }
  // etc
  return {
    name: "somethingDefault",
    icon: "somethingDefault.png"
  };
}

// ...

var incomingValue; // Set by an API
const {
  name: setValueName,
  icon: setValueIcon
} = determineNameAndIcon(incomingValue);

请注意,determineNameAndIcon重复部分仍然是一个很长的功能.这可以进一步重构为数据驱动版本:

const nameAndIconList = [
  {
    maxValue: 0.10,
    name: "something",
    icon: "something.png"
  },
  {
    maxValue: 0.20,
    name: "somethingElse",
    icon: "somethingElse.png"
  },
  // ...
];

const nameAndIconDefault = {
  name: "somethingDefault",
  icon: "somethingDefault.png"
};

function determineNameAndIcon(incomingValue) {
  for (let item of nameAndIconList) {
    if (incomingValue < item.maxValue) {
      return item;
    }
  }
  return nameAndIconDefault;
}