JavaScript可选链是什么

本篇内容主要讲解“JavaScript可选链是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript可选链是什么”吧!通常，你可以在以下情况下处理此类对象：获取远程JSON数据使用配置对象具有可选属性尽管这为对象提供了支持不同数据的灵活性，但是在访问此类对象的属性时，随之而来的是增加了复杂性。bigObject 在运行时可以有不同的属性集：因此你必须手动检查属性是否存在：最好不要这样写，因为包含了太多的样板代码。。让我们看看可选链是如何解决此问题，从而减少样板条件的。让我们设计一个保存电影信息的对象。该对象包含 title 必填属性，以及可选的 director 和 actor。movieSmall 对象仅包含 title，而 movieFull 则包含完整的属性集：让我们写一个获取导演姓名的函数。请注意 director 属性可能会丢失：if (movie.director) {…} 条件用于验证是否定义了 director 属性。如果没有这种预防措施，则在访问movieSmall 对象的导演的时，JavaScript 会引发错误 TypeError: Cannot read property ‘name’ of undefined。这是用了可选链功能免费云主机、域名并删除 movie.director 存在验证的正确位置。新版本的 getDirector() 看起来要短得多：在 movie.director?.name 表达式中，你可以找到 ?.：可选链运算符。对于 movieSmall，缺少属性 director。结果 movie.director?.name 的计算结果为 undefined。可选链运算符可防止引发 TypeError: Cannot read property ‘name’ of undefined 错误。相反 movieFull 的属性 director是可用的。 movie.director?.name 默认被评估为 ‘Ridley Scott’。简而言之，代码片段：等效于：?. 通过减少两行代码简化了 getDirector() 函数。这就是为什么我喜欢可选链的原因。2.1 数组项可选链能还可以做更多的事。你可以在同一表达式中自由使用多个可选链运算符。甚至可以用它安全地访问数组项!下一个任务编写一个返回电影主角姓名的函数。在电影对象内部，actor 数组可以为空甚至丢失，所以你必须添加其他条件：如果需要 if (movie.actors && movies.actors.length > 0) {…} ，则必须确保 movie 包含 actors 属性，并且该属性中至少有一个 actor。使用可选链，这个任务就很容易解决：actors?. 确保 actors 属性存在。 [0]?. 确保列表中存在第一个参与者。这真是个好东西!一项名为nullish 合并运算符的新提案会处理 undefined 或 null ，将其默认设置为特定值。如果 variable 是 undefined 或 null，则表达式 variable ?? defaultValue 的结果为 defaultValue。否则，表达式的计算结果为 variable 值。当链评估为 undefined 时，通过将默认值设置为零，Nullish 合并可以改善可选链。例如，让我们更改 getLeading() 函数，以在电影对象中没有演员时返回 “Unknown actor” ：你可以通过以下 3 种形式使用可选链。第一种形式的 object.property 用于访问静态属性：第二种形式 object?.[expression] 用于访问动态属性或数组项：最后，第三种形式 object?.([arg1, [arg2, …]]) 执行一个对象方法：如果需要，可以将这些形式组合起来以创建长的可选链：可选链运算符的有趣之处在于，一旦在其左侧 leftHandSide?.rightHandSide 上遇到空值，就会停止对右侧访问器的评估。这称为短路。看一个例子：nothing 保留一个空值，因此可选链立即求值为 undefined，并跳过右侧访问器的求值。因为 index 的值没有增加。要抵制使用可选链运算符访问任何类型属性的冲动：这会导致错误的用法。下一节将说明何时正确使用它。6.1 可能无效的访问属性必须仅在可能为空的属性附近使用 ?.： maybeNullish?.prop。在其他情况下，请使用老式的属性访问器：.property 或 [propExpression]。调用电影对象。查看表达式 movie.director?.name，因为 director 可以是 undefined，所以在 director 属性附近使用可选链运算符是正确的。相反，使用 ?. 访问电影标题 movie?.title 没有任何意义。电影对象不会是空的。6.2 通常有更好的选择以下函数 hasPadding() 接受具有可选 padding 属性的样式对象。 padding 具有可选的属性 left，top，right，bottom。尝试用可选链运算符：虽然函数可以正确地确定元素是否具有填充，但是为每个属性使用可选链是毫无必要的。更好的方法是使用对象散布运算符将填充对象默认为零值：我认为这一版本的 hasPadding() 可读性更好。我喜欢可选链运算符，因为它允许轻松地从嵌套对象中访问属性。它可以防止编写针对访问者链中每个属性访问器上的空值进行验证的样板代码。当可选链与空值合并运算符结合使用时，可以得到更好的结果，从而更轻松地处理默认值。到此，相信大家对“JavaScript可选链是什么”有了更深的了解，不妨来实际操作一番吧！这里是云技术网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

相关推荐: 如何在Nodejs或者浏览器直接运行esm代码

今天就跟大家聊聊有关如何在Nodejs或者浏览器直接运行esm代码，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。 怎么在Nodejs或者浏览器直接运行esm代码？CommonjsCommonJs 可以动…