在 JavaScript 中，?. 是一种可选链操作符（Optional chaining operator），它可以简化访问可能为null或undefined的属性或方法的代码书写，避免因为对象链中某个属性或方法不存在而导致的错误。?. 的使用方式如下：
1. 访问属性
// 普通访问方式
const name = user.profile.name; // 如果 user 或 profile 为 null 或 undefined，将会导致错误
// 使用可选链操作符
const name = user?.profile?.name; // 如果 user 或 profile 为 null 或 undefined，name 将会取到 undefined
2. 调用方法
// 普通调用方法方式
const result = app.getData(); // 如果 app 为 null 或 undefined，将会导致错误
// 使用可选链操作符
const result = app?.getData(); // 如果 app 为 null 或 undefined，result 将会取到 undefined
3. 数组访问
const arr = [1, 2, 3];
const value = arr?.[0]; // 如果 arr 为 null 或 undefined，value 将会取到 undefined
4. 函数调用
function sayHello() {
console.log('Hello, world!')
}
const func = sayHello?.(); // 如果 sayHello 为 null 或 undefined，调用将会被忽略
可选链操作符 ?. 使得我们可以更加安全和简洁地访问对象的属性和方法，避免代码中大量的空值检查，提高代码的可读性和健壮性。需要注意的是，?. 操作符在一些较老版本的 JavaScript 环境可能不被支持，因此在使用时需要注意环境的兼容性。
兼容性情况
可选链操作符 ?. 在 JavaScript 中的兼容性随着不同 JavaScript 引擎和浏览器的更新而有所变化。以下是可选链操作符的兼容性情况：
1. Node.js
- 可选链操作符从 Node.js 14 版本开始得到支持，但需要在 JavaScript 文件中指定
ECMASCript版本 支持。 - 可以通过在项目中的
.eslintrc 文件中设置 ecmaVersion: 2020 来指定支持 ECMAScript 2020。
2. 现代浏览器
- Chrome、Firefox、Edge 等现代浏览器在较新的版本中已经支持可选链操作符。
- 可以在 Can I Use 网站上查看各个浏览器对可选链操作符的支持情况。
3. Babel 转译
- 如果项目需要兼容性，可以使用 Babel 将项目中的可选链操作符转译为普通的 JavaScript 代码，以确保在旧版 JavaScript 引擎中的兼容性。
- 可以在 Babel 的官方文档中找到相关的插件和配置信息。
4. Polyfill
- 也可以使用相应的 Polyfill 库来实现可选链操作符在旧版 JavaScript 环境下的同等效果。
- 一些流行的 JavaScript Polyfill 库（如 core-js）提供了可选链操作符的支持。
总的来说，随着 JavaScript 标准的不断发展和现代浏览器的更新，可选链操作符在很多环境中都得到了良好的支持。但在项目中应根据实际情况考虑目标用户群体的环境兼容性，选择合适的方案来处理可选链操作符的兼容性问题。