ES11 之可选链的使用与陷阱-JavaScript中文网-JavaScript教程资源分享门户

ES11 中新增了一个非常实用的特性——可选链（Optional Chaining）。可选链可以让我们更加方便地处理在对象不存在的情况下的异常情况，避免了多次进行 if (obj && obj.prop1 && obj.prop1.prop2) 的判断，使代码更加简洁和易于阅读。

可选链的语法

可选链的语法非常简洁明了，主要就是在可能会不存在的属性或方法后面加上一个问号，表示这个属性或方法可以不存在，例如：

// javascriptcn.com 代码示例
const obj = {
  prop1: {
    prop2: 'Hello World'
  }
};

console.log(obj.prop1?.prop2); // 'Hello World'

console.log(obj.prop1?.prop3); // undefined

可以看到，如果我们尝试访问一个不存在的属性 prop3，不会报错而是会返回 undefined。

除了对象属性之外，可选链也可以用在函数调用上：

// javascriptcn.com 代码示例
const obj = {
  greet() {
    return 'Hello World';
  }
};

console.log(obj.greet?.()); // 'Hello World'

console.log(obj.sayGoodbye?.()); // undefined

上面的代码中，obj.sayGoodbye 不存在，但是调用的时候不会报错而是会返回 undefined。

可选链的使用

可选链的使用非常简单，只需要在可能会不存在的属性或方法后面加上一个问号即可。使用可选链可以避免很多繁琐的判断，例如：

// 普通写法
if (obj && obj.prop1 && obj.prop1.prop2) {
  console.log(obj.prop1.prop2);
}

// 使用可选链
console.log(obj.prop1?.prop2);

可选链的使用可以让代码更加简洁易读，同时也可以避免一些错误。例如下面的代码，在使用可选链之前会报错，但是使用可选链之后不会报错：

// 不使用可选链
if (obj && obj.prop1 && obj.prop1.prop2 && obj.prop1.prop2()) {
  console.log(obj.prop1.prop2());
}

// 使用可选链
console.log(obj.prop1?.prop2?.());

可选链也可以在需要访问深层嵌套对象的时候，尤其是在处理复杂结构的数据时非常实用，例如：

// javascriptcn.com 代码示例
const obj = {
  prop1: {
    prop2: {
      prop3: 'Hello World'
    }
  }
};

console.log(obj?.prop1?.prop2?.prop3); // 'Hello World'

可选链的陷阱

尽管可选链非常实用，但是在使用过程中还需要注意一些陷阱。因为可选链是在原对象上访问属性，因此可能会出现如果原对象不存在会导致异常的情况。例如：

let obj = null;

console.log(obj.prop1?.prop2); // TypeError

在上面的代码中，因为 obj 不存在，所以访问 obj.prop1 的时候会抛出一个 TypeError 的异常。

另外，可选链也不能用于非对象类型上，否则也会抛出异常：

let num = 123;

console.log(num?.prop1); // TypeError

总结

可选链是 ES11 中一个非常实用的特性，可以让我们更加方便地处理在对象不存在的情况下的异常情况，避免了多次进行 if (obj && obj.prop1 && obj.prop1.prop2) 的判断，使代码更加简洁和易于阅读。但是在使用过程中，需要注意一些陷阱，尤其是在访问原对象不存在的属性时需要小心。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653850347d4982a6eb10a08b