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"。

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

非常感谢您！

塞巴斯蒂安·贝尔

Answer 1

假设数组的前三个值为“ X”，则if语句将解析为“ X” &&“ X” ===“ X” &&“ X” ===“ X”。这将导致“ X” ===“ X” ===“ X”。

否，它将导致"X" && true && true：

if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c])
//  ^^^^^^^^^^    ^^^^^^^^^^^^^^^^^^^^^^^^^    ^^^^^^^^^^^^^^^^^^^^^^^^^
//     "X"                 true                          true

&&评估其左操作数，如果结果为 falsy ¹，则得出该falsy值。如果左侧操作数的值为 truthy ，则&&会评估其右侧操作数并将其值作为结果。

因此，"X" && true && true评估为true && true，后者评估为true。

相反，===运算符先评估其左操作数，然后评估其右操作数，再评估其右操作数，并比较结果是否严格相等（相同的类型和值）。它也是从左到右的关联，因此"X" === "X" === "X"是("X" === "X") === "X"，而true === "X"是false，因为true不严格等于{{1 }}。

¹“ falsy”-在布尔上下文（例如，"X"条件）中使用时，如果值强制为if，则值为 falsy 。伪造的值是false，0，""，null，undefined，当然还有NaN。所有其他值都是 truthy ，它们强制为false。

Answer 2

因为===是二进制运算符（它一次只能处理两个操作数）。

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

等同于

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

（首先，在前两个操作数之间评估第一个===，然后将结果与第三个操作数进行比较。）

那等于

true === "X"

当然是false。

如果要测试逻辑表达式的正确性，则需要完整复制&& s和所有内容：

console.log("X" && "X" === "X" && "X" === "X"); // true

Answer 3

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

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

每个运算符都被一个一个地评估。

因此，您从开始：

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

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

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

计算括号中的语句，保留：

true === "X"

由于false不等于true，因此现在求值为"X"。

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

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

Answer 4

非常感谢大家的回答！他们都帮了我很多忙！

现在我想我明白了。

要测试三个项目是否相等，请始终使用&&运算符，如下所示：a === b &&> b === c。

这确实比React教程中的解决方案更容易理解，至少对我而言。

关于逻辑运算符&&

4 个答案: