如何使用 ECMAScript 2020 中的可选链操作符？-JavaScript中文网-JavaScript教程资源分享门户

什么是可选链操作符？

ECMAScript 2020 中的可选链操作符（Optional Chaining Operator）是一种快捷语法，可以方便地访问对象的属性或方法，同时避免了出现未定义或 null 错误的情况。以往，访问对象的属性或方法时经常需要进行判断，如下所示：

if (obj && obj.a && obj.a.b && obj.a.b.c) {
  // do something
}

这样的代码非常冗长，很难维护。现在，使用可选链操作符，上述代码可简化为：

if (obj?.a?.b?.c) {
  // do something
}

在 obj、a、b、c 其中任意一个不存在时，代码仍能正常运行，不会报错。这非常便捷，提高了代码的可读性和可维护性。

如何使用可选链操作符？

可选链操作符的语法非常简单，使用问号的形式表示。示例如下：

// 访问对象上的属性
const value = obj?.property;

// 调用对象上的方法
obj?.method();

// 嵌套使用
const value = obj?.property.method?.();

在访问对象上的属性或方法时，如果该属性或方法不存在，代码仍能正常执行，返回 undefined 或 null。可选链操作符也可以与其他运算符配合使用，如下所示：

// 运算符优先级更高的表达式
const value = obj?.property + 1;

// 条件表达式
const value = obj.isExist ? obj.property : undefined;

// 和短路运算符配合使用
const value = obj?.property || defaultValue;

需要注意的是，可选链操作符只能用于访问属性或方法，无法用于访问变量或调用函数。

可选链操作符的进一步应用

可选链操作符可以用于更复杂的对象嵌套结构中，并减少代码量和判断的复杂度。示例如下：

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

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

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

上面的示例中，使用可选链操作符，一步到位地访问了 user 对象的 address 属性中的 zip 属性，让代码更加简洁明了。

在 React 中的应用也十分广泛。在访问 props 或 state 时，使用可选链操作符可以避免访问未定义或 null 值而导致的报错。示例如下：

// 原始方式
const value = this.props && this.props.data && this.props.data.value;

// 使用可选链操作符
const value = this.props?.data?.value;

可选链操作符的浏览器兼容性

可选链操作符是 ECMAScript 2020 中的新特性，目前并未得到所有浏览器的完全支持。在现代浏览器中，例如 Chrome、Firefox、Safari 和 Edge 浏览器，都已经完全支持该特性。但是，为了在一些老旧浏览器（如 IE）中使用该特性，可能需要在代码中添加兼容性代码或使用 Babel 转译器。因此，在使用可选链操作符时需要注意浏览器兼容性问题。

总结

可选链操作符是 ECMAScript 2020 中的新特性，可以方便地访问对象的属性或方法，避免了出现未定义或 null 错误的情况，使代码更加简洁明了。使用该特性时需要注意浏览器兼容性问题，建议在现代浏览器中使用。

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