Javascript one line If...else...else if statement
I know you can set variables with one line if/else statements by doing var variable = (condition) ? (true block) : (else block) var variable = (condition) ? (true block) : (else block) , but I was wondering if there was a way to put an else if statement in there. Any suggestions would be appreciated, thanks everyone!
当然，你可以做嵌套的三元操作符，但它们很难阅读。
var variable = (condition) ? (true block) : ((condition2) ? (true block2) : (else block2))
tl;dr
Yes, you can... If a then a, else if b then if c then c(b), else b, else null
a ? a : (b ? (c ? c(b) : b) : null)
a
? a
: b
? c
? c(b)
: b
: null
longer version
Ternary operator ?: used as inline if-else is right associative . In short this means that the rightmost ? gets fed first and it takes exactly one closest operand on the left and two , with a : , on the right.
Practically speaking, consider the following statement (same as above):
a ? a : b ? c ? c(b) : b : null
The rightmost ? gets fed first, so find it and its surrounding three arguments and consecutively expand to the left to another ? .
a ? a : b ? c ? c(b) : b : null
^ <---- RTL
1. |1-?-2----:-3|
^ <-
2. |1-?|--2---------|:-3---|
^ <-
3.|1-?-2-:|--3--------------------|
result: a ? a : (b ? (c ? c(b) : b) : null)
This is how computers read it:
a is read. Node:
a ? is read. Node:
a ? a is read. Node:
a ? a a ? a : is read. Node:
a ? a : a ? a : b is read. Node:
a ? a : b a ? a : b ? is read, triggering the right-associativity rule. Associativity decides: node:
a ? a : (b ? a ? a : (b ? c is read. Node:
a ? a : (b ? c a ? a : (b ? c ? is read, re-applying the right-associativity rule. Node:
a ? a : (b ? (c ? a ? a : (b ? (c ? c(b) is read. Node:
a ? a : (b ? (c ? c(b) a ? a : (b ? (c ? c(b) : is read. Node:
a ? a : (b ? (c ? c(b) : a ? a : (b ? (c ? c(b) : b is read. Node:
a ? a : (b ? (c ? c(b) : b a ? a : (b ? (c ? c(b) : b : is read. The ternary operator ?: from previous scope is satisfied and the scope is closed. Node:
a ? a : (b ? (c ? c(b) : b) : a ? a : (b ? (c ? c(b) : b) : null is read. Node:
a ? a : (b ? (c ? c(b) : b) : null a ? a : (b ? (c ? c(b) : b) : null Result is: a ? a : (b ? (c ? c(b) : b) : null) a ? a : (b ? (c ? c(b) : b) : null)
Better readability
The ugly oneliner from above could (and should) be rewritten for readability as:
(Note that the indentation does not implicitly define correct closures as brackets () do.)
a
? a
: b
? c
? c(b)
: b
: null
for example
return a + some_lengthy_variable_name > another_variable
? "yep"
: "nop"
More reading
Mozilla: JavaScript Conditional Operator
Wiki: Operator Associativity
Bonus: Logical operators
var a = 0 // 1
var b = 20
var c = null // x=> {console.log('b is', x); return true} // return true here!
a
&& a
|| b
&& c
&& c(b) // if this returns false, || b is processed
|| b
|| null
Using logical operators as in this example is ugly and wrong, but this is where they shine...
"Null coalescence"
function(mayBeNull) {
var cantBeNull = mayBeNull || 42 // "default" value
var alsoCantBe = mayBeNull ? mayBeNull : 42 // ugly...
..
}
Short-circuit evaluation
false && (anything) // is short-circuit evaluated to false.
true || (anything) // is short-circuit evaluated to true.
Logical operators
Null coalescence
Short-circuit evaluation
This is use mostly for assigning variable, and it uses binomial conditioning eg.
var time = Date().getHours(); // or something
var clockTime = time > 12 ? 'PM' : 'AM' ;
There is no ElseIf, for the sake of development don't use chaining, you can use switch which is much faster if you have multiple conditioning in .js
上一篇: 在Javascript中合并？