为什么我喜欢 JavaScript 可选链(3)

相反，使用 ?. 访问电影标题 movie?.title 没有任何意义。电影对象不会是空的。

// Good 
function logMovie(movie) { 
  console.log(movie.director?.name); 
  console.log(movie.title); 
} 
 
// Bad 
function logMovie(movie) { 
  // director needs optional chaining 
  console.log(movie.director.name); 
 
  // movie doesn't need optional chaining 
  console.log(movie?.title); 
} 

6.2 通常有更好的选择

以下函数 hasPadding() 接受具有可选 padding 属性的样式对象。 padding 具有可选的属性 left，top，right，bottom。

尝试用可选链运算符：

function hasPadding({ padding }) { 
  const top = padding?.top ?? 0; 
  const right = padding?.right ?? 0; 
  const bottom = padding?.bottom ?? 0; 
  const left = padding?.left ?? 0; 
  return left + top + right + bottom !== 0; 
} 
 
hasPadding({ color: 'black' });        // => false 
hasPadding({ padding: { left: 0 } });  // => false 
hasPadding({ padding: { right: 10 }}); // => true 

虽然函数可以正确地确定元素是否具有填充，但是为每个属性使用可选链是毫无必要的。

更好的方法是使用对象散布运算符将填充对象默认为零值：

function hasPadding({ padding }) { 
  const p = { 
    top: 0, 
    right: 0, 
    bottom: 0, 
    left: 0, 
    ...padding 
  }; 
  return p.top + p.left + p.right + p.bottom !== 0; 
} 
 
hasPadding({ color: 'black' });        // => false 
hasPadding({ padding: { left: 0 } });  // => false 
hasPadding({ padding: { right: 10 }}); // => true 

我认为这一版本的 hasPadding() 可读性更好。

7. 我为什么喜欢它?

我喜欢可选链运算符，因为它允许轻松地从嵌套对象中访问属性。它可以防止编写针对访问者链中每个属性访问器上的空值进行验证的样板代码。

当可选链与空值合并运算符结合使用时，可以得到更好的结果，从而更轻松地处理默认值。

（编辑：ASP站长网）