在JavaScript里,我们有时候需要根据一些条件给一个变量赋值,比如,当value是有值的时候,要显示这个值,没有值的时候,显示"--
"。
function process(value) { let displayValue; if (value !== null || value !== undefined) { displayValue = value; } else { displayValue = '--'; } // 后续处理代码... }
代码写的好长啊,看起来有点累,有没有简单点的写法?让我们看看懒人的写法吧。
function process(value) { let displayValue = (value !== null || value !== undefined) ? value : '--'; // 后续处理代码... }
在这里,用三目运算符(ternary operator),可以只用一行代码就达到上面多行代码就能达到的效果,太好了!
不过,上面的这个场景,三目运算符的条件判断部分,有点长,能不能继续简化?
能!
function process(value) { let displayValue = value ?? '--'; // 后续处理代码... }
这里,我们使用空值合并操作符(??
)来达到这一效果。空值合并操作符(??
),英文称之为Nullish coalescing operator,当左侧的操作数为 null
或者 undefined
时,返回其右侧操作数,否则返回左侧操作数。
具体关于空值合并操作符的详细解释,可以参考MDN。
||
)的区别对于上面的场景,因为我们只是希望value是空的时候,才显示"--"。
在给一个变量赋值的时候,如果我们的条件是这个变量不能是 (0
, ''
, NaN
, null
, undefined
)中的一个,那么我们可以用逻辑或操作符(||
)来实现:
let count = 0; let qty = count || 42; let qty1 = count ?? 42; console.log(qty); // 输出42 console.log(qty1); // 输出0
上面的例子里,qty的值就是42,而qty1的值是0。在我们使用??
和||
的时候,需要注意到这点细微的差别,否则会影响到程序结果的正确性。