Blogger Information
Blog 38
fans 0
comment 1
visits 36167
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
关于三元表达式摘录
夜澜风的博客
Original
996 people have browsed it

js 三元表达式

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

 发现代码慢慢写多了的时候会不自觉的将if else 用 三元来替代,仅仅是未了让代码更简洁精辟,当然也有人说用三元可以让你有高潮的感觉。最近在写js 的时候也有这样的感觉,并且收集了一些小技巧,分享分享。

大鸟请跳过下面这段,大大鸟帮忙指正 ^__^

====普及线====

表达式 (expr1) ? (expr2) : (expr3)

在 expr1 求值为 TRUE 时的值为 expr2,在 expr1 求值为 FALSE 时的值为 expr3。

============

普通用法

当你发现你经常用if else

 代码如下:
if(拜春哥 || 拜考试帝){
不挂科;
}else{
门门挂;
}

那么三元的表示法就是

 代码如下:
拜春哥 || 拜考试帝 ? 不挂科 : 门门挂

很帅气的发现代码 精辟了 好多。

日常中经常会有这样的 if else 判断,特别是嵌套比较多的时候 用三元是比较和谐的,可以让你的代码看起来更加清爽,结构清晰。

稍微聪明点的用法
通过不断的变化,可以衍生出很多三元的用法。如下一段jquery代码

 代码如下:
flag ? $('body').addClass('hover') : $('body').removeClass('hover') ;

甚至更变态些的。

 代码如下:
$('.item')[ flag ? 'addClass' : 'removeClass']('hover')

上面的代码看着比较困惑。因为当flag = true 的时候 ,代码就变成以下代码:

 代码如下:
$('.item')['addClass']('hover')

这样写法等同于。

 代码如下:


$('.item').addClass('hover')

再升华一下

可以根据需要来调用自己想要的function来处理更多的事情。

 代码如下:


function a(){
do something
}
function b(){
do something
}

flag ? a() : b();

那么为师的完全体

于是有了这么个案例,两个按钮 一个向前的行为,一个向后的行为。操作的功能都差不多。

 代码如下:


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;
});

尽量避免的情况

 代码如下:
alert( true ? 'true' : false ? 't' : 'f' )

我指的是尽量避免如上嵌套的 三元,因为在js 中 语句是从右到左,上面的代码等同于

代码如下:
alert( true ? 'true' : ( false ? 't' : 'f' ) )

如php 中这个结果就完全不一样,三元嵌套的时候是优先左边的。

 代码如下:
echo (( true ? 'true' : false ) ? 't' : 'f' ) //php中

tip:
另外发现php中的三元有这样的提示

Note: 注意三元运算符是个语句,因此其求值不是变量,而是语句的结果。如果想通过引用返回一个变量这点就很重要。在一个通过引用返回的函数中语句 return $var == 42 ? $a : $b; 将不起作用,以后的 PHP 版本会为此发出一条警告。

但是经过试验,发现在javascript 中上面的做法是可以起作用的,大概是js 比较BT,严谨度没有php那么大的原因。

今天谈一个小知识点,三元运算符。三元运算,顾名思义会有三个要素,表达式的大致组成为condition ? expr1 : expr2;一个语句加两个表达式。问号之前为判断语句。如果为真,则执行第一个表达式,如果为假,则执行第二个表达式。我的理解其实就是简化的if else语句,举个栗子,经常看到的一个点击展开,再点击隐藏按钮。

我想实现点击输入法,实现下面ul的展开与隐藏,如果我们用if else的话可能会这么写:

  oBth.onclick=function(){        if (oUl.style.display=='block') {            oUl.style.display=='none';        }else{            oUl.style.display=='block';        }    }

但是如果我们用三元运算符的话可能就只需要下面这一行代码:

oBth.onclick=function(){
   oUl.style.display == "block" ? oUl.style.display="none" : oUl.style.display="block"}

有木有很神奇。当然我只是用了一个比较容易理解的写法,还有很大的优化空间,我们当然也可以这样:

oBth.onclick=function(){    var style = oUl.style.display;
   oUl.style.display= style == "block" ? "none":"block"  //这样写的话就一定不能忘了把运算结果重新赋值给元素 - -
  //oUl.style.display= (style == "block" ? "none":"block") 可读性更高
}

 

上面代码的意思是,如果style == "block" 成立的话就把none返回,不成立就返回block,然后把返回结果赋值给作用元素,不过要特别注意 = 和 == 用法和区别。因为赋值运算符(=)的优先级比较低,所以会最后执行赋值运算。如果把后面的三元运算符加上()可读性会更高一点,但效果是一样的。

比较容易出错的地方:

 三元运算比较容易出错的应该就是运算的优先级问题:

var isMember = false;
   console.log("当前费用" + isMember ? "$2.00" : "$10.00"); //返回$2.00

出错的原因是?的运算优先级比+低,所以实际运行的语句是:

"当前费用false" ? "$2.00" : "$10.00");

在js中字符串是为真的,所以会输出$2.00.

不过为了避免以上错误的话,可以记住:

不是false, 0, undefined, NaN, "" or null,js都认为是true;

所以具体是用三元运算符还是用if else见仁见智,视具体情况而定吧。

感谢阅读!


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post