Question

我发现了一些看起来像这样的js代码：

if (
  (condition 1) && 
  (condition 2 ==  condition 3) && 
  (
    (condition 4 && condition  5) && 
    (condition 6 == condition 7) || 
    (
      (condition 8 && condition 9) && 
      (condition 10 == condition 11)
    ) 
  )
)

如果表达式true的评估结果为false，以下代码会评估为(condition 4 && condition 5)或false吗？为什么评估为true或false？试图通过混合&&和||语句来了解如何读取if语句。我认为这也是可能的，但如果有办法重构此代码，请告诉我。

Answer 1

圆括号优先 &&优先于||

在MDN和SO question

上查看javascript中的运算符优先级

如果(condition 4 && condition 5)为false，结果仍将取决于(condition 8 && condition 9) && (condition 10 == condition 11)

if(
    (condition 1) 
    && (condition 2 ==  condition 3) 
    && (                                  --> false && x || x --> false || x = x
        (condition 4 && condition  5)  
            && (condition 6 == condition 7) 
            || 
            (
                (condition 8 && condition 9) 
                && (condition 10 == condition 11)
            ) 
    )
)

这可以重构：绝对。怎么样？取决于条件和逻辑。

Answer 2

就个人而言，我将其分解为变量。

var isAEqualToB = a === b
var isCEqualToD = c === d
var isEEqualToA = e === a
var isAOrDTruthy = a || d

var isEEqualToAAndAOrDTruthy = isEEqualToA && isAOrDTruthy

if ((isAEqualToB || isCEqualToD) && isEEqualToAAndAOrDTruthy) {
  // Do your thing here
}

很多人认为拥有更少的线条是良好代码的标志，但它绝对是 NOT 。对于每个必须处理任何代码的开发人员而言，可读性和可维护性都更有意义。

将条件分解为非常易懂的变量（即使用描述条件的变量名称），并将其简化为更简单的事物。您可能会发现将完整条件分解为较小的函数也可能有所帮助。

所以让我们做另一个更有意义的布尔方程。我们只想在以下情况下执行一段代码：

时间是早上6点到下午2点
skyColor的值是＆＃39; grey＆＃39;
你的名字是＆＃39; ozbarry＆＃39;或者＆＃39; web-dev＆＃39;
n的值为2或999

根据您当前的示例，我们从以下内容开始：

var skyColor = 'grey';
var name = 'ozbarry';
var n = 2;

if (
  // Condition 1, time is between 6am and 2pm
  ((new Date()).getHours() >= 6 && (new Date()).getHours() <= 14) &&

  // Condition 2, skyColor is 'grey'
  (skyColor === 'grey') &&

  // Condition 3, name is either 'ozbarry' or 'web-dev'
  (name == 'ozbarry' || name == 'web-dev') &&

  // Condition 4, n is either 2 or 999
  (n == 2 || n == 999)
) {
  // Do a thing here
}

这将做正确的事情，但这将是一个维持的噩梦，这是一个非常基本的例子。让我们做一些重构！

首先，让我们将其中一些条件转化为变量，以便我们更好地跟踪它们，并删除注释，因为变量名称将反映我们正在测试的内容：

var skyColor = 'grey';
var name = 'ozbarry';
var n = 2;

var isHourBetween6And14 = (new Date()).getHours() >= 6 && (new Date()).getHours() <= 14;
var isSkyGrey = skyColor === 'grey';
var isNameValid = name === 'ozbarry' || name === 'web-dev'
var isN2Or999 = n === 2 || n === 999

if (
  isHourBetween6And14 &&
  isSkyGrey &&
  isNameValid &&
  isN2Or999
) {
  // Do a thing here
}

这样更好，但仍然存在一些问题。从代码的角度来看，某些条件仍然很长或不清楚。我主要关注的是isHourBetween6And14，但最后两个也可能会引起注意，所以让我们把它们分成有意义的函数：

function isNumberBetween(value, min, max) {
  return value >= min && value <= max
}

function isValueOneOf(value, validValues) {
  for(validIdx=0; validIdx < validValues.length; validIdx++) {
    if (validValues[validIdx] === value) {
      return true;
    }
  }
  return false;
}

var skyColor = 'grey';
var name = 'ozbarry';
var n = 2;

var isHourBetween6And14 = isNumberBetween((new Date()).getHours(), 6, 14)
var isSkyGrey = skyColor === 'grey';
var isNameValid = isValueOneOf(name, ['ozbarry', 'web-dev']);
var isN2Or999 = isValueOneOf(n, [2, 999])

if (
  isHourBetween6And14 &&
  isSkyGrey &&
  isNameValid &&
  isN2Or999
) {
  // Do a thing here
}

最后，我喜欢做的是在if语句之前加入长条件。这将使您的条件更具可读性，而未来的开发人员每次都不需要在心理上做逻辑，以了解它是否会执行该块：

function isNumberBetween(value, min, max) {
  return value >= min && value <= max
}

function isValueOneOf(value, validValues) {
  for(validIdx=0; validIdx < validValues.length; validIdx++) {
    if (validValues[validIdx] === value) {
      return true;
    }
  }
  return false;
}

var skyColor = 'grey';
var name = 'ozbarry';
var n = 2;

var isHourBetween6And14 = isNumberBetween((new Date()).getHours(), 6, 14)
var isSkyGrey = skyColor === 'grey';
var isNameValid = isValueOneOf(name, ['ozbarry', 'web-dev']);
var isN2Or999 = isValueOneOf(n, [2, 999])

var canDoThing = isHourBetween6And14 && isSkyGrey && isNameValie && isN2Or999;

if (canDoThing) {
  // Do a thing here
}

这是一种完全自以为是的做法，并且大多数人都不喜欢他们的代码在重构后变大，但是拥有可维护的代码比使用更小的代码更好。

Answer 3

if(
    (condition 1) &&
    (condition 2 ==  condition 3) &&
    (false && (condition 6 == condition 7)
        || ((condition 8 && condition 9) && (condition 10 == condition 11)))
  )

如果“condtion4＆amp;＆amp; condition 5”评估为false，则该语句为false。当遇到如此复杂的“if”条件时，正确使用间距和缩进将有助于提高可读性。您也可以尝试将其分解为较小的条件语句，从而产生布尔结果。

Answer 4

尝试将每个条件重写为函数以使其更具可读性。尝试以一种使它们有意义的方式命名函数（试图检查的条件是什么）

e.g。

function satisfiesXYZCondition = function (){
   (condition 4 && condition  5) && (condition 6 == condition 7)
}

理想情况下，您应该使用一个描述您要检查的内容的函数替换if语句中的所有条件。

如何评估是否有很多＆amp;＆amp;和和||条件

4 个答案: