三目运算活用

有时候,我们碰到根据两个不同结果给一个变量赋值的情况,很容易就想到了三目运算
let a = age > 18 ? '成年' : '未成年';
但是如果有超过两种情况呢,我们先想到的是if、else if、else或者switch、case,其实三目也是可以嵌套下去的,例如这个if条件句
if (a == 0) {
console.log('0')
} else if (a > 0) {
console.log('正数')
} else {
console.log('负数')
}
用三目运算就可以这样写
a = 0 ? '0' : (a > 0 ? '正数' : '负数');
由此可得,多个条件时候,可以一直这么嵌套下去
a = 条件1 ? 值1 : (条件2 ? 值2 : (条件3 ? 值3 : (条件4 ? 值4 : 值5)));
但是,据听说嵌套多层时候,运算会比较慢,不推介这样写。关于加(),加括号表示优先级,只是更方便我们读代码,不加括号时候,同样是按照这样子计算的,举个栗子
a = 4 > 2 ? 3 : 1 > 2 ? 6 : 8 //3
前边4>2,条件成立,输出3,运算到此终止,并不会再用3和后边2去做比较,后边的1 > 2 ? 6 : 8是前边4>2不成立时候才进行运算的。

三目也可以在赋值的时候,给里边的值继续根据不同情况赋值,栗子
{
type == 'datail' ? userInfo.sex == 1 ? '男' : '女' :
getFieldDecorator('sex', {
initialValue: userInfo.sex
})(
<RadioGroup>
<Radio value="1">男</Radio>
<Radio value="2">女</Radio>
</RadioGroup>
)
}
以上代码,在 type 值等于 'datail' 时候,传递 userInfo.sex 的值,如果 userInfo.sex == 1,则显示 ‘男’,否则显示 '女',在 type 值不等于 'datail' 时候,显示全部无状态的radio控件。

以上是本人测试出来的结果,如果存在问题或者有更好的三目算法,请多多指教


0 个评论

要回复文章请先登录注册