如果 else 语句作为三元运算符，我将如何编写答案

【问题标题】：How would I write this if else statement as ternary operator如果 else 语句作为三元运算符，我将如何编写
【发布时间】：2021-05-17 10:08:17
【问题描述】：

这是一个初学者的问题，但我如何将这个 JavaScript 语句编写为三元运算符？或者写这个最干净/最优化的方式是什么？

if ($("#firstName,#lastName, #email, #message").filter(function() { return $(this).val(); }).length > 0) {
   $("label").css(labelAnimation[0]);
 } else {
   $("label").css(labelAnimation[1]);
 }

【问题讨论】：

有点密集...那段代码应该做什么？

标签： javascript conditional-operator

【解决方案1】：

你可以这样做

$(
  "#firstName,#lastName,#email,#message").filter(
    function() { 
      return $(this).val(); 
    }
  ).length > 0
)
? $("label").css(labelAnimation[0]) : $("label").css(labelAnimation[1])

或者在一行中：

$("#firstName,#lastName,#email,#message").filter(function() {return $(this).val();}).length > 0) ? $("label").css(labelAnimation[0]) : $("label").css(labelAnimation[1])

【讨论】：

【解决方案2】：

你可以写

$("label").css(labelAnimation[
    $("#firstName,#lastName,#email,#message").filter(() => $(this).val())
        .length > 0 
           ? 1
           : 0
])

【讨论】：

【解决方案3】：

为了保持可读性，首先将布尔结果放入变量中。然后将条件放在索引查找括号内：

const anyInputsFilled = $("#firstName,#lastName,#email,#message")
    .filter(function () { return $(this).val(); })
    .length > 0;
$("label").css(labelAnimation[anyInputsFilled ? 0 : 1]);

我建议先从labelAnimation 中提取值，例如：

const [anyFilledCSS, noneFilledCSS] = labelAnimation;
// ...
const anyInputsFilled = $("#firstName,#lastName,#email,#message")
    .filter(function () { return $(this).val(); })
    .length > 0;
$("label").css(anyInputsFilled ? anyFilledCSS : noneFilledCSS]);

【讨论】：