如何正确使用JavaScript链式比较运算符？React条件判断异常排查

逻辑运算符&&的优先级高于||，你编写的条件语句没有明确标注运算优先级，导致实际执行逻辑和你的预期不一致。

你原本写的条件语句：

if (appState.newUser!==true && myMessageCount !== null || mySentMessageCount !== null)

在JS中实际会被解析为：

if ( (appState.newUser!==true && myMessageCount !== null) || mySentMessageCount !== null )

也就是说只要mySentMessageCount !== null的结果为真，不管appState.newUser的值是什么，整个判断条件的结果都会为真，这就是为什么newUser为true时if内代码依然会执行的原因。

你将第一个条件修改为appState.newUser===false后问题仍然存在，也是同一个原因：只要mySentMessageCount !== null成立，整个判断结果就为真，第一个条件不会对最终结果产生影响。

按照你的预期逻辑，给两个或判断的条件加上括号明确优先级即可，修改后代码如下：

useEffect(() => {
    if (appState.newUser!==true && (myMessageCount !== null || mySentMessageCount !== null)) {
        console.log("IF statement executed")
    }
},[myMessageCount, mySentMessageCount, appState.newUser])

修改后会严格按照你预期的逻辑执行：仅当appState.newUser不为true，且myMessageCount和mySentMessageCount任意一个不为null时，才会执行if内的代码。

补充说明：如果你使用appState.newUser === false作为第一个判断条件，需要注意newUser为undefined或null时，该判断结果为假，和appState.newUser !== true的判断结果不同，可以根据你的实际业务场景选择合适的判断写法。

内容的提问来源于stack exchange，提问作者Ray Purchase