为什么我喜欢 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 数组项

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

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

（编辑：鹰潭站长网）

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