为了账号安全,请及时绑定邮箱和手机立即绑定

JavaScript三元运算符的使用 进阶三元运算逻辑拓展篇

标签:
JavaScript

三元运算符其实是很方便很好用的一种条件判断方法,这个方法可以使调用或渲染数据时逐级筛选。不仅如此,如果适当的扩展三元运算符的逻辑,这个判断方法还会很好玩,也可以在某种情景下提高代码效率。有人会说,三元运算符只适合一些简单的判断场景,其实并不然!


语法

我们先来看一下三元运算符的最基本的语法:

  1. 条件表达式?True:False  

这是三元运算符最基本的语法结果,首先`?`前是一个条件表达式,`?`后面的即是逐级执行的条件,如果条件为真值时,`?`后面的一个事件将被触发,否将会触发下一个事件。这个结构类似于:

  1. if(条件表达式){  

  2.   //True  

  3. }else{  

  4.   //False  

  5. }  

运用

实践才是一切开始的必要条件,下面我们就通过实际需求运用一下三元运算符。三元运算符其实和if...else...的原理基本无差,三元运算符能实现的其实if...else...也能实现,但是存在即合理,他能在有些需求更方便的做条件判断。

比如你要给一个变量赋值的时候,需要按照不同条件赋予不同值的时候,比如我们有两种状态,不同状态下要赋给变量不同的值,我们可以对比下三元运算符和if...else...的写法

  1. //三元运算符  

  2. var status = (type==1?'已售':'未售')  

  3.   

  4. //if...else...  

  5. if(type==1){  

  6.   var status = '已售'  

  7. }else{  

  8.   var status = '未售'  

  9. }  

对比一下这两种写法,很明显的三元运算符的条件判断写法代码量更简洁,而常用的if...else...判断则显得有点臃肿,而且也不够优美。

拓展

如果你认为,只有在这种简单的条件判断下才能用到三元运算符,那你就大错特错了,三元运算符也能在一些复杂的场景下运用,那我们就通过三元运算符来模拟if...else if..else...的判断模式

我们再拓展一下之前的那个简单的条件表达式,比如,现在我们还是两种状态码,但是有一种状态码里还有一种不同的情况存在,我们通过三元运算符来实现一下:

  1. //简单的条件判断  

  2. var status = (type==1?'已售':'未售')  

  3.   

  4. //拓展的条件判断  

  5. var status = (type==1?(agagin==1?'再售':'已售'):'未售')  

上面拓展的条件判断里实现了if...else if...else...的写法,我们通过if...else if...else...来是实现一下,以方便理解:

  1. if(type==1 && again==1){  

  2.   var status='再售'  

  3. }else if(type==1 && again==0){  

  4.   var status='已售'  

  5. }else{  

  6.   var status='未售'  

  7. }  

那我们可以换一个角度来看三元运算符,我们上面一个拓展的条件判断可以分解为两个条件表达式,第一个是type==1,第二个就是again==1,也就是说,只是表达式的条件判断为真值时,就会执行该判断`:`前的一个事件,所以当第一个条件表达式判断后还会执行下一个判断。

进阶

我们按照这种方式理解三元运算符后,就可以猜想到,这个条件表达式里其实不单单是一个判断或者一个结果,也可以是函数,毕竟JavaScript本就是函数式编程的脚本语言。比如:

  1. check()?Ture:False  

  2. status==1?True():False()  

有了函数的加入,那三元判断的拓展空间也就更强了。你们可以举一反三的试试看,还有没有更有趣的写法加入到三元运算符。

原文出处


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消