三元疯狂

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";

事实上,?并且:当它们被困在谁知道其他代码意味着三元语句很难一目了然难以阅读之间时,并不是特别语义的符号集.我工作的公司已经在他们的编码标准中明确指出,如果你将一个三元运算符嵌入到另一个三元运算符中,你的代码就无法通过代码审查 - 它只是太容易创建噩梦般难以理解的代码.