如何使用三元运算符执行此 IF答案

【问题标题】：How to do this IF with ternary operators如何使用三元运算符执行此 IF
【发布时间】：2021-03-09 17:01:39
【问题描述】：

如何使用三元运算符执行此 IF？

if (img != null) {
  return img;
} else if (!user) {
  return 'img.svg';
} else if (user) {
  if (user.img && !camera) {
    return `imgServer`;
  } else if (!user.img && !camera) {
    return 'img.svg';
  } else if (user.img && camera) {
    return camera;
  } else if (!user.img && camera) {
    return camera;
  }
}

我已经尝试了多种方法，但没有一种方法适合我。

【问题讨论】：

你的 else if (user) 可以简化为 else （因为先前的条件是 !user，因此 else if(user) 和 else 是等价的），除非有一些非排他性的虚假开。
除了上面提到的不必要的else if，我认为您当前的代码很好。
当您返回每个分支时，您不需要任何else。

标签： javascript if-statement conditional-statements conditional-operator

【解决方案1】：

如果您不介意使用几个 if 语句..

const imgSvg = 'img.svg' // Maybe use a variable for 'img.svg'?

if (img) return img
if (!user) return imgSvg
return camera || (user.img ? 'imgServer' : imgSvg)

所以..

如果您有img，请返回它。

如果您没有img.. 那么接下来要做的就是在没有user 存在的情况下返回“img.svg”..

即..if (!user) return imgSvg

从那里它取决于camera 和user.img..

即..return camera || user.img ? 'imgServer' : imgSvg

注意：这与@Nina Scholz 的回答非常相似。但你有一个案例：

如果存在!user.img 和camera，则返回camera

@Nina Scholz answer 不允许这样做。如果我错了，请纠正我。

【讨论】：

【解决方案2】：

由于您的ifs 中有return 语句，您的代码可能需要进行一些改造... 这是你上面写的直接等价。

let returnValue = img != null ? img : !user ? 'img.svg' : user.img && !camera ? `imgServer` : !user.img && !camera ? 'img.svg' : user.img && camera ? camera : !user.img && camera : camera;
return returnValue;

但老实说，我觉得这个具体的例子可以简化一点......

正如 cmets 中所指出的，由于您有 return 语句，因此您不需要所有这些 else if 并且您可以稍微压缩您的逻辑

以下内容等同于您问题中的代码

if (img != null) return img;
if (!user) return 'img.svg';
if (!camera) {
  if (user.img) return `imgServer`;
return 'img.svg';
}
return camera;

而如果你绝对想要三进制，那就是：

let returnValue = img != null ? img : !user ? 'img.svg' : !camera ? user.img ? `imgServer` : 'img.svg' : camera;
return returnValue;

这可能不像 Nina Scholz 那样简洁，也可能不如 Nina Scholz 那样优雅，但如果 ifs 的序列和布尔评估对您来说很重要，它可能会成功

【讨论】：

【解决方案3】：

您确定这里需要三元组吗？就个人而言，我一直发现三元组在最好的情况下很难理解和调试。

我将从简化您的 if 语句树开始。正如其他人所说，您可以将else if (user) 简化为`else。给你：

if (img != null) {
  return img;
} else if (!user) {
  return 'img.svg';
} else {
  // simplified because of the previous if statement
  if (user.img && !camera) {
    return `imgServer`;
  } else if (!user.img && !camera) {
    return 'img.svg';
  } else if (user.img && camera) {
    return camera;
  } else if (!user.img && camera) {
    return camera;
  }
}

然后我会通过重新排序来解决嵌套 if 语句更简单的问题：

if (img != null) {
  return img;
} else if (!user) {
  return 'img.svg';
} else {
  // simplified because of the previous if statement
  if (user.img && !camera) {
    return `imgServer`;
  } else if (!user.img && camera) {
    return camera;
  } else if (user.img && camera) {
    return camera;
  }
  // Since there are four possible states allowed
  // (write out a truth table for proof), we can
  // simplify this nested if statement
  return 'img.svg';
}

现在一切都已简化，您可以着手创建三元组。一、嵌套if：

if (img != null) {
  return img;
} else if (!user) {
  return 'img.svg';
} else {
  // simplified because of the previous if statement
  return (user.img && !camera) ? `imgServer` :
         (!user.img && camera) ? camera : 
         (user.img && camera) ? camera :
         'img.svg';
}

最后是外部 if 语句：

return (img != null) ? img :
       (!user) ? 'img.svg' :
         (user.img && !camera) ? `imgServer` :
         (!user.img && camera) ? camera : 
         (user.img && camera) ? camera :
         'img.svg';
}

【讨论】：

您是第一个真正回答所提问题的人（用嵌套的三元表达式替换“if/else”块）
没想到这么简单！这对我有用。非常感谢合作伙伴！以及每个人的答案！

【解决方案4】：

您可以将语句压缩成这样，而无需使用难以理解的三元组。

if (img != null) return img;            // maybe this would work, too if (img) return img;
if (!user || !user.img) return 'img.svg';
if (camera) return camera;
return `imgServer`;

更短的方法：

return image
    || (!user || !user.img) && 'img.svg'
    || camera
    || `imgServer`;

【讨论】：