es6 三元运算(三元类目)符语法与简写,多条件判断与??::形式

三元运算符就是替代传统if…else语句让更简洁。

一、三元运算标准写法

我们传统的写法为：

const x = 20;
let answer;
if (x > 10) {
    answer = 'right';
} else {
    answer = 'error';
}
console.log(answer);

三元运算符简写：

const answer = x > 10 ? 'right' : 'error';
console.log(answer);

我们在使用过程中也会常常动态赋值,如果值不存在就设置默认值：

let users = null;
const user = users ? users : "请登录";

当然大家也可以使用短路求值简写方式，更多大家参考19个常用的JavaScript简化编码优化小技巧

# 原方法
if (users !== null || users !== undefined || users !== '') {
     let user = users;
}
# 短路求值方法：
const user = users  || '请登录';

二、三元运算多条件判断写法

我们

const x,y,z = 20;
let answer;
if (x > 10 && y > 10) {
    answer = 'right';
} else {
    answer = 'error';
}
if (x > 10 || y > 10) {
    answer = 'right';
} else {
    answer = 'error';
}
console.log(answer);

我们在三元运算可以优化为：

const answer = x > 10 && y > 10 ? 'right' : 'error';
const answer = x > 10 || y > 10 ? 'right' : 'error';

三、三元运算符??::的形式

条件（三元）运算符上说三目运算符具有右结合性，根据以上两个例子，我总结三目运算符右结合性的意思是： 从最右边取":", 然后看它左边相邻的符号，如果是"?",那么它和这个"?"结合起来，可以用一个（）把它俩包住；如果左边相邻的符号是":"，那么取左边的":"，再重复这个判断.

?:?:?:?:?:
# 算法顺序
?:(?:(?:(?:(?:))))

???:::
# 算法顺序
?(?(?:):):

具体参考:三目（三元）运算符??::的形式

四、三元运算符简写

简单的语法我们可以简写:

# 标准三元运算
var isYes = answer === 1 ? true : false;
var isNo = answer === 1 ? false : true;

# 优化三元运算
var isYes = answer === 1;
var isNo = answer !== 1;