javascript - 关于逻辑运算符&&的理解问题

Question

我对React.js教程中的代码段有疑问。我是JavaScript的初学者，所以如果这是一个愚蠢的问题，请原谅。

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

此功能的目的是评估井字游戏的赢家。 square参数获取一个九个值的数组，类型为 null， "X"或 "O"。

假设数组的前三个值为 "X"，则if语句将解析为 "X" && "X" === "X" && "X" === "X"。这将导致 "X" === "X" === "X"。因此，它应该返回 true，并且使用“X”的玩家已经赢了。

但是，例如，如果我在JSBin中尝试， console.log("X" === "X" === "X")返回 false。我只是不明白，因为在我看来 "X"等于 "X"等于 "X"。

谁能解释我的推理错误在哪里？

非常感谢你!

塞巴斯蒂安·贝尔(Sebastian Beier)

Answer 1

您对&&运算符的推理是正确的。

问题是您对===运算符的理解。在数学中，您可以按期望的方式使用等式(x = x = x)，并且将获得正确的(true)语句。但是在编程中，它不是这样工作的。

每个运算符(operator)都将一一评估。

因此，您从开始:

"X" === "X" === "X"

这将被评估为两个单独的语句。首先为该运算符评估左侧的运算符(这被称为运算符 associativity)。您可以将第一个语句放在方括号中使其明确，例如:

("X" === "X") === "X"

方括号中的语句将被评估，并保留:

true === "X"

现在，它的值为 false，因为 true不等于 "X"。

我建议您 从不尝试以这种方式使用等于运算符( a === b === c)。其他相等运算符(例如 !==)也是如此。这不是典型的编程模式，并且可能以混淆您的方式使其他程序员困惑。

要测试三个项目是否相等，请始终使用 &&运算符，如下所示: a === b && b === c。这清楚地表明，每个相等性测试都是一个接一个地进行的。