在 JavaScript 的编程中，我们通常需要检查对象是否包含某个属性或者方法，并避免因对象不含属性或方法而产生不必要的错误。在 ES2020 中，增加了可选链操作符（Optional Chaining Operator），可以简化这个过程，避免代码中出现大片的 if 语句，实现更加简洁和易读的代码。
可选链操作符的定义
可选链操作符是一种新的语法，用于检查对象中是否包含指定属性或方法，以及避免因为属性或方法不存在而导致程序抛出错误。可选链运算符是问号 ? 后跟一个点 . 或者一对中括号 []，表示如果左侧表达式为 null 或 undefined，那么右侧的属性或方法将不会被调用。
举个例子，假设下面的代码存在一个嵌套的对象，需要获取嵌套对象中的一个属性来进行操作。在没有可选链操作符时，一般采用以下两种方式：
-- -------------------- ---- ------- -- --------------- -- ---- -- ----- -- ------- -- ---------- - ----------------------- - -- -- --------- ---- --- - ----------------------- - ----- --- - --------------- -
这两种方式的缺点在于，代码冗长且不够简洁，容易出现编码错误。可选链操作符为我们提供了另一种更加高效且简洁的方式：
// 可选链操作符 console.log(obj?.a?.b?.c);
上面的例子中，如果满足以下条件，可选链操作符会执以下操作：
- 如果
obj为null或undefined，则表达式的值为undefined - 如果
obj.a为null或undefined，则表达式的值为undefined - 如果
obj.a.b为null或undefined，则表达式的值为undefined - 如果
obj.a.b.c为null或undefined，则表达式的值为undefined
在这个过程中，如果任何一个属性为空，那么操作符的值将会是 undefined。这为我们避免了编写大片的条件语句和异常处理，是一个非常方便的新特性。
可选链调用函数
除了可以用于属性的访问外，可选链操作符也可以用于函数的调用。下面的代码演示了这种情况：
const obj = {
func: () => console.log('function called')
};
obj?.func?.();如果 obj 对象存在，并且 func 方法存在，那么会输出 function called。如果只有一个条件不满足，那么便不会调用这个方法。
可选链操作符与 && 运算符的区别
在 JavaScript 中，&& 运算符这个操作符可以用于判断两个变量是否都存在，如果都存在，就会执行后续语句。下面是一个使用 && 运算符的例子：
const obj = { a: { b: 'hello world' } };
console.log(obj.a && obj.a.b); // 'hello world'如果 obj 或者 obj.a 为 null 或 undefined，obj.a.b 也将为 undefined。这就是 && 运算符和可选链操作符的区别，需要特别注意。如果我们使用空值判断，那么 && 运算符可以取代可选链操作符，同样可以实现代码的可读性和简洁性。
可选链操作符是如何工作的？
在实现可选链操作符的过程中，需要判断变量类型，并检查变量是否为空。如果变量为空，那么就可以直接返回 undefined。如果变量不为空，那么就可以访问到存储在变量中的属性或方法。
下面的代码是 obj?.a?.b?.c 的实现过程的近似代码：
-- -------------------- ---- -------
-------- ------------------ --------- -
----- ----- - --- -- -----
----- ---- - --------------
-- ------ -- --------- -- ----- -
------ ----------
-
------ ------------------------ ----------
-
------------------------------ ---- ---- ------可选链操作符的实现需要检查每个属性是否存在，如果存在，就返回他们的值。如果一个属性不存在，那么可以省略后面的属性，将 undefined 直接返回。这个操作符的实现与一个递归函数类似，不过采用了ES6中的 spread operator 来将表达式展开到参数列表中。
可选链操作符语法的注意事项
在实际使用中，需要注意一些细节和语法。下面是一些解释和示例：
可选链操作符必须在点运算符
.XX或中括号运算符[XX]后面，如果跟在其他符号后，可能会抛出语法错误。在可选链操作符的右侧可以加上一个函数调用
(), 如果这个方法存在，它将被执行。如果调用方法时需要将参数传递给方法，我们可以像下面的例子一样在调用语句的末尾添加参数：
obj?.method?.(arg1, arg2, ...)。可选链操作符不能与新的 ES6 模块化语法
import一起使用，会抛出语法错误。只有在 CommonJS 模块化中，可选链操作符才能正常工作。为了最大程度上减少这种类型的错误，建议在开发API时增加选择性参数。
可选链操作符的兼容性
可选链操作符是ES11新增的语法，在一些老版本的浏览器和 Node.js 中可能不支持。如果需要在老版本的 Node.js 或浏览器中使用该操作符，请使用 Babel 或 TypeScript 来编译代码。下面是可选链操作符在 Flow 中的一个例子：
const object1: ?{ prop?: ?{ field?: ?number } } = { prop: { field: undefined } };
const object2: ?{ prop?: ?{ field?: ?number } } = { prop: { field: 123 } };
console.log(object1?.prop?.field); // undefined
console.log(object2?.prop?.field); // 123在使用可选链操作符的代码中，需要增加一些判断条件来确保代码能够在低版本的环境中正常运行：
if (typeof obj?.value !== 'undefined') {
console.log(obj.value);
}结论
可选链操作符是ES11增加的一种新语法，用于简化 JavaScript 编程中的空值判断过程。可选链操作符可以避免使用大量条件语句和异常处理，并在语法学习、代码可读性和简洁性、代码优化、效率提高上带来便利。如果您在做 React 和 Node.js 项目时需要对性能和代码简洁性进行优化，那么可选链操作符就可以派上用场。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f344c2e1e8e99bfaf551ea