ES10 中新语法 Optional Chaining 的使用方法-JavaScript中文网-JavaScript教程资源分享门户

随着 JavaScript 的发展，新的语法不断出现。ES10 中，又新增了一种非常实用的语法——Optional Chaining（可选链式调用）。这种语法可以使得我们更加方便地访问对象的属性或方法。

什么是 Optional Chaining

Optional Chaining 允许我们在访问对象的属性或方法时，判断对象是否为 null 或 undefined。以往，我们可能需要写一些冗长的判断语句来保证程序不会因为访问到 null 或 undefined 而出错。现在，我们只需要使用 Optional Chaining 就可以轻松地完成这个操作。

Optional Chaining 的使用方法

在 JavaScript 中，我们用点（.）来访问对象的属性，如果某个属性不存在，就会返回 undefined。对于多层嵌套的对象，我们就需要写一些冗长的判断语句，例如：

if (obj && obj.subObj && obj.subObj.subProp) {
  // do something with obj.subObj.subProp
}

这样的判断语句可能会让代码变得难以维护。ES10 中，我们可以使用 Optional Chaining 来简化这个操作，只需要在链式调用的属性或方法后面加上问号（?）即可。例如：

if (obj?.subObj?.subProp) {
  // do something with obj.subObj.subProp
}

如果 obj 或 subObj 不存在，那么 obj?.subObj?.subProp 就会返回 undefined，程序就不会出错。

示例代码

下面给出一个简单的示例代码，通过 Optional Chaining 语法，减少了冗长的判断语句，使得代码更加简洁：

// javascriptcn.com 代码示例
const user = {
  name: 'Jone',
  address: {
    city: 'Shanghai',
    district: 'Pudong',
    street: 'Jinqiao Road',
  }
};

const userWithoutAddress = {
  name: 'Lucy',
};

console.log(user?.address?.city); // 输出 "Shanghai"
console.log(userWithoutAddress?.address?.city); // 输出 undefined

总结

Optional Chaining 是一种非常实用的语法，能够大大减少代码中的判断语句，使得代码更加简洁易读。但是，在使用 Optional Chaining 时，仍需要注意一些细节，例如：

可选链式调用只能用于属性访问和方法调用，无法用于在数组中获取元素或调用函数。
在链式调用中，问号（?）只能跟在最后一个属性或方法后面，不能放到中间。
当 ? 前面的属性或方法不存在时，? 后面的属性或方法都不会被调用。

掌握 Optional Chaining 的使用方法，可以使我们在编写代码时更加高效和便捷。

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