为何特定条件判断逻辑报错？&&与||判断差异解惑

问题场景 #

代码1（触发错误） #

<p>{params.value !== undefined || params.value !== null ? params.value.split("T")[0] : "no deadline set"}</p>

触发错误：Cannot read properties of null (reading 'split')

代码2（正常运行） #

<p>{params.value && params.value !== undefined ? params.value.split("T")[0] : "no deadline set"}</p>

你的核心困惑：

• 为何要对同一个变量使用&&进行判断，这看起来毫无意义；
• 认为null和undefined是不同的，当判断!==undefined时，null应该会执行params.value.split("T")[0]从而触发错误，但实际并未出现这种情况。

问题解析 #

先纠正代码1的逻辑错误 #

你对代码1的理解完全偏差了。params.value !== undefined || params.value !== null这个条件永远为true：

• 当params.value是undefined时，params.value !== null为true，整个或运算结果为true；
• 当params.value是null时，params.value !== undefined为true，整个或运算结果为true；
• 当params.value是有效值时，两个判断都为true，结果自然也是true。

所以不管params.value是undefined、null还是有效值，代码都会执行params.value.split("T")[0]，当值为null时，自然触发读取split属性的错误。

正确的判断逻辑应该是同时排除undefined和null，也就是用&&而非||：

<p>{params.value !== undefined && params.value !== null ? params.value.split("T")[0] : "no deadline set"}</p>

解答你的两个困惑 #

1. 代码2里的&&判断是不是多余的？

代码2里的params.value && params.value !== undefined，其实params.value本身就已经排除了null和undefined——在JavaScript中，null和undefined都是假值，当params.value是这两个值时，&&左边的表达式直接返回假值，整个条件为false，不会执行后面的params.value !== undefined判断，更不会走到split那一步。

所以这里的params.value !== undefined确实是多余的，完全可以简化成：

<p>{params.value ? params.value.split("T")[0] : "no deadline set"}</p>

注意：如果业务上允许params.value为其他假值（比如空字符串""、数字0、布尔值false）时执行split，那这种简化会把这些情况也归到“no deadline set”，此时需要更精确的判断。

2. 为什么代码2里null不会触发错误？

因为当params.value是null时，params.value && ...这个表达式的结果是null（假值），条件判断会直接走: "no deadline set"的分支，根本不会执行到params.value.split这部分代码。

你之前的误解是忽略了&&的短路求值特性——如果&&左边的表达式为假，右边的表达式会直接被跳过，不会执行。

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