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（而且，也是因为您return位于每个if的区块中），所以可以省去一半这些条件，因为您知道它们将不成立：

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。：-）

在一般情况下，但是由于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`)}
  />
);

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

2 个答案: