Conditional Operator
条件(三元)运算符是 JavaScript 仅有的使用三个操作数的运算符。本运算符经常作为 if 语句的简短形式来使用。
语法
condition ? expr1 : expr2 参数
condition计算结果为true或false的表达式。
expr1,expr2值可以是任何类型的表达式。
描述
如果条件值为真值(true),运算符就会返回 expr1 的值;否则, 就会返回 expr2 的值。例如, 根据 isMember 变量的值显示不同的信息,可以使用下面的表达式:
'The fee is ' + (isMember ? '$2.00' : '$10.00');同样也可以把三元运算符的值赋值给一个变量:
var elvisLives = Math.PI > 4 ? 'Yep' : 'Nope';多个三元操作符也是可能的(注:条件运算符是右结合):
var firstCheck = false,
    secondCheck = false,
    access = firstCheck ? 'Access denied' : secondCheck ? 'Access denied' : 'Access granted';
  
console.log(access); // logs "Access granted"还可以把三元操作符用在等式的左边:
var condition1 = true,
    condition2 = false,
    access = condition1 ? (condition2 ? "true true": "true false") : (condition2 ? "false true" : "false false");
console.log(access); // logs "true false"注:括号不是必需的,不影响功能。他们在那里帮助想象如何处理结果。
您也可以在自由空间中使用三元评估来执行不同的操作:
var stop = false, age = 16;
age > 18 ? location.assign('continue.html') : stop = true;您也可以对每个案例进行多个操作,用逗号分隔,并将其括在括号中:
var stop = false, age = 23;
age > 18 ? (
    alert('OK, you can go.'),
    location.assign('continue.html')
) : (
    stop = true,
    alert('Sorry, you are much too young!')
);在赋值时,您也可以执行多个操作。在这种情况下,括号的最后逗号分隔值 将是要分配的值。
var age = 16;
var url = age > 18 ? (
    alert('OK, you can go.'), 
    // alert returns "undefined", but it will be ignored because
    // isn't the last comma-separated value of the parenthesis
    'continue.html' // the value to be assigned if age > 18
) : (
    alert('You are much too young!'),
    alert('Sorry :-('),
    // etc. etc.
    'stop.html' // the value to be assigned if !(age > 18)
);
location.assign(url); // "stop.html"返回三元语句
三元运算符很适合于函数返回,否则需要if/else声明。
var func1 = function( .. ) {
  if (condition1) { return value1 }
  else { return value2 }
}
var func2 = function( .. ) {
  return condition1 ? value1 : value2
}一个很好的方法来发现,三元将是一个合适的替代if/else语句是return关键字多次使用,是唯一的表达式内的if块。
通过将三元数字分成多行,并使用多余的空格,可以使用三元运算符来非常干净地替换冗长的一系列if/else语句。这提供了一种表达相同逻辑的句法轻松的方式:
var func1 = function( .. ) {
  if (condition1) { return value1 }
  else if (condition2) { return value2 }
  else if (condition3) { return value3 }
  else { return value4 }
}
var func2 = function( .. ) {
  return condition1 ? value1
       : condition2 ? value2
       : condition3 ? value3
       :              value4
}规范
| Specification | Status | Comment | 
|---|---|---|
| ECMAScript Latest Draft (ECMA-262)The definition of 'Conditional Operator' in that specification. | Living Standard |  | 
| ECMAScript 2015 (6th Edition, ECMA-262)The definition of 'Conditional Operator' in that specification. | Standard |  | 
| ECMAScript 5.1 (ECMA-262)The definition of 'The conditional operator' in that specification. | Standard |  | 
| ECMAScript 1st Edition (ECMA-262)The definition of 'The conditional operator' in that specification. | Standard | Initial definition. Implemented in JavaScript 1.0. | 
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari | 
|---|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | 
| Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | 
|---|---|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | 
本文档系腾讯云开发者社区成员共同维护,如有问题请联系 cloudcommunity@tencent.com

