JavaScript里如何根据条件为对象赋值

在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。在我们使用??和||的时候，需要注意到这点细微的差别，否则会影响到程序结果的正确性。