源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

JavaScript三元运算符的多种使用技巧

  • 时间:2020-03-12 23:22 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JavaScript三元运算符的多种使用技巧
发现代码慢慢写多了的时候会不自觉的将if else 用 三元来替代,仅仅是未了让代码更简洁精辟,当然也有人说用三元可以让你有高潮的感觉。最近在写js 的时候也有这样的感觉,并且收集了一些小技巧,分享分享。 大鸟请跳过下面这段,大大鸟帮忙指正 ^__^ ====普及线==== 表达式 (expr1) ? (expr2) : (expr3) 在 expr1 求值为 TRUE 时的值为 expr2,在 expr1 求值为 FALSE 时的值为 expr3。 ============ [b]普通用法[/b] 当你发现你经常用if else
[u]复制代码[/u] 代码如下:
if(拜春哥 || 拜考试帝){     不挂科; }else{     门门挂; }
那么三元的表示法就是
[u]复制代码[/u] 代码如下:
拜春哥 || 拜考试帝 ? 不挂科 : 门门挂
很帅气的发现代码 精辟了 好多。 日常中经常会有这样的 if else 判断,特别是嵌套比较多的时候 用三元是比较和谐的,可以让你的代码看起来更加清爽,结构清晰。 [b]稍微聪明点的用法 [/b]通过不断的变化,可以衍生出很多三元的用法。如下一段jquery代码
[u]复制代码[/u] 代码如下:
flag ? $('body').addClass('hover') : $('body').removeClass('hover') ;
[b]甚至更变态些的。 [/b]
[u]复制代码[/u] 代码如下:
$('.item')[ flag ? 'addClass' : 'removeClass']('hover')
上面的代码看着比较困惑。因为当flag = true 的时候 ,代码就变成以下代码:
[u]复制代码[/u] 代码如下:
$('.item')['addClass']('hover')
这样写法等同于。
[u]复制代码[/u] 代码如下:
$('.item').addClass('hover')
[b]再升华一下[/b] 可以根据需要来调用自己想要的function来处理更多的事情。
[u]复制代码[/u] 代码如下:
function a(){       do something } function b(){       do something } flag ? a() : b();
[b]那么为师的完全体[/b] 于是有了这么个案例,两个按钮 一个向前的行为,一个向后的行为。操作的功能都差不多。
[u]复制代码[/u] 代码如下:
    var action_turn = function(e, type){         var self = $(e).closest('li');         var target = self[type === 'prev' ? 'prev' : 'next']();         target.addClass('has-img');         self.removeClass('has-img')     }     var btn_next = $('#item-photo-panel a.next')     btn_next.click(function(){         action_turn(this, 'next');         return false;     });     var btn_prev = $('#item-photo-panel a.prev')     btn_prev.click(function(){         action_turn(this, 'prev');         return false;     });
[b]尽量避免的情况 [/b]
[u]复制代码[/u] 代码如下:
alert( true ? 'true' : false ? 't' : 'f' )
我指的是尽量避免如上嵌套的 三元,因为在js 中 语句是从右到左,上面的代码等同于
[u]复制代码[/u] 代码如下:
alert( true ? 'true' : ( false ? 't' : 'f' ) )
如php 中这个结果就完全不一样,三元嵌套的时候是优先左边的。
[u]复制代码[/u] 代码如下:
echo (( true ? 'true' :  false ) ? 't' : 'f'  )  //php中
tip: [b]另外发现php中的三元有这样的提示[/b] Note: 注意三元运算符是个语句,因此其求值不是变量,而是语句的结果。如果想通过引用返回一个变量这点就很重要。在一个通过引用返回的函数中语句 return $var == 42 ? $a : $b; 将不起作用,以后的 PHP 版本会为此发出一条警告。 但是经过试验,发现在javascript 中上面的做法是可以起作用的,大概是js 比较BT,严谨度没有php那么大的原因。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部