为什么我喜欢 JavaScript 可选链

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

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

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

使用可选链，这个任务就很容易解决：

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

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

3. 默认为Nullish合并

一项名为nullish 合并运算符的新提案会处理 undefined 或 null ，将其默认设置为特定值。

如果 variable 是 undefined 或 null，则表达式 variable ?? defaultValue 的结果为 defaultValue。否则，表达式的计算结果为 variable 值。

const noValue = undefined; 
const value = 'Hello'; 
 
noValue ?? 'Nothing'; // => 'Nothing' 
value   ?? 'Nothing'; // => 'Hello' 

当链评估为 undefined 时，通过将默认值设置为零，Nullish 合并可以改善可选链。

例如，让我们更改 getLeading() 函数，以在电影对象中没有演员时返回 "Unknown actor" ：

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

4. 可选链的3种形式

你可以通过以下 3 种形式使用可选链。

第一种形式的 object.property 用于访问静态属性：

const object = null; 
object?.property; // => undefined 

第二种形式 object?.[expression] 用于访问动态属性或数组项：

const object = null; 
const name = 'property'; 
object?.[name]; // => undefined 

const array = null; 
array?.[0]; // => undefined 

最后，第三种形式 object?.([arg1, [arg2, ...]]) 执行一个对象方法：

const object = null; 
object?.method('Some value'); // => undefined 

如果需要，可以将这些形式组合起来以创建长的可选链：

const value = object.maybeUndefinedProp?.maybeNull()?.[propName]; 

5.短路：在null/undefined 处停止

可选链运算符的有趣之处在于，一旦在其左侧 leftHandSide?.rightHandSide 上遇到空值，就会停止对右侧访问器的评估。这称为短路。

看一个例子：

const nothing = null; 
let index = 0; 
 
nothing?.[index++]; // => undefined 
index;              // => 0 

nothing 保留一个空值，因此可选链立即求值为 undefined，并跳过右侧访问器的求值。因为 index 的值没有增加。

6. 何时使用可选链

要抵制使用可选链运算符访问任何类型属性的冲动：这会导致错误的用法。下一节将说明何时正确使用它。

6.1 可能无效的访问属性

必须仅在可能为空的属性附近使用 ?.： maybeNullish?.prop。在其他情况下，请使用老式的属性访问器：.property 或 [propExpression]。

调用电影对象。查看表达式 movie.director?.name，因为 director 可以是 undefined，所以在 director 属性附近使用可选链运算符是正确的。

（编辑：鹰潭站长网）

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