判断

javascript中的三目运算符用作判断时,基本语法为: expression ? sentence1 : sentence2 
当expression的值为真时执行sentence1,否则执行 sentence2, 请看代码

   var b = 1,
c = 1
a = 2;
a >= 2 ? b++ : b--;
b // 2
a < 2 ? c++ : c--;
c // 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

从上面代码中,我们暂时会认为三目运算符相当于if + else(下面再详聊)

   if(expression){
sentence1;
} else {
sentence2;
}
  • 1
  • 2
  • 3
  • 4
  • 5

当expression为真,即expression不为undefined,NaN,0,null的时候执行sentence1,否则执行sentence2。 
既然这样的功能和if相同,为什么还要使用它?首先,在逻辑多次判断的时候,三目运算符逻辑更简洁:

   expression1 ? sentence1 :
expression2 ? sentence2 :
expression3 ? sentence3 :
...
  • 1
  • 2
  • 3
  • 4

只要任意一个expressionN的判断为真,那么sentenceN立即执行,这个判断结束,后面的任何判断不再执行。而如果我们写成if-else

   if(expression1){
sentence1;
} else if(expression2){
sentence2;
} else if(expression3){
sentence3;
} ...
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

这样书写逻辑看起来比较心累,所以在jquery和zepto源码中,我们会大量看到三目运算符的应用。

赋值

另一个经典的应用场景在于赋值,var param = expression ? value1 : value2,这个相信大家经常用到

   var b,
c = 1;
var a = b ? 2 : 1;
a // 1
var a = c > 0 ? 2 : 1
a // 2
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

再谈判断

有一天写了这样的代码

  function xx(){
var a = 1,
b = 3;
a < b ? return false : ''
}
  • 1
  • 2
  • 3
  • 4
  • 5

居然报错了! 为什么报错,我们会仔细看一下上面的多个判断

   expression1 ? sentence1 :
expression2 ? sentence2 :
expression3 ? sentence3 :
...
  • 1
  • 2
  • 3
  • 4

只要有一个expressionN成立,就马上跳出。原因是什么呢? 我们可以猜想是因为三目运算符return了sentenceN,所以判断立即跳出。赋值的用法也一样,之所以报错的原因是

   if(expression){
return (return 2);
}
  • 1
  • 2
  • 3

这样的写法肯定报错了。那么如果我们对上面的解释有疑问,我们可以用这样的代码来证明:

   var a = 1,
b = 2;
var c = b > 1 ? a++ : 0;
c // 1
  • 1
  • 2
  • 3
  • 4

c为什么是1,因为n++是在执行完表达式后再加1,如果return a++,先return 再加1,所以这里的c等于1

js中的三目运算符详解的更多相关文章

  1. JS中this关键字详解

    本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 阅读此文章,还需要心平气和的阅读完,相信一定会有所收获,我也会不定期的发布,分享一些文章,共同学习 首先,必须搞清楚在JS里面,函数 ...

  2. JS 中 this 关键字详解

    本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 首先,必须搞清楚在JS里面,函数的几种调用方式: 普通函数调用 作为方法来调用 作为构造函数来调用 使用apply/call方法来调 ...

  3. Bom和Dom编程以及js中prototype的详解

    一.Bom编程: 1.事件练习: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  4. JavaScript面向对象(一)——JS OOP基础与JS 中This指向详解

      前  言 JRedu 学过程序语言的都知道,我们的程序语言进化是从"面向机器".到"面向过程".再到"面向对象"一步步的发展而来.类似于 ...

  5. JS中navigator对象详解

    <code class="language-html"><!doctype html> <html> <head> <meta ...

  6. js中Date()对象详解

    var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-???? ...

  7. js中的逻辑运算符详解(||、&&、!)

    视频地址:https://www.bilibili.com/video/BV1Y7411K7zz?p=1 一直以来都没弄清楚js中的逻辑运算符是怎么回事 , 一直都以为他们的用法和java一样 , 今 ...

  8. Java中的三目运算符 详解

    对于有些选择分支结构,可以使用简单的条件运算符来代替. 如: if(a<b)    min=a;else    min=b; 可以用下面的条件运算符来处理 min=(a<b)?a:b; 其 ...

  9. js中window对象详解以及页面跳转

    1.window.top.window.location = "index.asp"; 2.window.top.location.href="index.asp&quo ...

随机推荐

  1. 富文本编辑器粘贴word

    很多时候我们用一些管理系统的时候,发布新闻.公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来.减少排版复杂的工作量. 下面是借用百度doc 来快速实现这个w ...

  2. codevs 1166 矩阵取数游戏

    二次联通门 : codevs 1166 矩阵取数游戏 /* codevs 1166 矩阵取数游戏 SB区间dp dp[l][r] = max (dp[l + 1][r] + number[l], dp ...

  3. qtableview 表格风格设置

    1.窗体无边框? tableView->setFrameShape(QFrame::NoFrame); 2.表格内容无边框? tableView->setShowGrid(false); ...

  4. 使用scp上传ssh公钥到服务器

    $ scp ~/.ssh/id_rsa.pub root@xxx.xxx.xxx.xxx:.ssh/id_rsa.pub $ ssh root@xxx.xxx.xxx.xxx $ cat ~/.ssh ...

  5. 二十、网络ifconfig 、ip 、netstat、ss之二

    ip 网络层协议 ip地址 点分十进制分为4段,范围 0-255 ip分类 A 占据1段,最左侧一段第一位固定为0 0 000 0000 - 0 111 1111  0 - 127:其中0为网络,12 ...

  6. Chisel-LLDB命令插件,让调试更Easy

    http://blog.cnbluebox.com/blog/2015/03/05/chisel/ LLDB 是一个有着 REPL 的特性和 C++ ,Python 插件的开源调试器.LLDB 绑定在 ...

  7. JAVA基础知识|lambda与stream

    lambda与stream是java8中比较重要两个新特性,lambda表达式采用一种简洁的语法定义代码块,允许我们将行为传递到函数中.之前我们想将行为传递到函数中,仅有的选择是使用匿名内部类,现在我 ...

  8. xpath 轴定位表达方式

    xpath的使用基本语法: 1.// 从根节点开始,查找对象是全文. 2./ 从当前标签的路径开始查找 3.text()获取当前路径下的文本 4.@+类名或者id名 查找类名或者id的名字 5. .一 ...

  9. jQuery源码解读----part 2

    分离构造器 通过new操作符构建一个对象,一般经过四步: A.创建一个新对象 B.将构造函数的作用域赋给新对象(所以this就指向了这个新对象) C.执行构造函数中的代码 D.返回这个新对象 最后一点 ...

  10. LC 955. Delete Columns to Make Sorted II

    We are given an array A of N lowercase letter strings, all of the same length. Now, we may choose an ...