10bet为什么我喜欢Js可选链?

来源:http://www.chinese-glasses.com 作者:Web前端 人气:71 发布时间:2020-04-22
摘要:时间: 2019-09-22阅读: 103标签: 可选链 时间: 2019-08-26阅读: 153标签: 属性 很多 JavaScript 的特性极大地改变了你的编码方式。从 ES2015及更高版本开始,对我的代码影响最大的功能是解构、箭

时间: 2019-09-22阅读: 103标签: 可选链

时间: 2019-08-26阅读: 153标签: 属性

很多 JavaScript 的特性极大地改变了你的编码方式。从 ES2015 及更高版本开始,对我的代码影响最大的功能是解构、箭头函数、类和模块系统。

JavaScript 的特性极大地改变了你的编码方式。从 ES2015 开始,对我代码影响最多的功能是解构、箭头函数、类和模块系统。截至 2019 年 8 月,一项新提案optional chaining达到了第3阶段,这将是一个很好的改进。Optional Chaining 改变了从深层对象结构访问属性的方式。

截至2019年8月,一项新提案可选链(optional chaining)进入了第3阶段,将是一个很好的改进。可选的链接更改了从深层对象结构访问属性的方式。

下面让我们来看看 optional chaining 是如何通过在深度访问可能缺少的属性时删除样板条件和变量来简化代码的。

让我们看看可选链是如何通过在深度访问可能缺少的属性时删除样板条件和变量来简化代码的。

  1. 问题
  1. 问题

由于 JavaScript 的动态特性,对象可以有区别很大的嵌套对象结构。

由于 JavaScript 的动态特性,一个对象可以具有非常不同的对象嵌套结构。

通常,你在以下情况下处理此类对象:

通常,你可以在以下情况下处理此类对象:

获取远程 JSON 数据使用配置对象具有 optional 属性

获取远程JSON数据使用配置对象具有可选属性

虽然这为对象提供了支持不同结构数据的灵活性,但是在访问这些对象的属性时会增加复杂性。

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

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

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

// One version of bigObjectconst bigObject = { // ... prop1: { //... prop2: { // ... value: 'Some value' } }};// Other version of bigObjectconst bigObject = { // ... prop1: { // Nothing here }};
// One version of bigObjectconst bigObject = { // ... prop1: { //... prop2: { // ... value: 'Some value' } }};// Other version of bigObjectconst bigObject = { // ... prop1: { // Nothing here }};

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

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

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

这会产生很多样板代码。如果不需要写这些代码那就太好了。

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

让我们看看 optional chaining 如何解决这个问题,并减少样板条件。

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

  1. 10bet,轻松的深入访问属性
  1. 轻松深入访问属性

让我们设计一个保存电影信息的对象。该对象包含一个title属性,以及可选的director和actors。

让我们设计一个保存电影信息的对象。该对象包含title必填属性,以及可选的director和actor。

movieSmall对象只包含title,而movieFull包含完整的属性集:

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

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

让我们写一个获取导演名字的函数。请记住,director属性可能会不存在:

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

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

if (movie.director) {...}条件用于验证director属性是否已定义。如果没有这个预防措施,在访问movieSmall对象director的时候,JavaScript 会抛出错误TypeError: Cannot read property 'name' of undefined。

if (movie.director) {...}条件用于验证是否定义了director属性。如果没有这种预防措施,则在访问movieSmall对象的导演的时,JavaScript 会引发错误TypeError: Cannot read property 'name' of undefined。

这是使用新的 optional chaining 功能的正确位置,并删除movie.director的存在验证。新版本的getDirector()看起来要短得多:

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

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

在表达式movie.director?.name中你可以找到?.: optional chaining 运算符。

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

在movieSmall的情况下,如果属性director丢失了。那么movie.director?.name的计算结果为undefined。 optional chaining 运算符可防止抛出TypeError:Cannot read property 'name' of undefined。

对于movieSmall,缺少属性director。结果movie.director?.name的计算结果为undefined。可选链运算符可防止引发TypeError: Cannot read property 'name' of undefined错误。

相反,在movieFull的情况下,属性director可用。movie.director?.name的值为'Ridley Scott'.。

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

简单来说,代码片段:

简而言之,代码片段:

letname = movie.director?.name;
letname = movie.director?.name;

相当于:

等效于:

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

?.通过减少 2 行代码简化了getDirector()函数。这就是我喜欢 optional chaining 的原因。

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

2.1 数组项

2.1 数组项

但是 optional chaining 功能可以做更多的事情。你可以在同一表达式中使用多个optional chaining 运算符。甚至可以使用它来安全地访问数组项目!

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

接下来的任务是编写一个返回电影主角名字的函数。

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

在 movie 对象中,actors数组可以为空甚至丢失,因此你必须添加其他条件:

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

function getLeadingActor(movie) { if (movie.actors  movie.actors.length  0) { return movie.actors[0].name; }}getLeadingActor(movieSmall); // = undefinedgetLeadingActor(movieFull); // = 'Harrison Ford'
function getLeadingActor(movie) { if (movie.actors  movie.actors.length  0) { return movie.actors[0].name; }}getLeadingActor(movieSmall); // = undefinedgetLeadingActor(movieFull); // = 'Harrison Ford'

if (movie.actors movies.actors.length 0) {...}条件需要确保movie中包含actors属性,并且此属性至少有一个 actor。

如果需要if (movie.actors movies.actors.length 0) {...},则必须确保movie包含actors属性,并且该属性中至少有一个actor。

通过使用 optional chaining,此任务很容易解决:

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

function getLeadingActor(movie) { return movie.actors?.[0]?.name;}getLeadingActor(movieSmall); // = undefinedgetLeadingActor(movieFull); // = 'Harrison Ford'
function getLeadingActor(movie) { return movie.actors?.[0]?.name;}getLeadingActor(movieSmall); // = undefinedgetLeadingActor(movieFull); // = 'Harrison Ford'

actors?.确保actors属性存在。[0]?.确保第一个 actor 存在于列表中。很好!

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

  1. nullish 合并

本文由10bet发布于Web前端,转载请注明出处:10bet为什么我喜欢Js可选链?

关键词:

最火资讯