ES12 Nullish coalescing 运算符实现对象属性条件赋值的用法及适用场景

替代写法 #

你要的「仅当对象c键未被预先赋值时才赋值」的需求，可以直接用ES12新增的逻辑空赋值运算符（??=） 一行实现，比传统if写法更简洁：

a.c ??= 1;

如果不用赋值运算符的衍生写法，基础的空值合并运算符（??）也可以实现等价逻辑：

a.c = a.c ?? 1;

特殊值处理逻辑 #

空值合并运算符家族仅将null和undefined判定为需要触发兜底逻辑的空值，对其他假值的处理规则如下：

• 数值0：判定为有效值，不会触发兜底
• 空字符串''：判定为有效值，不会触发兜底
• 布尔值false：判定为有效值，不会触发兜底

这和你原来用的!a.c判断逻辑完全不同：!运算符会把所有假值（0、''、false、NaN、null、undefined）都判定为真值，会误覆盖上述合法的假值取值，这也是传统写法常见的隐性bug来源。

生产场景使用建议 #

空值合并相关运算符不能完全覆盖所有场景、不建议无差别全量替换传统写法，具体选用规则如下：

• 如果你的业务逻辑是「仅当属性未定义/显式赋值为null时才赋值」，优先用??/??=，语义更明确，也能避免误覆盖合法假值的bug
• 如果你的业务逻辑是「只要属性是假值（包括0、''、false）就要重新赋值」，则需要沿用传统的if (!a.c)写法，或者用ES12的逻辑或赋值运算符a.c ||= 1，这种场景下空值合并运算符不适用

目前主流浏览器、Node.js 16及以上版本都原生支持空值合并相关运算符，低版本运行环境也可以通过Babel转译支持，只要明确业务判断逻辑，生产环境可以放心使用。

内容的提问来源于stack exchange，提问作者alexzedim