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 相关文章推荐
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
Javascript执行效率全面总结
Nov 04 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 Javascript
node.js实现快速截图
Aug 27 Javascript
JSON 必知必会 观后记
Oct 27 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
vue实现学生信息管理系统
May 30 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
网站当前的在线人数
2006/10/09 PHP
PHP新手上路(四)
2006/10/09 PHP
使用eAccelerator加密PHP程序
2008/10/03 PHP
php函数实现判断是否移动端访问
2015/03/03 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
JS执行删除前的判断代码
2014/02/18 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
元素全屏的设置与监听实例
2017/11/28 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
python网络编程学习笔记(四):域名系统
2014/06/09 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
澳大利亚百货公司:David Jones
2018/02/08 全球购物
大课间体育活动方案
2014/03/12 职场文书
《春笋》教学反思
2014/04/15 职场文书
难忘的一天教学反思
2014/04/30 职场文书
专家推荐信模板
2014/05/09 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
2014年纪委工作总结
2014/12/05 职场文书
水电施工员岗位职责
2015/04/11 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
签约仪式致辞
2015/07/30 职场文书
员工旷工检讨书
2015/08/15 职场文书
教师理论学习心得体会
2016/01/21 职场文书
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android