Question

如何使以下代码更优雅和可读？

if (this.flag === 1) {
  this.value -= 0.1;
}
if (this.value <= 0) {
  this.flag = 0;
}

if (this.flag === 0) {
  this.value += 0.1;
}
if (this.value >= 1) {
  this.flag = 1;
}

编辑：让我们说，为了简单起见，我改变了一个对象的不透明度，我希望它在一些内部反复淡入淡出0到1一种循环。 .value是不透明度，.flag是告诉它何时切换方向。

Answer 1

根据你现在所拥有的，我会这样做：

    if (this.flag === 1) {
      this.value -= 0.1;
    } else if (this.flag === 0) {
      this.value += 0.1;
    }

    if (this.value <= 0) {
      this.flag = 0;
    } else if (this.value >= 1) {
      this.flag = 1;
    }

但是flag可以是一个布尔值吗？如果是这样，您不需要进行数值检查。此值也可以在0-1之间？在这种情况下，不设置标志。如果可能的话，我会像这样重构代码，但这取决于你试图实现的逻辑

    if (this.flag) {
      this.value -= 0.1;
    } else {
      this.value += 0.1;
    }
    if (this.value <= 0) {
      this.flag = 0;
    } else {
      this.flag = 1;
    }

Answer 2

你可以使用如下的速记符号来简化某些if-else场景。

this.flag = this.value <= 0 ? 0 : 1;
this.value = this.value + (this.flag === 1 ? -0.1 : 0.1);

但是，您的脚本在当前表单中使用的排他if条件不会涵盖flag和value的所有可能值else块。根据您是否关心，我的上述建议可能会破坏您的代码。

编辑 - 基于OP更新

flag应该是布尔值true/false。

this.flag = this.value > 0;
this.value += (this.flag ? -0.1 : 0.1);

编辑2 - 基于评论

为什么要通过this.flag的值来操纵this.value？该标志应该通过其他方式控制，例如复选框或其他方式，因此您的不透明度更改脚本应该就是这样：

this.value += (this.flag ? -0.1 : 0.1);

如果您在不透明度达到0或1时尝试自动切换标记，则可以执行以下操作：

this.value += (this.flag ? -0.1 : 0.1);

if(this.value === 1 || this.value === 0) {
  this.flag = !this.flag;
}

请注意，这个答案已经超出了问题的范围，这是为了让条件更优雅。如果你需要进一步讨论，你最好再问一个新的SO问题。

Answer 3

这会稍微改变结果，但我认为这是你真正想要的：

if (this.flag === 1) {
  this.value -= 0.1;
  if (this.value <= 0)
    this.flag = 0;
} else /* if (this.flag === 0) */ {
  this.value += 0.1;
  if (this.value >= 1)
    this.flag = 1;
}

虽然它仍然可能不优雅，但它至少很容易理解，因为你的圈复杂度只有4（而不是原始代码中的16）。

为了获得优雅的解决方案，您需要做出更多改变。而不是使用＆＃34;标志＆＃34;对于方向，您可以通过变化量来表示方向本身：

 this.value += this.dir;
 if (this.value >= 1)
     this.dir = -0.1;
 else if (this.value <= 0)
     this.dir = 0.1;

或者再一次，甚至可能

 this.value += this.dir;
 if (this.value <= 0 || this.value >= 1)
     this.dir *= -1;

编写优雅的JavaScript而不是if-then分支

3 个答案: