??= 操作符

一、什么是 ??= 操作符

仅当变量的值为 nullundefined 时才会赋予它一个默认值,而不会影响 0、false、`` '' 等有效的“假值”。

二、使用对比

1:传统

// 传统方法:通过 if 语句检查和赋值
if (user.name === null || user.name === undefined) {
  user.name = '访客';
}

// 使用 ??= 简化后的代码
user.name ??= '访客';

在这里,user.name ??= '访客' 只会在 user.name 为 null 或 undefined 时赋值为 '访客',
否则保留现有值。相比传统写法,代码简洁了许多,也更清晰。

三、??= 的典型业务应用场景

function setDefaultUsername(user) {
  user.username ??= '访客';
}

let userProfile = { username: null };
setDefaultUsername(userProfile);
console.log(userProfile.username); // 输出: 访客

userProfile = { username: '小明' };
setDefaultUsername(userProfile);
console.log(userProfile.username); // 输出: 小明
这里,user.username ??= '访客' 会检查 username 是否为 null 或 undefined。
如果是,则赋值为“访客”;否则保留原有值。非常适合在用户系统中设置默认显示名。

四、为什么选择 ??=

??= 出现之前,我们有几种方法可以设置默认值,但每种方式都有其缺点:
// 使用 if 语句 - 繁琐且重复
if (user.name === null || user.name === undefined) {
  user.name = 'Anonymous';
}

// 使用 || 运算符 - 覆盖太多
user.name = user.name || 'Anonymous';  // 会替换 '', 0, false 等有效值

// 使用三元运算符 - 表达式冗长且难以阅读
user.name = user.name === null || user.name === undefined
  ? 'Anonymous'
  : user.name;

// 使用 ??= - 简洁、精确
user.name ??= 'Anonymous';
??= 的优势在于它的精确性。仅当变量真的是“没有值”时(即 null 或 undefined),它才会赋予默认值,因此适用于保留有效的 0、空字符串或 false 等“假值”数据:
let score = 0;
score ??= 100;    // 仍然保持 0

let tag = '';
tag ??= 'default'; // 仍然保持空字符串

let active = false;
active ??= true;   // 仍然保持 false
这种精确性能够有效避免使用更宽泛检查带来的潜在问题。在构建用户界面或处理表单数据时,我们通常希望保留这些“假值”而不是将它们替换为默认值

五、||、&& 与 ?? 的适用场景

1:||:当变量值是所有“假值”(null、undefined、0、false、'' 等)时都会触发,可以快速设置默认值,但可能会覆盖有效数据。
2:&&:用于在两个条件都成立的情况下进行赋值操作,多用于复杂条件判断。
3:?? 和 ??=:仅在值为 null 或 undefined 时触发,因此特别适合保留 0、false、空字符串等有效数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值