我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

本文普及一下一个JavaScript的最新特性:双问号运算符,或者称为空值合并运算符。当然,这个是最新的ES2020里面的特性,最新的nodejschrome浏览器,都是支持这个空值合并双问号运算的。

苏南大叔:如何理解JavaScript的双问号运算符?空值合并运算符 - js空值合并运算符
如何理解JavaScript的双问号运算符?空值合并运算符(图4-1)

苏南大叔的“程序如此灵动”技术博客,记录苏南大叔的编程所学所想。本文测试环境:win10chrome@116.0.5845.141node@16.14.2。需求其实也非常简单:当一个变量是null或者undefined的时候,给它赋值一个合适的默认值。

双问号运算、 空值运算符

JavaScript双问号运算符,也称为空值合并运算符。它是 ES2020 的一个新特性,这个运算符会在左侧表达式是nullundefined时返回右侧的表达式。

a = b??c

相当于:

a = isNull(b) ? c : b ;

苏南大叔:如何理解JavaScript的双问号运算符?空值合并运算符 - 谷歌浏览器运算结果
如何理解JavaScript的双问号运算符?空值合并运算符(图4-2)

测试代码:

a = null ?? "a";
b = undefined ?? "b";
c = "" ?? "c";
d = 0 ?? "d";
e = false ?? "e";
console.log(a, b, c, d, e);

输出:

a b  0 false

从运算结果上看,使用了空值合并运算符,只把nullundefined替换为一个预定义的值。对于空字符串和0false都并不会做任何修改。

运算优先级

出于安全考虑,双问号配合 逻辑或(||)和逻辑与(&&)时,需要使用到小括号。目的是明确其优先级。测试代码:

s = "su";
n = "nan";
sn1 = (s || n) ?? "sn1";
sn2 = (s && n) ?? "sn2";
console.log("sn1", sn1, (s || n) == s);
console.log("sn2", sn2, (s && n) == n);
// sn3 = s || n ?? "sn3";   // '||' and '??' operations cannot be mixed without parentheses.

输出:

sn1 su true
sn2 nan true

苏南大叔:如何理解JavaScript的双问号运算符?空值合并运算符 - nodejs运算结果
如何理解JavaScript的双问号运算符?空值合并运算符(图4-3)

不使用小括号的时候,可能会得到错误提示如下:

 '||' and '??' operations cannot be mixed without parentheses.

苏南大叔:如何理解JavaScript的双问号运算符?空值合并运算符 - 错误提示信息
如何理解JavaScript的双问号运算符?空值合并运算符(图4-4)

结束语

本文讲述的是js的双问号运算符,也称空值合并运算符。更多苏南大叔的node经验文章,请点击:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   js