判断

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

转载于:https://www.cnblogs.com/Tohold/p/8615766.html

js中的三目运算符详解相关推荐

  1. JS 中的三目运算符详解

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

  2. computed用发_Vue.js中computed使用详解

    这次给大家带来Vue.js中computed使用详解,Vue.js中computed使用的注意事项有哪些,下面就是实战案例,一起来看一下. JS属性: JavaScript有一个特性是Object.d ...

  3. Js中apply方法详解说明

    Js apply 方法 详解 我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了, ...

  4. JS中this关键字详解

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

  5. JS中函数式编程详解版(FunctionalProgramming,FP)

    函数式编程详解 函数式编程的认识 函数式编程前置知识 函数是一等公民(First-class Function) 高阶函数 闭包 函数式编程基础 纯函数 lodash 模块 柯里化 函数组合 函子 函 ...

  6. JS中的showModelDialog详解和实例

    1.<a href="#" οnclick="SeePic('${list.PATH}')"><font color="blue&q ...

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

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

  8. Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】

    Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目   录 4.事件绑定 4.1.事件绑定(点击.双击.鼠标移动) 点击按钮-最简单的事件绑定(无参函数) 格式 点击按钮 ...

  9. 【JS中scrollHeight/Width详解(不加定位的情况下)】

    scrollHeight和scrollWidth的详解 一. 内容块Y轴上没有超出的情况下 二.内容块Y轴上有超出的情况下 2.1 当 overflow-y: visible的情况 2.2 设置ove ...

最新文章

  1. [转]阿拉伯数字转一二三和壹贰叁
  2. python去掉数字最后的零_python – 如何消除额外的负号,将数字四舍五入为零时,以numpy为单位?...
  3. 从网上批量下载图片并重命名
  4. 汇编语言 【大练习】寻址方式在结构化访数据访问中的应用
  5. 认识VLAN,并学会VLAN的划分和网络配置实例
  6. 【Elasticsearch】Elasticsearch ICU现在可以理解表情符号了!
  7. 日志记录到字段变更_Wal日志解析工具开源: Walminer
  8. 190405每日一句
  9. JavaScript成都市地图网页代码
  10. 如何在Keil中的添加和使用STC芯片型号
  11. 4G基站软件产品测试,4G TD-LTE测试解决方案全方位解读 - 全文
  12. 2020如何一键群发小程序给5000好友或群
  13. iphone转android教程,王者荣耀ios转安卓教程攻略
  14. 基于OPENCV的动态图片阵列显示程序
  15. 新手搭建网站后视频资源在网站上是如何存储的?
  16. 深度学习入门之神经网络的学习
  17. asp.net core ABP模板本地化设置
  18. 东欧黑客入侵港股造市图利 半年涉款5300万
  19. 从移动互联网时代到物联网时代 梆梆安全追寻“本质安全”
  20. MyEclipse 快捷键大全(@Hcy)

热门文章

  1. fbx 转 gltf glb 文件
  2. js 动态 添加 tabel 表格
  3. Linux 常用小技巧
  4. ASP .NET Core Web Razor Pages系列教程三:自动生成Razor Pages (CRUD)
  5. ubuntu16.04: mininet下使用ryu当做控制器
  6. 职称计算机与二级计算机合并,职称计算机考试:excel按数据位置合并
  7. mysql数据库语句q_mysql数据库命令大全,mysql基本命令大全
  8. non-member function cannot have cv-qualifier
  9. 复合的赋值运算符例题_Java千问:关于Java语言复合赋值运算符的两个问题,快来瞧瞧!...
  10. java 虚拟机指令集_jvm规范-jvm虚拟指令集及编译