JS中的双问号(空值合并运算符)
前言
?? 双问号
称为空值合并运算符
,是ES2020
的一个新特性,它的作用是当一个表达式是null
或undefined
时,为变量设置一个默认值。MDN解释点我
由于 ||
是一个布尔逻辑运算符,左侧的操作数会被强制转换成布尔值用于求值。任何假值(0
, ''
, NaN
, null
, undefined
)都不会被返回。这导致如果你使用0
,''
或NaN
作为有效值,就会出现不可预料的后果。空值合并运算符
可以避免这种陷阱,其只在第一个操作数为null
或 undefined
时(而不是其它假值)返回第二个操作数.
空值合并运算符
在左侧
的值是null
或undefined
时会返回问号右边的表达式
。
结论
不同于逻辑或||
逻辑与&&
,空值合并运算符会允许把 0
和 空字符串‘’
作为有效的数值。如果同时使用了||或&& 和??
,要在逻辑||或&&上加上括号
。js
无法决定首先执行哪个操作符,我们需要使用括号来明确告知表达式的优先级,否则将会报错
。
用法
let a = null;
let b = a ?? 'FuritBro';
console.log(b); // 'FuritBro';
let b = undefined ?? 'FuritBro';
console.log(b); // 'FuritBro'
不同于js
逻辑或||
,空值合并运算符
不会再左侧操作数为假值时返回右侧操作数。之所以引入空值合并运算符
是因为我们有时候想把假值如0
和 空字符串“”
视为有效的数值。而逻辑||
操作符不会返回假值。而如果使用了空值合并运算符
,可以做到只把null
和undefined
替换为一个预定义的值。如下:
let a = 0;
let b = a ?? 'FuritBro'
console.log(b); // 0
或
let a = '';
let b = a ?? 'FuritBro'
console.log(b); // ''
如果同时出现 ||或&&
和 ??
,js
无法决定首先执行
哪个操作符,需要用括号来明确告知表达式的优先级,如下:
let a = null;
let b = undefined;
let c = a || b ?? 'FuritBro';
console.log(c); // 报错 Uncaught SyntaxError: Unexpected token '??'
下面的代码则会优先执行括号内的表达式:
let a = null;
let b = undefined;
let c = (a || b) ?? 'FuritBro';
console.log(c); // 'FuritBro'
或者
let a = null;
let b = undefined;
let c = a || (b ?? 'FuritBro');
console.log(c); // 'FuritBro'
你学废了吗?
转载自:https://juejin.cn/post/7190247164545597499