JavaScript 中的 . 和 ?. 操作符的区别和优缺点

?. 操作符是什么？

JavaScript 中的 ?. 是可选链操作符，它的作用是在访问复杂对象结构或调用方法时避免错误，特别是在某些属性/方法不存在时，不会抛出异常错误。

该操作符可以放在对象属性、函数调用以及数组索引之后。如果该属性、方法或索引的值存在，则执行后续操作，如果不存在，则立即返回 undefined。

. 和 ?. 区别：

在 JavaScript 中，.（点）操作符常常用于访问对象的属性和方法，?.（可选链）操作符是 ES2020 引入的新语法，它可以用于在必要时访问属性或方法。下面是它们的优缺点对比：.

1、点操作符（.）的优点：

简单易懂：.（点）操作符是 JavaScript 中最基本的操作符之一，几乎所有开发者都很熟悉。
速度快：.（点）操作符比可选链操作符.?更快。因为可选链操作符需要进行额外的检查，在运行时增加了一些性能开销。
更直观：.（点）操作符可以直截了当地获取属性或方法。

2、点操作符（.）的缺点：

可能会抛出异常：如果尝试访问不存在的属性或方法，将会抛出“TypeError”异常。这需要在代码中进行异常处理（例如，使用 try-catch 语句等）
嵌套层数过多：当需要访问嵌套层数过多的对象时，.（点）操作符会变得很冗长而难以阅读，特别是在访问的对象的某些属性或方法不存在时。

1、可选链操作符（?.）的优点：

安全性更高：可选链操作符（?.）可以帮助我们安全地访问对象的属性或方法，当访问到不存在的属性或方法时，它不会抛出异常。
更简洁：使用可选链操作符（?.）可以让代码变得更简洁，特别是在访问嵌套较深的对象时更为明显。

2、可选链操作符（?.）的缺点：

速度稍慢：可选链操作符（?.）需要进行额外的检查，可能会在运行时增加一些性能开销。
可能会返回 undefined：由于可选链操作符（?.）不会抛出异常，当访问的属性或方法不存在时，它会返回 undefined。

总结：

.（点）操作符是 JavaScript 的基本操作符之一，简单易懂，速度快，但在处理嵌套对象时会变得冗长。可选链操作符（?.）是一个相对新的语法，可以帮助我们安全地访问对象的属性或方法，但运行时性能相对 . (点) 操作符略低，可能会返回 undefined。因此，我们可以根据不同的场景来选择使用哪种操作符。

例如，假设我们有一个名为 person 的对象，它有一个名为 address 的属性，address 属性有一个名为 city 的子属性。在没有 ?. 操作符的情况下，我们需要使用长串的 if 语句检查这些属性是否存在，而使用 ?. 操作符可以简化这个过程，使代码更加简洁和易读：

// Without optional chaining
if (person && person.address && person.address.city) {
  console.log(person.address.city);
}

// With optional chaining
console.log(person?.address?.city);

注意事项：

使用 ?. 操作符时需要注意两点：

1. ?. 操作符只能在支持 ES2020 标准的 JavaScript 引擎下使用。

2. ?. 操作符不能用于写入属性或调用函数。如果你需要写入属性或调用函数，你仍然需要使用普通的点操作符或方括号操作符。