ES11 中的链判断运算符与可选链操作符使用场景的对比

在 ES11 中，JavaScript 新增了两个链式操作符，分别为链判断运算符和可选链操作符。它们在处理“属性不存在”或“属性值为空”等情况下，在简化代码方面有明显的优势。本篇文章将对这两个操作符进行详细介绍，并结合实际代码案例，指导它们的正确使用场景。

链判断运算符

链判断运算符（?.）是一个在处理对象属性存取时十分方便的操作符，它可以快速判断一个链式属性的某个可能不存在的值是否为空或未定义。那么这个操作符具体怎么用呢？

与传统的判断方法不同，链判断运算符可以在一行代码内完成多个属性的判断，而不必通过繁琐的 if-else 判断语句，简化了代码的可读性和可维护性。下面是一个使用链判断运算符的示例代码。

const obj = {
  name: 'My Object',
  info: {
    site: 'www.example.com',
    license: '',
    version: '',
  },
};

const license = obj?.info?.license;
console.log(license); // 输出为空

在这个示例中，我们使用了链判断运算符 ?. 将三个属性 obj、info 和 license 进行连接。通过这个语法，我们可以在一行代码内完成多层属性的访问，同时避免了可能出现的空引用错误。

可选链操作符

可选链操作符（?.）和链判断运算符类似，但它的功能更加强大，可以用来快速判断一个属性值是否存在。这个操作符可以用在函数、方法、数组和对象中等多种类型中。下面是可选链操作符的使用示例的代码案例。

const obj = {
  value: 42,
  fn() {
    console.log('calculated value');
    return this.value;
  },
};

const val1 = obj.fn?.(); // 输出“calculated value”和“42”
const val2 = obj.unknownMethod?.(); // 输出 undefined，而不抛出 TypeError

在这个示例中，我们使用了可选链操作符 ?. 来调用 fn 函数，避免了可能出现的空引用错误。如果 fn 函数不存在，那么 val1 的值就会变成 undefined。同样，如果 unknownMethod 函数不存在，那么操作符 ?. 也会避开它，不抛出 TypeError 错误。

如何选择使用

在不同的场景中，链判断运算符和可选链操作符各有其适用性。我们应该根据场景需求选择适合的操作符以简化代码。下面我们来分析两者的适用场景。

如果在层级结构不深、但某个属性值可能不存在的情况下，链判断运算符是一个非常优秀的解决方案。使用链判断运算符可以直接避开空值而不必对它们进行额外的操作，使代码简单易懂，同时避免了可能的 TypeError 错误。

const obj = {
  name: 'My Object',
  info: {
    site: 'www.example.com',
    license: '',
    version: '',
  },
};

const license = obj?.info?.license;
console.log(license); // 输出为空

反过来，在某些情况下，如果操作符 ?. 可以在一行代码中快速满足需求，可选链操作符就是更好的方案。例如，当我们需要访问一些属性值，但某些属性可能并不存在时，我们可以使用这个操作符，无需使用繁琐的 if-else 语句。

const obj = {
  value: 42,
  fn() {
    console.log('calculated value');
    return this.value;
  },
};

const val1 = obj.fn?.(); // 输出“calculated value”和“42”
const val2 = obj.unknownMethod?.(); // 输出 undefined，而不抛出 TypeError

总结

ES11 中的链判断运算符和可选链操作符，是 JavaScript 语言中两个非常有用的操作符。通过它们，我们可以优化代码逻辑，避免空引用错误，使代码变得简单、易懂，同时也方便了代码的维护与迭代。在实际开发过程中，我们需要结合不同场景，灵活运用链判断和可选链操作符，使代码更具有可读性和可维护性。

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