JavaScript可选链是什么

获取远程JSON数据

使用配置对象

具有可选属性

尽管这为对象提供了支持不同数据的灵活性,但是在访问此类对象的属性时,随之而来的是增加了复杂性。

bigObject在运行时可以有不同的属性集:

//, One  version  of  bigObject  const  bigObject =, {,,//,,,,, prop1:, {,,,,//,,,,,, prop2:,{,,,,,,//,,,,,,,,,的值:,& # 39;Some 价值,,,,,,},,,},},,,//,Other  version  of  bigObject  const  bigObject =, {,,//,,,,, prop1:, {,,,,//, Nothing  here ,,,,,},}, 

因此你必须手动检查属性是否存在:

//, Later  if  (bigObject ,,,,,,,, bigObject.prop1  !=, null ,,,,,,,, bigObject.prop1.prop2  !=, null), {,, let  result =, bigObject.prop1.prop2.value;,} 

最好不要这样写,因为包含了太多的样板代码. .

让我们看看可选链是如何解决此问题,从而减少样板条件的。

2。轻松深入访问属性

让我们设计一个保存电影信息的对象。该对象包含标题必填属性,以及可选的导演和演员。

movieSmall对象仅包含标题,而movieFull则包含完整的属性集:

 const  movieSmall =,{,,标题:,& # 39;热# 39;,},,,const  movieFull =,{,,标题:,& # 39;Blade 跑步,,,,,导演:,{,名字:& # 39;Ridley 斯科特# 39;,},,,,演员:,[{,名字:& # 39;Harrison 福特# 39;,},,{,名字:& # 39;Rutger  Hauer& # 39;,}],}, 

让我们写一个获取导演姓名的函数。请注意属主管性可能会丢失:

 function  getDirector(电影),{,,if  (movie.director  !=, null), {,,,, return  movie.director.name;,,,},},, getDirector (movieSmall);,//,=祝辞,undefined  getDirector (movieFull);,,//,=祝辞,& # 39;Ridley 斯科特# 39;

如果(movie.director) {…}条件用于验证是否定义了董事属性。如果没有这种预防措施,则在访问movieSmall,对象的导演的时,JavaScript会引发错误TypeError:无法读取属性& # 39;名字# 39;的,定义。

这是用了可选链功能并删除电影。导演存在验证的正确位置。新版本的getDirector()看起来要短得多:

 function  getDirector(电影),{,,return  movie.director ? . name,,},, getDirector (movieSmall);,//,=祝辞,undefined  getDirector (movieFull);,,//,=祝辞,& # 39;Ridley 斯科特# 39;

在movie.director ? . name表达式中,你可以找到吗?。:可选链运算符。

对于movieSmall,缺少属性导演。结果movie.director ? . name的计算结果为,定义。可选链运算符可防止引发TypeError:无法读取属性& # 39;名字# 39;未定义的,错误。

相反movieFull的属董事性是可用的。movie.director ? . name默认被评估为& # 39;雷德利,斯科特# 39;。

简而言之,代码片段:

 let  name =, movie.director ? . name; 

等效于:

 let 名称;,if  (movie.director  !=, null), {,, name =, movie.director.name;,} 

?。通过减少两行代码简化了getDirector()函数。这就是为什么我喜欢可选链的原因。

<强> 2.1数组项

可选链能还可以做更多的事。你可以在同一表达式中自由使用多个可选链运算符,甚至可以用它安全地访问数组项!

下一个任务编写一个返回电影主角姓名的函数。

在电影对象内部,演员数组可以为空甚至丢失,所以你必须添加其他条件:

 function  getLeadingActor(电影),{,,if  (movie.actors ,,, movie.actors.length 祝辞,0),{,,,,return  movie.actors [0] . name;,,,},},, getLeadingActor (movieSmall);,//,=祝辞,undefined  getLeadingActor (movieFull);,,//,=祝辞,& # 39;Harrison 福特# 39;

如果需要如果(电影。演员,,movies.actors。长度比;0){…},则必须确保,电影包含演员属性,并且该属性中至少有一个演员。

使用可选链,这个任务就很容易解决:

 function  getLeadingActor(电影),{,,return  movie.actors ?。[0] ? . name,,},, getLeadingActor (movieSmall);,//,=祝辞,undefined  getLeadingActor (movieFull);,,//,=祝辞,& # 39;Harrison 福特# 39;

演员?。确保演员属性存在。[0]?。确保列表中存在第一个参与者。这真是个好东西!

JavaScript可选链是什么