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