JavaScript 安全运算符

在 JavaScript 中，我们经常需要检查一个值是否为 null 或 undefined，以避免出现异常或错误的情况。通常，我们会使用条件语句或三目运算符来处理这种情况。不过，这样的代码往往会变得非常冗长和难以理解，尤其是在处理多层嵌套的对象时更为明显。

幸运的是，在 ECMAScript 2020 中引入了安全运算符，也称为 "可选链操作符"，可以帮助我们更轻松地处理这个问题。

什么是 JavaScript 安全运算符？

JavaScript 安全运算符是一种新的语言特性，它提供了一种简化 JavaScript 中检查 null 或 undefined 值的方法。JS 安全运算符的作用是允许我们直接访问一个嵌套对象属性，而不必检验前面的引用是否为 null 或 undefined。

使用 JavaScript 安全运算符

安全运算符由问号和点号组成，写作 ?.。它可以放在属性名、属性访问表达式或函数调用表达式（即方法调用）的任意两个元素之间。

举个例子，假设我们有一个简单的对象 person，它包含了名字、地址和电话等信息。如果我们想要获取该对象中的某个属性（比如 person.address.city），在没有安全运算符的情况下，我们需要检查 person、address 和 city 是否都存在，这样会导致代码比较臃肿：

if (person && person.address && person.address.city) {
  // do something with person.address.city
}

使用安全运算符后，该代码可以简化为：

if (person?.address?.city) {
  // do something with person.address.city
}

在这里，问号 ? 表示前一个元素是否存在。如果该元素不存在，那么 JavaScript 引擎会停止执行后面的方法或属性访问。这样，我们就避免了使用 && 运算符的大量重复，使得代码更简洁、易读。

另外需要注意的是，如果我们要访问的属性名中包含了动态部分，也可以使用安全运算符。例如：

const propName = 'city';
// 这里的写法等效于 person?.address[propName]
if (person?.address?.[propName]) {
  // do something with person.address.city
}

安全运算符和空合并运算符的结合使用

安全运算符非常适合与空合并运算符结合使用，这两者的作用是在保证代码简短明了的同时尽可能地避免空值。

空合并运算符 ?? 是另外一种 ECMAScript 2020 引入的新特性，其作用是检查变量是否为 null 或 undefined，如果是，则返回一个默认值。下面是一些使用空合并运算符的例子：

const x = null ?? "default"; // "default"
const y = undefined ?? "default"; // "default"
const z = "value" ?? "default"; // "value"

可以看到，如果空合并运算符左侧的值为 null 或 undefined，那么表达式的结果就会是右侧的默认值；否则，结果就是左侧的值。

当安全运算符与空合并运算符一起使用时，我们可以传入一个函数，以便在左侧的值为 null 或 undefined 时计算默认值。下面是一个使用示例：

const user = null;
const username = user?.name ?? getUsername();

在这里，我们首先使用安全运算符获取了 user 对象的 name 属性，然后通过空合并运算符检查 name 是否为 null 或 undefined。如果是，我们则调用 getUsername() 函数来计算默认值。

总结

JavaScript 安全运算符是 ECMAScript 2020 中引入的新特性，它可以大大简化我们对嵌套对象的访问。使用安全运算符可以避免冗长的条件语句和三目运算符，同时也可以让代码更加简洁明了。

安全运算符和空合并运算符一起使用可以进一步提高代码的维护性，帮助我们更好地处理空值的情况。在开发 Web 应用时，我们可以尽可能多地使用这些特性来提高代码的质量和可维护性。