ECMAScript 2018 中的可选链操作符-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，处理嵌套对象属性时经常会遇到 undefined 或 null 值导致代码出错的情况。ECMAScript 2018 中新增了可选链操作符，可以轻松地处理这种情况，避免代码出错。本篇文章将详细介绍可选链操作符的语法、用法和示例代码，并给出学习和指导意义。

什么是可选链操作符

可选链操作符（Optional Chaining Operator）是 ECMAScript 2018 中新增的一项功能，用于简化访问嵌套对象属性时的代码。它是一种安全的访问属性的方式，可以在访问嵌套对象时避免代码出错。

在使用可选链操作符之前，我们通常需要使用 if 语句或三元表达式来判断嵌套对象是否存在，然后再访问属性。例如：

if (obj && obj.prop1 && obj.prop1.prop2 && obj.prop1.prop2.prop3) {
  // 处理 obj.prop1.prop2.prop3
}

或者：

const value = obj && obj.prop1 && obj.prop1.prop2 && obj.prop1.prop2.prop3 ? obj.prop1.prop2.prop3 : defaultValue;

这种写法很繁琐，可选链操作符可以简化这种代码。

可选链操作符的语法是问号加点号（?.），表示如果左侧的操作数存在，则继续访问右侧的属性或方法。如果左侧的操作数不存在，则返回 undefined。例如：

const value = obj?.prop1?.prop2?.prop3;

这行代码的意思是：如果 obj 存在并且 obj.prop1 存在并且 obj.prop1.prop2 存在，则返回 obj.prop1.prop2.prop3；否则返回 undefined。

下面是一些示例代码，用于演示可选链操作符的使用方法。

假设有一个嵌套对象 obj，它的结构如下：

const obj = {
  prop1: {
    prop2: {
      prop3: 'value'
    }
  }
};

我们可以使用可选链操作符来访问 obj.prop1.prop2.prop3：

const value = obj?.prop1?.prop2?.prop3;

如果 obj.prop1.prop2.prop3 存在，则 value 的值为 'value'；否则 value 的值为 undefined。

假设有一个嵌套对象 obj，它的结构如下：

const obj = {
  prop1: {
    func: () => 'value'
  }
};

我们可以使用可选链操作符来调用 obj.prop1.func 方法：

const value = obj?.prop1?.func();

如果 obj.prop1.func 存在，则 value 的值为 'value'；否则 value 的值为 undefined。

假设有一个数组 arr，它的结构如下：

const arr = [null, {prop: 'value'}];

我们可以使用可选链操作符来访问 arr[1].prop 属性：

const value = arr?.[1]?.prop;

如果 arr[1] 存在并且 arr[1].prop 存在，则 value 的值为 'value'；否则 value 的值为 undefined。

假设有一个函数 fn，它的结构如下：

const fn = () => ({prop: 'value'});

我们可以使用可选链操作符来调用 fn().prop 方法：

const value = fn()?.prop;

如果 fn() 存在并且 fn().prop 存在，则 value 的值为 'value'；否则 value 的值为 undefined。

可选链操作符是一种简化访问嵌套对象属性的方法，它可以避免代码出错，提高代码的可读性和可维护性。在实际开发中，我们经常需要处理嵌套对象属性，使用可选链操作符可以使代码更简洁、更安全、更易于维护。

需要注意的是，可选链操作符在某些旧版浏览器中可能不被支持，需要使用 polyfill 或者转译工具来兼容旧版浏览器。此外，可选链操作符的使用应该适当，不要过度使用，以免影响代码的性能和可读性。

总之，学习和掌握可选链操作符是前端开发的一项重要技能，可以提高代码的质量和效率。

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