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那么大的原因。

(0)

相关推荐

  • JS三目运算(三元运算)方法详解

    1.什么是三目运算:(布尔表达式 ? 值0:值1;) 5>3?alert('5大'):alert('3大'); 即    if(5>3){alert('5大')}else{alert('3大')}; 注意:三目运算和if(){}else{}的 区别是三目运算有返回值 例如: var max = a>b?a:b; 2.多条件的三目运算怎么写: 实例:根据学生成绩判定ABCD四个等级 var result = (sc<0 || sc>100) ?("分数无效"

  • 全面了解javascript三元运算符

    三元运算符: 如名字表示的三元运算符需要三个操作数. 语法是 条件 ? 结果1 : 结果2;. 这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2.满足条件时结果1否则结果2. <script type="text/javascript"> var b=5; (b == 5) ? a="true" : a="false"; document.write(" -----------------------

  • javascript三元运算符用法实例

    三元运算符用法实例: 如名字表示的三元运算符需要三个操作数. 语法是 条件 ? 结果1 : 结果2;. 这里你把条件写在问号(?)的前面后面跟着用冒号(:)分隔的结果1和结果2.满足条件时结果1否则结果2. 复制代码 代码如下: <script type="text/javascript"> var b=5; (b == 5) ? a="true" : a="false"; document.write(" --------

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

    发现代码慢慢写多了的时候会不自觉的将if else 用 三元来替代,仅仅是未了让代码更简洁精辟,当然也有人说用三元可以让你有高潮的感觉.最近在写js 的时候也有这样的感觉,并且收集了一些小技巧,分享分享. 大鸟请跳过下面这段,大大鸟帮忙指正 ^__^ ====普及线==== 表达式 (expr1) ? (expr2) : (expr3) 在 expr1 求值为 TRUE 时的值为 expr2,在 expr1 求值为 FALSE 时的值为 expr3. ============ 普通用法 当你发现

  • 总结javascript三元运算符知识点

    说起js,对很多初学者来说可能还是比较费力的,本人也是觉得js功底还是不够扎实,所以把有些东西在学习一遍,顺便分享出来希望可以帮到有需要的人 "三元运算符" 什么是三元运算符 条件?条件成立执行:条件不成立执行: 相当于简单的if()else()语句 举个栗子: var num=10: if(num>5 && num<=10){ num++; }else{ num--; } 三元运算符写法 num>5 && num<=10 ? n

  • Javascript实现运算符重载详解

    最近要做数据处理,自定义了一些数据结构,比如Mat,Vector,Point之类的,对于加减乘除之类的四则运算还要重复定义,代码显得不是很直观,javascript没有运算符重载这个像C++.C#之类的功能的确令人不爽,于是想"曲线救国",自动将翻译代码实现运算符重载,实现思路其实很简单,就是编写一个解释器,将代码编译.例如: S = A + B (B - C.fun())/2 + D 翻译成 `S = replace(replace(A, '+', replace(replace(B

  • Python语言技巧之三元运算符使用介绍

    python不支持C/C++中的三元操作符 ?:,替代的方法是 ...if... else...举例,用下面的语法实现求三个数的最小值.nD1 if nD1 < ( nD2 if nD2<nD3 else nD3) else (nD2 if nD2 < nD3 else nD3) python三元运算符的正确方法 因为下周要用php写项目,所以周末在家里重新看php的语法,看到三元描述符,突然想起来python是没有三元描述符的,印象中依稀记得有模拟的实现,于是上网上搜了一下. (对应C

  • JavaScript 扩展运算符用法实例小结【基于ES6】

    本文实例讲述了JavaScript 扩展运算符用法.分享给大家供大家参考,具体如下: 扩展运算符格式 扩展运算符格式很简单,就是三个点(-) 重点:需要ES6 语法支持 扩展运算符作用??? 扩展运算符允许一个表达式在期望多个参数(用于函数调用)或多个元素(用于数组字面量)或多个变量(用于解构赋值)的位置扩展. 1.将一个数组放入另一个数组中 下面开始通过四个例子来深刻理解扩展运算符 ①. 创建一个数组middle ②. 创建第二个包含middle的数组 ③. 输出结果 var middle =

  • golang中为什么不存在三元运算符详解

    三元运算符广泛存在于其他语言中,比如: python: val = trueValue if expr else falseValue javascript: const val = expr ? trueValue : falseValue c.c++: const char *val = expr ? "trueValue" : "falseValue"; 然而,被广泛支持的三目运算符在golang中却是不存在的!如果我们写出类似下面的代码: val := ex

  • Javascript基础:运算符与流程控制详解

    目录 1. 运算符(操作符) 1.1 算数运算符 1.2 递增和递减运算符 1.3 比较运算符 1.4 逻辑运算符 1.5 赋值运算符 1.6 运算符优先级 2. 流程控制 2.1 if 的语法结构 2.2 if else双分支语句 2.3 if else if语句(多选1) 2.4 三元表达式 2.5 switch分支流程控制 总结 1. 运算符(操作符) 「运算符」是用于实现赋值.比较和执行算数运算等功能的符号.常用运算符分类如下 算数运算符 递增和递减运算符 比较运算符 逻辑运算符 赋值运

  • JavaScript 12个有用的数组技巧

    目录 数组去重 1.from()叠加new Set()方法 2.spread操作符(-) 替换数组中的特定值 没有map()的映射数组 空数组 将数组转换为对象 用数据填充数组 合并数组 两个数组的交集 删除数组中的假值 获取数组中的随机值 lastIndexOf()方法 将数组中的所有值相加 数组是Javascript最常见的概念之一,它为我们提供了处理数据的许多可能性,熟悉数组的一些常用操作是很有必要的. 数组去重 1.from()叠加new Set()方法 字符串或数值型数组的去重可以直接

随机推荐