在日常开发中,我们经常需要为变量设置默认值,比如用户配置、表单初始值等。JavaScript 在 ECMAScript 2021(ES12)中引入的
??=
操作符提供了一种更简洁的方案。作为“逻辑赋值操作符”的一部分,它不仅能让代码更清晰,还能避免误替换掉有效数据。
什么是
??=
操作符?
简单来说,
??=
是一个“智能守护者”:**仅当变量的值为
null
或
undefined
时才会赋予它一个默认值**,而不会影响
0
、
false
、
''
等有效的“假值”。
使用对比
先看看传统做法和
??=
的对比:
// 传统方法:通过 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
这种精确性能够有效避免使用更宽泛检查带来的潜在问题。在构建用户界面或处理表单数据时,我们通常希望保留这些“假值”而不是将它们替换为默认值。
||
、
&&
与
??
的适用场景
在 JavaScript 中,我们还可以使用
||
和
&&
处理默认值,但它们的适用场景不同:
||
:当变量值是所有“假值”(null
、undefined
、0
、false
、''
等)时都会触发,可以快速设置默认值,但可能会覆盖有效数据。&&
:用于在两个条件都成立的情况下进行赋值操作,多用于复杂条件判断。??
和??=
:仅在值为null
或undefined
时触发,因此特别适合保留0
、false
、空字符串等有效数据。
在需要确保变量只在“无值”情况下被覆盖时,
??=
操作符能提供最佳的精确控制。
总结
??=
操作符让 JavaScript 的默认值处理更加简洁和精确。无论是设置默认用户名、初始化配置项,还是处理表单初始值,
??=
都能帮助我们在确保数据完整的前提下,让代码更具可读性和实用性。
希望这个小技巧能让你的开发更高效!**如果你在使用
??=
时有其他技巧或心得,欢迎在评论区分享,我们一起讨论!**
版权归原作者 前端达人 所有, 如有侵权,请联系我们删除。