随着前端技术的不断发展，JavaScript 语言也在不断更新迭代。ES11（也称为 ECMAScript 2020）是 JavaScript 语言的最新版本，其中引入了一项非常实用的新特性——可选链操作符（Optional Chaining Operator），它为前端开发带来了全新的函数级设计模式。
可选链操作符简介
可选链操作符是一个问号（?）加上一个点（.）的符号：?.。它可以在对象属性链中进行安全的访问，即使链中的某个属性不存在或者为 null 或 undefined，也不会抛出错误，而是直接返回 undefined。例如：
-- -------------------- ---- -------
----- ------ - -
----- -------
---- ---
-------- -
------- ---- ---- ----
----- ----------
------ ----
-
--
------------------------------------- -- ---------
---------------------------------- -- ---------
------------------------------------------ -- ---------在上面的例子中，如果 person.address 对象不存在，访问 person.address.zipCode 就会抛出错误。但是使用可选链操作符 person.address?.zipCode 就可以避免这种错误的发生。
函数级设计模式
可选链操作符为前端开发带来了全新的函数级设计模式，即链式调用。链式调用是一种将多个函数调用链接在一起的编程模式，以实现更加简洁、优雅的代码。在使用可选链操作符时，可以将多个对象属性的访问链接在一起，形成一个链式调用。例如：
-- -------------------- ---- -------
----- ------ - -
----- -------
---- ---
-------- -
------- ---- ---- ----
----- ----------
------ ----
-
--
------------------------------------------------- -- ---------
----------------------------------------------------- -- ---------在上面的例子中，使用可选链操作符和链式调用，可以简洁地实现对 person.address.city 属性进行大写转换的操作，而不用担心 person 或者 address 对象不存在的情况。
学习与指导意义
可选链操作符是一项非常实用的新特性，它可以提高代码的健壮性和可读性，避免因为对象属性不存在而引发的错误。同时，它也为前端开发带来了全新的函数级设计模式，即链式调用，可以让代码更加简洁、优雅。因此，学习和掌握可选链操作符的使用，对于提高前端开发水平和代码质量非常有帮助。
示例代码
以下是一个使用可选链操作符和链式调用实现表单验证的示例代码：
-- -------------------- ---- -------
----- ---- - -
--------- ---
--------- ---
---------------- ---
------ ---
------ --
--
-------- -------------- -
----- ------ - ---
-- ------------------------- -
--------------- - --------- -- ----------
-
-- ------------------------- -
--------------- - --------- -- ----------
-
-- ----------------------- -- ---------------------------- --- --------------------- -
---------------------- - ---------- -- --- -------
-
-- ---------------------- -
------------ - ------ -- ----------
- ---- -- ---------------------------------- -
------------ - ------ -- ---------
-
-- ---------------------- -
------------ - ------ -- ----------
- ---- -- ---------------------------------- -
------------ - ------ -- ---------
-
------ -------
-
-------- ------------------- -
-- -- ----- ----
-
-------- ------------------- -
-- -- ----- ----
-在上面的例子中，使用可选链操作符和链式调用，可以简洁地实现对表单数据的验证操作，而不用担心表单数据中某个属性不存在的情况。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67da4e77a941bf71342382dd