ES2020: 空值合并运算符??

前言

??运算符一直被遗忘了、最近在看代码时发现有点疑惑、故去查阅了相关文档、故简单记录下.

定义

空值合并运算符, 如果??前面是null或者undefined, 取后面的默认值; a ?? b的运算结果解析如下:

• a, 若a 不是null 或者 undefined;
• b, 其他情况

空值合并运算符: 可以认为是三元操作运算符(condition ? ifTrue : ifFalse)的简版.
其主要作用是若??操作符左侧非空(非undefined)、则返回左侧运算符；否则返回右操作符。
三元运算符写法: x = (a !== null && a !== undefined) ? a : b;

应用场景

为可能是未定义的变量提供一个默认值.(eg: 接口可能未返回该字段)

题目

有str1 str2 str3三个变量, 若str1不为空, 则返回str1; 否则若str2不为空, 则返回str2; 否则若str3不为空, 则返回str3; 否则返回默认值, 假定是'默认值'.
我们接下来看看不同的实现方案, 对比差异点。

实现方案对比

1. 传统的if()else{}语句

function testFn (){
    let str1
    let str2
    let str3
    if(str1 != null){
        return str1
    }else if(str2 != null){
        return str2
    }else if(str3 != null){
        return str3
    }else{
        return '默认值'
    }
}
const result = testFn()
console.log(result,'testFn')

2. 三元运算符?:

function testFn (){
    let str1
    let str2
    let str3
    const result = str1!=null ? str1: (str2!=null? str2: (str3!=null ? str3: '默认值'))
    return result
}
const result = testFn()
console.log(result,'testFn')

3. 空值合并运算符??

function testFn (){
    let str1
    let str2
    let str3
    const result = str1 ?? (str2 ?? (str3 ?? '默认值'))
    return result
}
const result = testFn()
console.log(result,'testFn')

跟||比较

思考: 若上述题换成用||实现, 是怎么个结果呢?

function testFn (){
    let str1
    let str2
    let str3
    const result = str1 || str2 || str3 || '默认值'
    return result
}
const result = testFn()
console.log(result,'testFn')

乍一看、是不是感觉||运算符跟??运算符是一样使用的, 无区别. 答案当然是否定的, 它们之间的主要区别是:

• || 无法区分false、0、空字符串、null、undefine、会被统一认定为false; 而?? 能区分、仅针对null、undefined的时候生效。 下来对比看看

// 假定从后台money字段、若money的值为undefined/null时，使用默认值[下面代码表示接口未返回该变量、或者返回的变量值是null]
const money = 0
console.log('||运算符', money || 100) //结果：||运算符 100
console.log('??运算符', money ?? 100) //结果：??运算符 0

经过对比你会发现、若金额为0时, 则不应该替换成默认值, 这时候??才能得出正确结果.

总结

??: 空值合并运算符, 更简洁的方式获取'已定义'的值, 并提供默认值.