时间戳

首页 > 解决方案 > 如何重构这个冗长的 if/else

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

问题描述

我写了这个 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')}
        />
      )
    }
  }

标签： javascriptreact-native

解决方案

由于您正在使用if/ else if（好吧，也因为您return在 eachif的块中），您可以省略一半的条件，因为您知道它们不会是真的：

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代替。:-)

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

// 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`)}
  />
);

推荐阅读