ES11 中的 Optional Chaining 运算符：高级用法-JavaScript中文网-JavaScript教程资源分享门户

在现代的前端开发中，我们经常会遇到需要访问多层嵌套对象或数组的数据，但是有些时候这些嵌套的数据可能是未知或者不存在的，这时候我们就需要使用 Optional Chaining 运算符来优雅地处理这些问题。

什么是 Optional Chaining 运算符

Optional Chaining 运算符是 ES11 中新增的一个特性，用于快速判断并安全地访问目标属性或方法是否存在。它的基本语法如下：

obj?.prop //访问对象属性
arr?.[index] //访问数组元素
func?.() //调用函数

需要注意的是，Optional Chaining 运算符只能用在 .,[],和 () 这三个成员访问符的后面，而不能用于其他的地方，如 new 运算符或者点运算符前面的对象。

Optional Chaining 运算符的高级用法

1. 链式调用

Optional Chaining 运算符可以方便地链式调用多个对象的属性或方法，比如：

-- -------------------- ---- -------
----- ---- - -
  ----- -------
  -------- -
    ------- ---- ---- -----
    ----- ----------
    ------ -----
    ---- --------
    -------- -----
  -
-

----- ------- - -------------------

在上面的代码中，我们用 Optional Chaining 运算符链接了 user 和 address 对象，并且安全地访问了 zip 属性，避免了因为 address 对象不存在而导致的 Type Error 错误。

2. 可选回调函数

在以往的开发中，我们经常在回调函数中判断参数是否存在来避免错误，比如：

function doSomething(data, callback) {
  if (data) {
    callback(data);
  }
}

使用 Optional Chaining 运算符，我们就可以在回调函数的参数中安全地访问嵌套的属性或方法，比如：

function doSomething(data, callback) {
  callback?.(data?.property);
}

这样一来，即使 data 对象或者 property 属性不存在，也不会导致程序出错。

3. 默认值设定

Optional Chaining 运算符还支持设置默认值，用于在访问的属性或方法不存在的情况下返回一个默认值，比如：

-- -------------------- ---- -------
----- ---- - -
  ----- -------
  -------- -
    ------- ---- ---- -----
    ----- ----------
    ------ -----
    -------- -----
  -
-

----- ------- - ------------------ -- --------

在上面的代码中，我们使用 ?? 运算符设置了一个默认值，如果在安全访问 user.address.zip 的时候发现该属性不存在，就会返回默认值 '00000'。

总结

本文介绍了 ES11 中的 Optional Chaining 运算符的基本语法、应用场景和高级用法，通过这些实例代码的介绍，希望能够帮助读者更加深入地理解这个新特性，并在实际开发中运用到自己的代码中，来提高代码的可读性、可靠性和可维护性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/646e9038968c7c53b0cf3d06