javascript - 如何重构这个冗长的 if/else

Question

我写了这个 if/else ，它工作正常，但它很长。我真的很想知道其他开发人员会使用哪些方法来缩短它。

目前我认为它看起来非常像初学者写的(这是正确的)。我很想看看其他人会如何处理它。

我应该提到我在 React Native 工作。

getBatteryIcon() {
    if (this.props.batteryLevel >= 81 && this.props.batteryLevel <= 100) {
      return (
        <Image
          source={require('./../../../android/app/src/main/res/drawable/batterylevel_four.png')}
        />
      )
    } else if (this.props.batteryLevel >= 51 && this.props.batteryLevel <= 80) {
      return (
        <Image
          source={require('./../../../android/app/src/main/res/drawable/batterylevel_three.png')}
        />
      )
    } else if (this.props.batteryLevel >= 25 && this.props.batteryLevel <= 50) {
      return (
        <Image
          source={require('./../../../android/app/src/main/res/drawable/batterylevel_two.png')}
        />
      )
    } else {
      return (
        <Image
          source={require('./../../../android/app/src/main/res/drawable/batterylevel_one.png')}
        />
      )
    }
  }

Answer 1

因为您正在使用 if/else if(好吧，还因为您在每个 if 的 block )，你可以省略一半的条件，因为你知道它们不会为真:

if (this.props.batteryLevel >= 81) { // I assume it can't go past 100
  return (
    <Image
      source={require('./../../../android/app/src/main/res/drawable/batterylevel_four.png')}
    />
  )
} else if (this.props.batteryLevel >= 51) { // Thanks to the `else`, you know it's not 81 or higher
  return (
    <Image
      source={require('./../../../android/app/src/main/res/drawable/batterylevel_three.png')}
    />
  )
} else if (this.props.batteryLevel >= 25) { // You know it's not 51 or higher
  return (
    <Image
      source={require('./../../../android/app/src/main/res/drawable/batterylevel_two.png')}
    />
  )
} else {
  return (
    <Image
      source={require('./../../../android/app/src/main/res/drawable/batterylevel_one.png')}
    />
  )
}

另一种选择是拥有一个您循环遍历的阈值列表。显然，React Native 不允许您在 require 中使用变量(谢谢 Matt Aft 和 OsDev )，因此我们无法尽可能多地删除重复项，但是:

const batteryLevels = [
    {level: 81, source: require("./../../../android/app/src/main/res/drawable/batterylevel_four")},
    {level: 51, source: require("./../../../android/app/src/main/res/drawable/batterylevel_three")},
    {level: 25, source: require("./../../../android/app/src/main/res/drawable/batterylevel_two")},
    {level: 0,  source: require("./../../../android/app/src/main/res/drawable/batterylevel_one")}
//          ^---- or possibly `-Infinity`, see note below
];

然后是

let {source} = batteryLevels.find(({level}) => this.props.batteryLevel >= level);
return (
  <Image
    source={source}
  />
);

请注意，假设 this.props.batteryLevel 将始终为 >= 0。您可以将最后一个设置为 level: -Infinity 而不是 level: 0，really 确定。 :-)

---

对于一般情况，但由于 require 限制，这不适用于 React Native，我们可以分解出路径和大部分文件名:

// NOT ON REACT NATIVE

let level;
if (this.props.batteryLevel >= 81) { // I assume it can't go past 100
  level = "four";
} else if (this.props.batteryLevel >= 51) { // You know it's not 81 or higher
  level = "three";
} else if (this.props.batteryLevel >= 25) { // You know it's not 51 or higher
  level = "two";
} else {
  level = "one";
}
return (
  <Image
    source={require(`./../../../android/app/src/main/res/drawable/batterylevel_${level}.png`)}
  />
);