在开发前端应用程序时，我们经常需要使用 JavaScript 来处理数据。在处理数据时，我们可能会遇到一些情况，例如我们需要获取一个对象的属性，但该属性可能不存在。在这种情况下，我们通常会使用 if/else 语句来检查该属性是否存在，并在属性存在时执行相应的操作。但是，JavaScript ES11 引入了一种新的语法，称为 optional chaining，它可以更方便地处理这种情况。
什么是 optional chaining？
Optional chaining 是一种新的语法，它允许我们在访问对象的属性时，可以在属性不存在时安全地返回 undefined，而不是抛出错误。这种语法可以避免使用 if/else 语句进行属性检查，使代码更加简洁和易读。
下面是一个使用 optional chaining 的示例：
const person = {
name: "John",
age: 30
};
const city = person.address?.city;
console.log(city); // undefined在上面的代码中，我们使用 optional chaining 来获取 person 对象的 address 属性中的 city 属性。由于 address 属性不存在，因此 city 变量将返回 undefined。
为什么要使用 optional chaining？
使用 optional chaining 可以使代码更加简洁和易读。使用 if/else 语句进行属性检查可能会使代码变得冗长和复杂。此外，如果一个对象具有多个嵌套的属性，使用 if/else 语句进行属性检查可能会变得非常繁琐。
下面是一个使用 if/else 语句进行属性检查的示例：
-- -------------------- ---- -------
----- ------ - -
----- -------
---- --
--
--- -----
-- ---------------- -
-- --------------------- -
---- - --------------------
-
-
------------------ -- ---------在上面的代码中，我们使用 if/else 语句进行属性检查，以确保 person 对象具有 address 属性和 address.city 属性。这使得代码变得复杂，而使用 optional chaining 可以使代码更加简洁和易读。
如何使用 optional chaining？
使用 optional chaining 非常简单。只需在要访问的属性名称后面加上问号即可。如果该属性存在，则返回该属性的值。如果该属性不存在，则返回 undefined。
下面是一个使用 optional chaining 的示例：
const person = {
name: "John",
age: 30
};
const city = person.address?.city;
console.log(city); // undefined在上面的代码中，我们使用 optional chaining 来获取 person 对象的 address 属性中的 city 属性。由于 address 属性不存在，因此 city 变量将返回 undefined。
如何处理 optional chaining 返回的值？
由于 optional chaining 可能返回 undefined，因此在处理 optional chaining 返回的值时，我们需要小心处理。通常，我们可以使用默认值运算符（??）来为 undefined 设置默认值。
下面是一个使用默认值运算符处理 optional chaining 返回的值的示例：
const person = {
name: "John",
age: 30
};
const city = person.address?.city ?? "Unknown";
console.log(city); // "Unknown"在上面的代码中，我们使用默认值运算符（??）将 undefined 替换为 "Unknown"。
结论
使用 optional chaining 可以使代码更加简洁和易读。它可以避免使用 if/else 语句进行属性检查，使代码更加简单和易于维护。当然，在处理 optional chaining 返回的值时，我们需要小心处理，以避免出现错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6760a6ba03c3aa6a5602d545