初探 JS 中优雅访问属性：?.、?? 和 ??= 的妙用
2023-11-29 10:15:01
揭秘 JavaScript 中属性访问的三剑客：?.、?? 和 ??=
在 JavaScript 的浩瀚世界中，变量和对象属性面临着随时可能为 null 或 undefined 的挑战。过去，处理此类情况需要冗长的代码和繁琐的条件判断，既费时又容易出错。但随着现代 JavaScript 的不断发展，引入了三个优雅而简练的运算符：?.、?? 和 ??=，它们为属性访问开辟了更直观、更安全、更高效的途径。
安全导航：?. 运算符
想象一下，你有一个用户对象，包含了姓名、地址和电话号码等信息。但是，某些用户可能没有填写所有信息，导致某些属性为 null。使用传统的方法，你需要进行一系列的条件检查，确保属性不为 null 才能访问其值。
const user = {
name: "John",
address: {
city: "London",
},
};
const city = user?.address?.city; // 安全地访问属性，避免返回 null 或 undefined
而使用 ?. 运算符，它能够安全地访问嵌套属性，无需担心 null 或 undefined 的干扰。当对象或属性为 null 或 undefined 时，?. 运算符会优雅地返回 undefined。
备用值救援：?? 运算符
有时，你想在属性为空时提供一个备用值，避免返回恼人的 null 或 undefined。?? 运算符完美地解决了这个问题，它允许你指定一个备用值，在属性为空时返回。
const user = null;
const username = user?.name ?? "Guest"; // 如果 user.name 为 null 或 undefined，则返回备用值 "Guest"
?? 运算符就像是属性访问的守护天使，确保属性永远不会返回 null 或 undefined，取而代之的是你指定的备用值。
优雅赋值：??= 运算符
在处理可能为 null 或 undefined 的属性时，赋值操作也变得棘手。但是，??= 运算符结合了 ?? 运算符和赋值运算符 (=)，提供了一种简便优雅的赋值方式。
const user = {};
user?.name ??= "John"; // 如果 user.name 为 null 或 undefined，则赋值为 "John"
??= 运算符会在属性为空时将其赋值为指定的默认值，否则不做任何操作。它就像一个属性赋值的贴心管家，确保属性始终拥有一个有效的值。
总结
?.、?? 和 ??= 运算符是 JavaScript 中属性访问的革命性武器。它们提供了优雅、安全且高效的途径，让你轻松应对 null 和 undefined 值带来的挑战。通过熟练掌握这些运算符，你可以显著提高代码的可读性、简洁性和健壮性。
常见问题解答
1. 什么时候使用 ?. 运算符？
当你想安全地访问可能为 null 或 undefined 的属性时，使用 ?. 运算符。它会优雅地返回 undefined，而不是 null 或 undefined。
2. ?? 运算符与 ?. 运算符有何不同？
?? 运算符用于在属性为空时提供备用值。当属性为 null 或 undefined 时，它会返回你指定的备用值。
3. ??= 运算符有何特殊之处？
??= 运算符结合了 ?? 运算符和赋值运算符 (=)，允许你在属性为空时优雅地赋值。
4. 这三个运算符如何简化代码？
这些运算符消除了条件判断的需要，简化了代码并提高了可读性。
5. 为什么 ??= 运算符特别适用于默认值为空的情况？
??= 运算符简化了赋值操作，尤其是在处理可能为 null 或 undefined 的属性时，并确保属性始终拥有一个有效的值。
