三元疯狂

Question

我有一位前同事，喜欢速记javascript。

今天，我遇到了这一行，我不知道如何破译它。

var originalSrc = (wheelBuilder.ANGLE_VIEW == "front" 
                   && $(this).parent().attr("id") == "builder_wheel" 
                   && wheelBuilder.CAR_VISIBLE == false) 
                  ? $(this).attr("data-original-front-src") 
                  : $(this).attr("data-original-src");

Answer 1

在最高级别，您正在查看的是三元运算符。当人们第一次遇到它时可能会让人感到困惑，因为它的结构并不像许多其他更熟悉的操作符，但是一旦理解了它的语法，它实际上相当简单。它是一个赋值运算符，它的用法如下：

variable = condition ? "Value when Condition is True" : "Value when Condition is False"

因此，在问号之前的陈述部分，无疑看起来像是被分配了什么，实际上被评估为布尔值，用于判断之前的值是否为或者在:分配给您的变量之后。

现在针对您的特定代码块：对于其中的所有&&条件，其中只有一个三元运算符。将其重新格式化为if语句，它等同于：

var originalSrc;
if(wheelBuilder.ANGLE_VIEW == "front" && $(this).parent().attr("id") == "builder_wheel" && wheelBuilder.CAR_VISIBLE == false) {
    originalSrc = $(this).attr("data-original-front-src");
}
else {
    originalSrc = $(this).attr("data-original-src");
}

也就是说，在三元运算符中放入四个条件仍然是相当差的形式。在简单的情况下，三元运算符更易于读者阅读，如下所示：

var message = statusCode == 0 ? "success" : "failure";

当?和:在他们知道其他代码意味着三元语句可能变得难以阅读的情况之间陷入困境时，{{1}}和{{1}}不是特定的语义符号集这一事实很容易一目了然。我工作的公司已经在他们的编码标准中明确指出，如果你将一个三元运算符嵌入到另一个三元运算符中，你的代码就无法通过代码审查 - 它只是太容易创建噩梦般难以理解的代码。

Answer 2

一些伪代码：

IF wheelBuilder.ANGLE_VIEW == "front"
AND $(this).parent().attr("id") == "builder_wheel"
AND wheelBuilder.CAR_VISIBLE == false
THEN set originalSrc = $(this).attr("data-original-front-src")
OTHERWISE set originalSrc = $(this).attr("data-original-src")

Answer 3

var originalSrc;

if ( wheelBuilder.ANGLE_VIEW == "front" && $(this).parent().attr("id") == "builder_wheel" && wheelBuilder.CAR_VISIBLE == false ) {
   originalSrc = $(this).attr("data-original-front-src");
}
else {
   originalSrc = $(this).attr("data-original-src");
}

更好？

一般三元结构：

（条件）（iftrue）:( iffalse）;

如果要将某些内容返回给变量，则规则是相同的：

var yourvariable = (a == b)?(c):(d);