今天来看看前端面试题中常常被开发者混淆的运算符问题,逻辑或运算符(||)和空值合并运算符(??)。
基本定义
逻辑或运算符(||)是一个逻辑运算符,当左侧操作数为假值时返回右侧操作数。
空值合并运算符(??)是一个逻辑运算符,它在 ES2020(TC39 委员会批准的第 11 个 ECMAScript 版本)版本引入,当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数。
具体示例:
const a = null;
const b = undefined;
const c = 0;
// Output: FEDLAB
const result = a || b || c || 'FEDLAB';
// Output: 0
const result = a ?? b ?? c ?? 'FEDLAB';
从上面示例可以看到,如果使用 || 运算符来为某些变量设置默认值时,可能会遇到意料之外的行为。
优先级
?? 运算符的优先级和 || 运算符相同,在优先级表格中为 5,处在降低的位置。
?? 运算符与 || 或者 && 共用
官方给出的建议是不要将 ?? 运算符和 || 或者 && 运算符共用(可能是因为 ?? 运算符和其他逻辑运算符之间的运算优先级/运算顺序是未定义的),可能会抛出 SyntaxError 异常。
// Uncaught SyntaxError: Unexpected token '??'
const result = null || undefined ?? 'FEDLAB';
// Output: FEDLAB
const result = (null || undefined) ?? 'FEDLAB';
总结
逻辑或操作符(||)用于测试至少一个操作数是否为真值,而空值合并运算符(??)运算符常用于为变量提供默认值,但只将 null 或 undefeind 视为假值。