尝试理解 React JS 示例中使用的逻辑运算符 (a && a === b && a === C)

Question

有人可以用例子解释上面的返回内容。当您将其更改为 ( a === b ===C) 时会发生什么。一直试图在 reactjs.org 中更好地理解该逻辑，虽然运作良好，但我仍然不清楚该逻辑是如何工作的

从 React 教程复制的示例代码

`

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],
    ];
    //alert(lines.length);
    for (let i = 0; i < lines.length; i++) {
        const [a, b, c] = lines[i];
        //alert(squares[a]);
        if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
            return squares[a];
        }
    }
    return null;
}

`

来自 ReactJS.org https://reactjs.org/tutorial/tutorial.html

Answer 1

JavaScript 的if语句（和其他流控制结构）强制值，如果它们还不是布尔值。线

if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {

用 将三个表达式连接在一起&&，对它们进行逻辑 AND 运算。这三个表达式是：

• squares[a]
• squares[a] === squares[b]
• squares[a] === squares[c]

&&只需要两个操作数（两边的），我们称它们为xand y( x && y)。它进行评估x，如果结果为假，¹ 将该结果作为&&结果；否则，它会评估y并将其作为&&结果：

if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {

因此，squares[a] && squares[a] === squares[b]如果它的两个操作数的计算结果都为真值，则为真，如果其中任何一个的计算结果为假值，则为真。

然后将其结果（我们称之为r）用于 in r && squares[a] === squares[c]，如果两个操作数都具有真值，则它也是真值，如果它们中的任何一个都是假值，则它也是真值。

完成所有操作后，if将 true/falsy 结果强制为 boolean (truthy => true, falsy => false) 并分支到ifif 条件的主体中true。

当你改变它时会发生什么 ( a === b ===C)

它会停止工作，因为a === b === C它不会做你认为它会做的事情。它确实是a === b，结果是true或false（称之为r），然后是r === C。除非C是布尔值，否则为假。

¹假-如果一个值在转换为布尔值时转换为 ，则该值是假的false。falsy 值是0, NaN, "", null, undefined, 当然，false（奇怪的是，document.all由于历史原因，在浏览器上也是假的——详细信息请参见我的书JavaScript: The New Toys 的第 17 章，如果您感兴趣的话）。所有其他值都是真实的。