在 JavaScript 中，我们经常需要处理变量是否为 null 或 undefined 的情况。这个问题在访问对象的属性时尤其常见。在以前，我们需要写一些冗长的代码来处理这个问题，如下：
if (obj && obj.prop && obj.prop.subprop) {
// ...
}这种代码不仅令人头痛，而且容易出错。
幸运的是，ES11 引入了一个称为 Optional chaining 的新特性，它可以让我们更加优雅地处理 undefined 和 null。如果你还没有接触过 Optional chaining，这篇文章将帮助你了解它的基础用法和一些高级用法。
基础使用
Optional chaining 使用问号（?）来标记一个可能不存在的属性或方法。考虑下面这个对象：
const obj = {
prop: {
subprop: 'value'
}
};我们可以使用 Optional chaining 来访问 subprop 属性：
const value = obj.prop?.subprop; console.log(value); // 'value'
这里的问号表示如果 prop 属性不存在，就直接返回 undefined。这样我们就可以在不检查 prop 存在的情况下，安全地访问子属性。
还可以使用 Optional chaining 来调用一个可能不存在的函数。考虑下面这个对象：
const obj = {
func: function() {
return 'Hello, world!';
}
};我们可以使用 Optional chaining 来调用这个方法：
const value = obj.func?.(); console.log(value); // 'Hello, world!'
这里的问号表示如果 func 方法不存在，就直接返回 undefined。这样我们就可以在不检查 func 存在的情况下，安全地调用这个方法。
高级使用
在实际开发中，我们经常需要处理一组数据，其中某些数据可能不存在。可以使用 Optional chaining 来遍历这些数据。考虑下面这个例子：
-- -------------------- ---- -------
----- ---- - -
-
----- --------
---- ---
-------- -
----- -----------
------- --------
-
--
-
----- ------
---- --
--
-
----- ----------
---- ---
-------- -
----- ---------
-
-
--
--- ------ ------ -- ----- -
----------------------------------
-这段代码遍历了一个包含三个人的数组，打印了每个人的城市。由于第二个人没有地址信息，所以 Optional chaining 返回 undefined，不会导致代码出错。
Optional chaining 还可以和其他语法结合使用。例如，可以在模板字符串中使用 Optional chaining：
const obj = {
name: 'Alice',
age: 20
};
const message = `Hello, my name is ${obj.name?.toUpperCase()}.`;
console.log(message); // 'Hello, my name is ALICE.'这里的问号和点号结合，表示如果 name 属性不存在，就直接返回 undefined，然后调用 toUpperCase 方法。这样我们就可以在模板字符串中安全地访问一个可能不存在的属性。
总结
Optional chaining 是一个非常实用的新特性，可以帮助我们优雅地处理 undefined 和 null。通过使用 Optional chaining，我们可以避免写冗长的代码，并且让代码更加安全和优雅。如果你还没有使用过这个特性，那么现在就是时候开始学习了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644f97bc980a9b385b900258