空值合并

2024年03月11日

柏拉文

越努力，越幸运

一、认识

---

?? 空值合并运算符 ES12（ES2021）新增的特性，TypeScript 3.7 支持了这个特性。当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。与逻辑或操作符（||） 不同，||会在左侧操作数为 false 值（例如，'' 或 0）时返回右侧操作数 。也就是说，如果使用 || 来为某些变量设置默认值，可能会遇到意料之外的行为：

二、语法

---

console.log(0 || '哈哈'); // 哈哈
console.log('' || '哈哈'); // 哈哈
console.log(undefined || '哈哈'); // 哈哈
console.log(null || '哈哈'); // 哈哈

console.log(0 ?? '哈哈'); // 0
console.log('' ?? '哈哈'); // ''
console.log(undefined ?? '哈哈'); // 哈哈
console.log(null ?? '哈哈'); // 哈哈

三、对比

---

3.1 || 操作符与 ?? 操作符区别

??操作符只有当左侧的操作数为 null 或者 undefined 时，才会返回其右侧操作数。但是||操作符中当左侧的操作数为null、undefined、空字符串、0 都会返回右侧操作数。

console.log(0 || '哈哈'); // 哈哈
console.log('' || '哈哈'); // 哈哈
console.log(undefined || '哈哈'); // 哈哈
console.log(null || '哈哈'); // 哈哈

console.log(0 ?? '哈哈'); // 0
console.log('' ?? '哈哈'); // ''
console.log(undefined ?? '哈哈'); // 哈哈
console.log(null ?? '哈哈'); // 哈哈