曾经在JavaScript中看到Cannot read property ‘x’ of undefined错误？如果是这样，您并不孤单。我们中的许多人在使用JavaScript对象和属性时会遇到此错误。
但是猜怎么着？有可选的链接和无效合并的功能可以帮助您。在本文中，我们将看到这些功能如何确保我们的代码安全和清洁。
为什么需要更安全的属性访问权限？
好吧，没有人喜欢错误。还有Cannot read property ‘x’ of undefined错误？我们都看到了。当我们尝试使用不存在的属性或方法时，它会弹出。避免此错误的旧方法使我们的代码看起来很混乱。
例如：
let user = {};
let username = user && user.details && user.details.name;
看起来有些混乱，对吗？但是有一种更干净的方式。
可选的链接
这里是可选的链接：即使可能缺少某些东西，它也可以帮助我们达到对象中的值。
let username = user?.details?.name;
您什么时候应该使用可选的链接？
-
安全检查嵌套属性。
-
呼叫没有风险的功能。
-
安全检查阵列中的项目。
但是，请小心。不要过度使用它，否则您可能会错过其他错误。
无效的合并
这是一个快速测验。无效的合并操作员（??）做什么？它检查左值。如果是null或undefined，则具有正确的值。如果没有，它会粘在左边。
let x = value ?? "default";
另外，关于||操作员的快速提示。它可能很棘手，具有0或empty string之类的值。在JavaScript中，0，“”，NaN，false，null和undefined之类的值是falsy。有趣的部分？无效的合并仅查看null和undefined。
无效合并的使用情况
-
设置变量的默认值。
-
用潜在的
null/undefined值处理配置。 -
比
||运算符更明确的意图。 -
避免使用其他
falsy值（例如0或“”）的意外行为。
将可选的链式与无效的合并结合
想将可选的链接和无效合并混合吗？就像魔术一样。
let setting = user?.preferences?.themeColor ?? "blue";
如果用户或首选项为undefined或null，或者未设置themeColor，则将分配“蓝色”的默认值。
性能考虑
尽管这些功能增强了代码的可读性和安全性，但您可能会考虑速度。他们会减慢应用程序的性能吗？在大多数情况下，使用可选的链式或无效的合并会不会减慢您的速度。
但是，如果您经常使用它们，尤其是在经常运行的大规模应用程序或循环中，您可能会看到一些延迟。如果您不确定，请务必检查您的应用程序的性能。
浏览器和环境支持
您是否正在考虑使用这些功能？首先，检查您的浏览器是否支持它们。截至2020年，大多数新浏览器都这样做。但是一些旧的可能不是。像Babel这样的工具可以提供帮助。或检查Can I use。
结论
考虑您的项目。这些功能有多少帮助？这些是JavaScript开发人员的绝佳功能。它们使代码整洁，意图更清晰并减少潜在错误。这意味着强大的应用程序。
如果您发现本文有用或对该主题有更多见解，请随时在Twitter和LinkedIn上与我联系。让我们继续在那里进行对话！