将嵌套的 if else 写入三元运算符答案

【问题标题】：Writing nested if else into ternary operator将嵌套的 if else 写入三元运算符
【发布时间】：2021-05-08 03:04:42
【问题描述】：

我已经嵌套了if else语句，有没有办法把它变成三元运算符？

let widthStyledMeter;
if (direction === 'horizontal') {
    if(size === "full"){
      widthStyledMeter = '100%';
    }else{
      widthStyledMeter = length;
    }
  } else {
    if(size === "full"){
      widthStyledMeter = '100%';
    }else{
      widthStyledMeter = thickness;
    }
  }

【问题讨论】：

您已经有了最好的解决方案。没有必要让它变得更糟。
仅仅因为你可以嵌套三元运算符并不意味着你应该：一旦嵌套超过一个级别，它们就变得非常难以快速阅读/浏览。您原来的解决方案已经运行得更好了。
我明白这一点，但想知道如何处理该特定解决方案。

标签： javascript if-statement conditional-statements

【解决方案1】：

尽管这可读性差，它看起来像这样：

const widthStyledMeter = size === "full" ? "100%" : (direction === 'horizontal' ? length : thickness);

您在这里设置了一个共同的值，即size == "full" = "100%"，因为它在 else 语句中没有条件，您可以减少它以避免size = "full" 双重检查

[编辑] 一种更易读的方式是：

let widthStyledMeter;
if (size === "full") {
    widthStyledMeter = "100%";
} else {
    widthStyledMeter = direction === "horizontal" ? length : thickness ;
}

【讨论】：

【解决方案2】：

这是使用三元运算符的方法：

let 
  widthStyledMeter,
  direction = "vertical",
  size = "100%",
  length = 100,
  thickness = 20;

direction === "horizontal"
  ? (widthStyledMeter = size === "full" ? "100%" : length)
  : (widthStyledMeter = size === "full" ? "100%" : thickness);

console.log(widthStyledMeter);

另外，既然你确定size 是"full"，那么widthStyledMeter 将永远是"100%"，所以最好先检查size，然后检查direction。

let 
  direction = "vertical",
  size = "100%",
  length = 100,
  thickness = 20,
  widthStyledMeter =
    size === "full" ? "100%" : direction === "horizontal" ? length : thickness;

console.log(widthStyledMeter);

【讨论】：