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


Posted in Javascript onApril 16, 2015

发现代码慢慢写多了的时候会不自觉的将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那么大的原因。

Javascript 相关文章推荐
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
js中class的点击事件没有效果的解决方法
Oct 13 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
Angular 4.0学习教程之架构详解
Sep 12 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
webpack打包多页面的方法
Nov 30 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
AngularJS实现多级下拉框
Mar 25 Javascript
使用refresh_token实现无感刷新页面
Apr 26 Javascript
javascript中call apply 的应用场景
Apr 16 #Javascript
javascript三元运算符用法实例
Apr 16 #Javascript
jQuery on()方法使用技巧详解
Apr 16 #Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 #Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 #Javascript
JavaScript实现彩虹文字效果的方法
Apr 16 #Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 #Javascript
You might like
APMServ使用说明
2006/10/23 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
PHP的异常处理类Exception的使用及说明
2012/06/13 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
Yii2框架操作数据库的方法分析【以mysql为例】
2019/05/27 PHP
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
js获取class的所有元素
2013/03/28 Javascript
JavaScript中的undefined学习总结
2013/11/30 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python计数排序和基数排序算法实例
2014/04/25 Python
python网络编程之读取网站根目录实例
2014/09/30 Python
python 计算文件的md5值实例
2017/01/13 Python
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
2020/03/08 Python
波兰珠宝品牌:YES
2019/08/09 全球购物
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
全国道德模范事迹
2014/02/01 职场文书
毕业证丢失证明范本
2014/09/20 职场文书