前言
在前端开发中，我们经常需要处理对象属性的值，但当对象属性为 null 或 undefined 时，访问属性的代码就会出现 TypeError 错误。
在 ES11 中，引入了可选链操作符 ?.，它可以在访问属性时自动判断属性值是否为空，避免了 TypeError 错误的出现。
本文将详细介绍可选链操作符的语法、优化效果和实际应用案例，希望能对大家学习和使用可选链操作符有一定的指导意义。
可选链操作符的语法
可选链操作符的语法很简单，在访问属性的时候使用 ?. 即可，例如：
-- -------------------- ---- -------
----- --- - -
-- -
-- -
-- -
-
-
--
-------------------------- -- -当 a、b、c 中有任意一个属性值为 null 或 undefined 时，上述代码都不会出现 TypeError 错误，输出结果为 undefined。
若我们在访问属性时使用 .，则会出现 TypeError 错误，例如：
-- -------------------- ---- -------
----- --- - -
-- -
-- -
-- -
-
-
--
----------------------- -- -
------------------------- -- ---------- ------ ---- -------- --- -- ---------由于 d 或 e 不存在在 obj 中，访问这两个属性时就会出现 TypeError 错误。
可选链操作符的优化效果
由于可选链操作符能够避免访问空属性值时出现 TypeError 错误，因此可以有效提高程序的健壮性和稳定性。
我们可以使用一个简单的例子体验一下可选链操作符的优化效果：
-- -------------------- ---- -------
-- --------
----- ---- - -
----- -
----- ------
---- ---
-------- -
----- ---------
-
-
--
----- ---- - ------------------------- -- ----------
------------------ -- ---------
-- ---------
----- ---- - -----
--- -----
-- ----- -- --------- -- ----------------- -- ----------------------- -
---- - -----------------------
- ---- -
---- - ----------
-
------------------ -- ---------在使用可选链操作符的情况下，可以用一行代码访问到 city 属性的值，而未使用可选链操作符的情况下，需要使用多行代码，使得代码复杂、冗长。
可选链操作符的实际应用案例
在实际开发中，可选链操作符优化了许多代码的编写方式，让我们能够更轻松地访问嵌套对象的属性。
下面是一些可选链操作符的实际应用案例：
TypeScript 类型保护
在 TypeScript 中，我们经常使用类型保护来确保变量类型的正确性，使用可选链操作符可以更加方便和简洁地实现类型保护。
例如，我们有一个 Greeting 类型：
type Greeting = {
name: string;
sayHello: () => void;
};现在要获取一个可能为空的 greeting 对象的 name 属性和 sayHello 方法：
const greeting: Greeting | null = null;
if (greeting) {
console.log(greeting.name);
greeting.sayHello();
}由于 greeting 可能为空，我们必须在访问属性和方法之前使用 if 判断语句，这样代码显得冗长、不简洁。
使用可选链操作符可以更加简洁地实现：
const greeting: Greeting | null = null; greeting?.name && console.log(greeting.name); greeting?.sayHello?.();
在访问属性和方法之前使用可选链操作符 ?.，就可以避免 TypeError 错误的出现。
React 组件属性验证
在 React 中，我们经常需要进行基于 PropTypes 的属性验证，可以使用可选链操作符更方便地实现属性验证。
例如，我们编写了一个 HelloWorld 组件，有 name 和 age 两个属性：
-- -------------------- ---- -------
------ --------- ---- -------------
-------- ----------------- -
----- - ----- --- - - ------
------ -
-----
--------- -----------
---- -- ------- --- -- -----------
------
--
-
-------------------- - -
----- ----------------------------
---- -----------------
--在未使用可选链操作符的情况下，我们需要手动判断 props 中是否含有属性 age，才能进行属性验证，这样的代码显得冗长、不简洁。
使用可选链操作符可以更加简洁地实现：
-- -------------------- ---- -------
------ --------- ---- -------------
-------- ----------------- -
----- - ----- --- - - ------
------ -
-----
--------- -----------
---- -- ------- --- -- -----------
------
--
-
-------------------- - -
----- ----------------------------
---- -----------------------------
--在属性类型之后使用可选链操作符 ?.，就可以省略手动判断属性是否存在。
总结
在本文中，我们详细介绍了可选链操作符 ?. 的语法、优化效果和实际应用案例，可选链操作符可以使代码更加简洁、健壮和稳定。
在实际开发中，我们应该根据项目需求来选择是否使用可选链操作符，充分利用可选链操作符的优化效果，以提高程序的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a37525add4f0e0ffb9aaa7