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