为什么我喜欢 JavaScript 可选链

许多 JavaScript 的特征极大地改变了你的编码方法。从 ES2015 及更高版本开始，对我的代码影响较大的成果是解构、箭头函数、类和模块体系。

制止2019年8月，一项新提案可选链(optional chaining)进入了第3阶段，将是一个很好的改造。可选的链接变动了从深层工具布局会见属性的方法。

让我们看看可选链是怎样通过在深度会见也许缺傲幽属性时删除样板前提和变量来简化代码的。

1. 题目

因为 JavaScript 的动态特征，一个工具可以具有很是差异的工具嵌套布局。

凡是，你可以在以下环境下处理赏罚此类工具：

• 获取长途JSON数据
• 行使设置工具
• 具有可选属性

尽量这为工具提供了支持差异数据的机动性，可是在会见此类工具的属性时，随之而来的是增进了伟大性。

bigObject 在运行时可以有差异的属性集：

// One version of bigObject 
const bigObject = { 
  // ... 
  prop1: { 
    //... 
    prop2: { 
      // ... 
      value: 'Some value' 
    } 
  } 
}; 
 
// 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. 轻松深入会见属性

让我们计一律个生涯影戏信息的工具。该工具包括 title 必填属性，以及可选的 director 和 actor。

movieSmall 工具仅包括 title，而 movieFull 则包括完备的属性集：

const movieSmall = { 
  title: 'Heat' 
}; 
 
const movieFull = { 
  title: 'Blade Runner', 
  director: { name: 'Ridley Scott' }, 
  actors: [{ name: 'Harrison Ford' }, { name: 'Rutger Hauer' }] 
}; 

让我们写一个获取导演姓名的函数。请留意 director 属性也许会丢失：

function getDirector(movie) { 
  if (movie.director != null) { 
    return movie.director.name; 
  } 
} 
 
getDirector(movieSmall); // => undefined 
getDirector(movieFull);  // => 'Ridley Scott' 

if (movie.director) {...} 前提用于验证是否界说了 director 属性。假如没有这种提防法子，则在会见movieSmall 工具的导演的时，JavaScript 会激发错误 TypeError: Cannot read property 'name' of undefined。

这是用了可选链成果并删除 movie.director 存在验证的正确位置。新版本的 getDirector() 看起来要短得多：

function getDirector(movie) { 
  return movie.director?.name; 
} 
 
getDirector(movieSmall); // => undefined 
getDirector(movieFull);  // => 'Ridley Scott' 

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

对付 movieSmall，穷乏属性 director。功效 movie.director?.name 的计较功效为 undefined。可选链运算符可防备激发 TypeError: Cannot read property 'name' of undefined 错误。

相反 movieFull 的属性 director是可用的。 movie.director?.name 默认被评估为 'Ridley Scott'。

简而言之，代码片断：

let name = movie.director?.name; 

等效于：

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

?. 通过镌汰两行代码简化了 getDirector() 函数。这就是为什么我喜好可选链的缘故起因。

2.1 数组项

可选链能还可以做更多的事。你可以在统一表达式中自由行使多个可选链运算符。乃至可以用它安详地会见数组项!

下一个使命编写一个返回影戏主角姓名的函数。

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!