在前端开发中，我们经常需要处理嵌套对象或数组的情况。而在处理这些数据时，我们往往需要一些安全的方式来避免出现 undefined 或 null 的错误。在 ES12 中，引入了 Optional Chaining 这个新特性，可以方便地解决这个问题。
Optional Chaining 是什么？
Optional Chaining 是一种新的语法，用于简化访问嵌套对象属性时的代码。它使用 ?. 运算符来检查属性是否存在，如果存在则返回属性值，否则返回 undefined。这个运算符可以在对象的属性访问、函数调用、数组索引等场景下使用。
举个例子，假设我们有一个嵌套对象 user，它有一个 address 属性，address 属性又有一个 city 属性。我们想要访问 user.address.city 属性，但是又不确定 user、address 或 city 是否存在。在以前的版本中，我们需要写一些冗长的代码来判断属性是否存在：
-- ----- -- ------------ -- ------------------ - ------------------------------- -
而在使用 Optional Chaining 后，可以简化为：
---------------------------------
这个语法非常简洁，而且不用担心属性不存在的问题。如果 user、address 或 city 不存在，它们的值会被自动赋值为 undefined。
如何在 Typescript 中使用 Optional Chaining？
TypeScript 是一种静态类型的 JavaScript 超集，它提供了更好的类型检查和代码提示功能。在 TypeScript 中使用 Optional Chaining 也非常简单，只需要在访问属性时使用 ?. 运算符即可。
举个例子，假设我们有一个 User 类型，它有一个 address 属性，address 属性又有一个 city 属性。我们想要访问 user.address.city 属性，但是又不确定 user、address 或 city 是否存在。在 TypeScript 中，我们可以这样写：
--------- ------- - ------ ------- - --------- ---- - --------- -------- - ----- ----- ---- - --- ---------------------------------
在这个例子中，我们定义了 Address 和 User 两个接口，分别表示地址和用户信息。然后我们创建了一个空的 user 对象，并尝试访问 user.address.city 属性。由于 address 和 city 都是可选属性，因此我们可以使用 Optional Chaining 运算符来访问它们。
Optional Chaining 的注意事项
尽管 Optional Chaining 可以方便地访问嵌套属性，但是在使用它时也需要注意一些问题。
1. 只能用于对象和数组
Optional Chaining 只能用于对象和数组的访问，不能用于普通变量或函数的调用。如果你尝试在普通变量或函数上使用 Optional Chaining，会得到一个语法错误。
2. 不支持赋值操作
Optional Chaining 运算符返回的是属性值或 undefined，不能用于赋值操作。如果你尝试在 Optional Chaining 运算符上使用赋值操作，会得到一个语法错误。
3. 只能用于 ES12 或 TypeScript
Optional Chaining 是 ES12 的新特性，目前并不是所有的浏览器都支持它。如果你想在旧版本的浏览器中使用 Optional Chaining，可以使用 Babel 等工具进行转换。
另外，如果你使用的是 TypeScript，需要确保你的 TypeScript 版本支持 Optional Chaining。在 TypeScript 3.7 及以上的版本中，已经支持 Optional Chaining。
总结
Optional Chaining 是一种简洁、安全的访问嵌套属性的方式，可以避免出现 undefined 或 null 的错误。在 ES12 和 TypeScript 中，使用 Optional Chaining 可以大大简化代码，提高开发效率。但是在使用时也需要注意一些问题，避免出现语法错误或兼容性问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/662b2482d3423812e489150f