条件判断的链式属性调用：在JavaScript中安全访问嵌套属性的方法

在JavaScript中，我们经常会使用链式属性调用来访问嵌套对象的属性。例如，以下代码获取对象obj的属性foo.bar.baz的值：

const obj = { foo: { bar: { baz: 42, }, }, };
const baz = obj.foo.bar.baz;

如果obj.foo.bar或obj.foo.bar.baz不存在，则上述代码将抛出错误。为了避免这种情况，我们可以使用可选链操作符（?.）。可选链操作符允许我们在访问嵌套属性时进行条件判断。如果属性不存在，则返回undefined，否则返回属性的值。

以下代码使用可选链操作符来获取obj.foo.bar.baz的值：

const obj = { foo: { bar: { baz: 42, }, }, };
const baz = obj?.foo?.bar?.baz;

如果obj.foo、obj.foo.bar或obj.foo.bar.baz不存在，则上述代码将返回undefined。否则，它将返回42。

nullish 合并操作符 (??),它可以让我们在两个值之间进行判断，如果第一个值是 null 或 undefined，则返回第二个值，否则返回第一个值。

以下代码使用 nullish 合并操作符来获取obj.foo.bar.baz的值：

const obj = { foo: { bar: { baz: 42, }, }, };
const baz = obj.foo.bar.baz ?? 'Default value';

如果obj.foo、obj.foo.bar或obj.foo.bar.baz不存在，则上述代码将返回"Default value"。否则，它将返回42。

可选链操作符和 nullish 合并操作符都是用于安全访问嵌套属性的强大工具。它们可以帮助我们避免在属性不存在时引发错误，并使代码更加健壮。

优点

• 可选链操作符和 nullish 合并操作符都可以帮助我们安全地访问嵌套属性，避免在属性不存在时引发错误。
• 可选链操作符在遇到null或undefined时会返回undefined，而 nullish 合并操作符会返回备用值。
• 两者都易于使用，并且可以很好地集成到现有的 JavaScript 代码中。

缺点

• 可选链操作符仅适用于新版本的 JavaScript（ES2020 及以上）。
• nullish 合并操作符在某些情况下可能会导致意外的行为。例如，如果我们想检查一个属性是否为null或undefined，那么使用 nullish 合并操作符可能会导致误判。

总结

可选链操作符和 nullish 合并操作符都是用于安全访问嵌套属性的强大工具。它们可以帮助我们避免在属性不存在时引发错误，并使代码更加健壮。在选择使用哪个操作符时，我们应该考虑代码的兼容性和具体需求。