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

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;
}

此功能的目的是评估井字游戏的赢家。平方参数获取一个类型的九个值的阵列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”，则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价值的结果。如果左侧操作数的值为true，则评估&&其右侧操作数并将该值作为结果。

因此"X" && true && true演算值为true && true其演算值为true。

相反，===运算符先评估其左操作数，然后评估其右操作数，再评估其右操作数，并比较结果是否严格相等（类型和值相同）。它也由左到右结合，所以"X" === "X" === "X"是("X" === "X") === "X"这true === "X"是false，因为true不严格相等"X"。

¹“ falsy”-在布尔上下文（例如，if条件）中使用时，如果值强制为，则为falsyfalse。该falsy值0，""，null，undefined，NaN，当然false。所有其他价值观都是真实的  ，它们是强制性的true。