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

Song5880 次浏览0个评论2020年11月09日

三元运算符就是替代传统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;

提交评论

请登录后评论

用户评论

    当前暂无评价,快来发表您的观点吧...

更多相关好文

    当前暂无更多相关好文推荐...