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 相关文章推荐
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
Javascript Function对象扩展之延时执行函数
Jul 06 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
js实现文本框中焦点在最后位置
Mar 04 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
bootstrap table表格插件使用详解
May 08 Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 Javascript
Vue底层实现原理总结
Feb 17 Javascript
微信小程序点击滚动到指定位置的实现
May 22 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
PHP中的正规表达式(一)
2006/10/09 PHP
PHP常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
简介JavaScript中setUTCSeconds()方法的使用
2015/06/12 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
wxPython 入门教程
2008/10/07 Python
python数据结构之二叉树的建立实例
2014/04/29 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
python把转列表为集合的方法
2019/06/28 Python
pandas 层次化索引的实现方法
2019/07/06 Python
python numpy存取文件的方式
2020/04/01 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
实习自我鉴定模板
2013/09/28 职场文书
物业管理专业个人的自我评价
2013/11/19 职场文书
学校重阳节活动总结
2015/03/24 职场文书
自信主题班会
2015/08/14 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server