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

Song • 54 次浏览 • 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;

原创文章,转载请注明 :es6 三元运算(三元类目)符语法与简写,多条件判断与??::形式 - Laravel学习网
原文出处: https://phpartisan.cn/news/150.html
问题交流群 :168117787
提交评论
要回复文章请先登录注册
用户评论
  • 没有评论
[ 配置教程 ] 在ubuntu16.04中部署LNMP环境(php7+maridb且开启maridb远程以及nginx多域名访问 )并配置laravel环境