您如何在javascript中设置（大）短路分配样式？

Question

想象您有这行：

var result = content['aPossbileValue'] || $el.data('root-path') + content.type +  '/something/' + content.slug;

行长太长，所以我想知道如何改善它？

可能的选项：

var result = content['aPossbileValue'] 
  || $el.data('root-path') + content.type + '/something/' + content.slug;

var result = content['aPossbileValue'] ||
             $el.data('root-path') + content.type + '/something/' + content.slug;

var result = content['aPossbileValue'] 
             || $el.data('root-path') + content.type + '/something/' + content.slug

或者这被认为是不好的做法！

让我知道您的意见^^！

Answer 1

如果您希望减少行的长度，一种可能性是在content对象上使用destructuring assignment首先获得相关属性。第二步，您可以使用template literals生成分配给结果的default值，以防aPossibleValue产生falsy值。像这样：

let {aPossibleValue, type, slug} = content;
var result = aPossibleValue || $el.data('root-path') + `${type}/something/${slug}`;

但是您应该注意，这些是ES6功能，某些浏览器和/或版本不支持这些功能。因此，请始终检查浏览器兼容性部分。如果您无法获得这种奢侈，我会选择这样的东西：

let val = content.aPossibleValue, type = content.type, slug = content.slug;
var result = val | $el.data('root-path') + type + '/something/' + slug;

Answer 2

使用具有描述性名称的变量比长而复杂的行更具可读性。在您的情况下，这样做会更好：

var customPath = $el.data('root-path') + type + '/something/' + slug;
var result = content['aPossibleValue'] || customPath;