JavaScript 中被忽略的两个神奇操作符：?. 和 ??

在 JavaScript 的浩瀚海洋中，存在着两个鲜为人知但功能强大的操作符：?. 和 ??。它们在处理 null 和 undefined 值方面具有非凡的力量，从而简化了我们的编码体验，并为条件渲染和类型检查提供了优雅的解决方案。

?. 操作符：优雅处理可选值

假设我们有一个对象，它可能包含一个可选的属性，我们希望在使用它之前对其进行检查。传统上，我们会使用冗长的 if-else 语句来处理这种情况：

if (obj.prop) {
  // 使用 obj.prop
} else {
  // obj.prop 为 null 或 undefined
}

但是，使用 ?. 操作符，我们可以用更简洁的方式编写此代码：

obj.prop?.someFunction(); // 如果 obj.prop 存在，则调用 someFunction()

?. 操作符就像一个安全网，它只会在 obj.prop 存在时才调用 someFunction()。如果 obj.prop 为 null 或 undefined，则不会执行任何操作，从而避免了潜在的错误和意外行为。

?? 操作符：提供默认值

?? 操作符是处理 undefined 值的另一个宝贵工具。它允许我们为变量指定一个默认值，以防它未被定义。

const name = username ?? "Guest"; // 如果 username 未定义，则 name 为 "Guest"

与 ?. 操作符类似，?? 操作符也会在值为 null 或 undefined 时返回右侧操作数。这对于设置默认值非常有用，尤其是在处理表单输入或来自 API 的数据时。

条件渲染中的应用

?. 和 ?? 操作符在条件渲染中也大放异彩。我们可以使用它们来优雅地处理可能为 null 或 undefined 的值。

{user && <p>欢迎回来，{user.name}！</p>} // 如果 user 存在，则渲染欢迎消息

如果没有 user，上面的代码将不会渲染任何内容，避免了潜在的错误和空白屏幕。

类型检查中的应用

除了处理 null 和 undefined 值之外，?. 和 ?? 操作符还可以用于类型检查。我们可以使用 ?. 操作符来检查属性是否存在，而使用 ?? 操作符来设置一个默认值，以防该属性不存在。

const type = obj?.type ?? "unknown"; // 如果 obj.type 存在，则为 type 赋值，否则为 "unknown"

这种用法可以简化代码并提高可读性，尤其是在处理可能具有不同属性的对象时。

结论

?. 和 ?? 操作符是 JavaScript 中经常被忽视的强大工具。它们简化了对 null 和 undefined 值的处理，并在条件渲染和类型检查等场景中提供了优雅的解决方案。通过掌握这些操作符，您可以编写更健壮、更可读的代码，从而提升您的 JavaScript 开发技能。