What is the difference between using '&&' and '||' over a ternary operator ('?' and ':')?

问题

In JavaScript, what is the difference between using

true ? 'Hello' : 'Goodbye' //Evaluates to "Hello"

false ? 'Hello' : 'Goodbye' //Evaluates to "Goodbye"

and

true && 'Hello' || 'Goodbye' //Evaluates to "Hello"

false && 'Hello' || 'Goodbye' //Evaluates to "Goodbye"

回答1:

These are two different concepts that happen to give you the same answer.

---

The first example uses the ternary operator and its result depends only on the first operand (in your example true/false):

true ? 'Hello' : 'Goodbye' //Evaluates to "Hello"
false ? 'Hello' : 'Goodbye' //Evaluates to "Goodbye"

It is a shorthand form of an if/else. If the first operand is truthy, return the second operand (Hello). If the first operand is falsy, return the third operand (Goodbye).

The first expression of your first example can be rewritten as:

if (true)
    return 'Hello';
else
    return 'Goodbye';

---

The second example makes use of logical operators and its result depends on both the first and the second operand.

true && 'Hello' || 'Goodbye' //Evaluates to "Hello"
false && 'Hello' || 'Goodbye' //Evaluates to "Goodbye"

If firstOperand && secondOperand evaluates to a truthy value, return secondOperand. If they evaluate to something falsy, return thirdOperand (Goodbye).

In your examples, since a non-empty string is truthy, true && 'Hello' evaluates to Hello, and false && 'Hello' evaluates to false.

So your second example turns into:

'Hello' || 'Goodbye'
false || 'Goodbye'

Because of how || works, that happens to output what your first example outputs, but they're different concepts.

Notice how in the first example, we know what to return after evaluating the first operand. In the second example, we have to evaluate the first two operands before we know what to return.

回答2:

Ternary operator

This is a short hand of if else.

true ? 'Hello' : 'Goodbye'

is equivalent to

if (true) {
    'Hello'
} else {
    'Goodbye'
}

Logical predicates

whereas true && 'Hello' || 'Goodbye' is not an if else condition

true && 'Hello' || 'Goodbye'

is equivalent to

(true && 'Hello') || 'Goodbye'

This results in Hello but it's based on precedence. Consider the case of

'Goodbye' || (true && 'Hello')

This will result in Goodbye. Changing the order changes the output but that doesn't happen with a ternary operator.

回答3:

Seems like there is no difference in outcome. BUT i had a guess on how they get processed. ()?: is actually a tiny bit faster than &&|| (See demonstration below).

(A)B?C: basically is a IF-Shorthand, so the (A) part gets evaluated and either the B then or C else stack is picked.

(A)&&B||C gets evaluated entirely. First the (A) gets evaluated. After that some implicit conversion(Boolean conversion) happens - which takes a bit of time

false - thx to "Gust van de Wal"

Still a difference: fiddle

var max = 1e7;

var start1 = (new Date()).getTime();
for( var i = 0; i < max; i++) {
  let a = (i%2) ? max-i : max+1;
  let b = (i%3) ? max-i : max+i;
}
var stop1 = (new Date()).getTime();

var start2 = (new Date()).getTime();
for( var i = 0; i < max; i++) {
  let a = (i%2) && max-i || max+i;
  let b = (i%3) && max-i || max+i;
}
var stop2 = (new Date()).getTime();

console.log( (new Date()).getTime() );

console.log( stop1 -start1 );
console.log( stop2 -start2 );

回答4:

Your first case is an example of inline if statements, while your second is an example of logical predicates.

来源：https://stackoverflow.com/questions/51051571/what-is-the-difference-between-using-and-over-a-ternary-operator