文章の目录

  • 1、什么是条件运算符
  • 2、语法
  • 3、描述
  • 4、条件链
  • 写在最后

1、什么是条件运算符

条件(三元)运算符是 JavaScript 仅有的使用三个操作数的运算符。一个条件后面会跟一个问号(?),如果条件为 true ,则问号后面的表达式 A 将会执行;表达式 A 后面跟着一个冒号(:),如果条件为 false ,则冒号后面的表达式 B 将会执行。本运算符经常作为 if 语句的简捷形式来使用。

2、语法

condition ? exprIfTrue : exprIfFalse
  • condition:计算结果用作条件的表达式
  • exprIfTrue:如果表达式 condition 的计算结果是 truthy(它和 true 相等或者可以转换成 true ),那么表达式 exprIfTrue 将会被求值。
  • exprIfFalse:如果表达式 condition 的计算结果是 falsy(它可以转换成 false ),那么表达式 exprIfFalse 将会被执行。

3、描述

除了 false,可能的假值表达式还有:null 、NaN 、 0 、空字符串( “” )、和 undefined 。如果 condition 是以上中的任何一个,那么条件表达式的结果就是 exprIfFalse 表达式执行的结果。

一个简单的例子:

var age = 26;
var beverage = age >= 21 ? "Beer" : "Juice";
console.log(beverage); // "Beer"

一个常见的用法是处理可能为 null 的值:

function greeting(person) {var name = person ? person.name : "stranger";return "Howdy, " + name;
}console.log(greeting({ name: "Alice" })); // "Howdy, Alice"
console.log(greeting(null)); // "Howdy, stranger"

4、条件链

这个三元操作符是右结合的,也就是说你可以像这样把它链接起来, 和 if … else if … else if … else 链类似:

function example(…) {return condition1 ? value1: condition2 ? value2: condition3 ? value3: value4;
}// Equivalent to:function example(…) {if (condition1) { return value1; }else if (condition2) { return value2; }else if (condition3) { return value3; }else { return value4; }
}

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//,就在评论处留言,作者继续改进;o_O???
如果你觉得该文章有一点点用处,可以给作者点个赞;\\*^o^*//
如果你想要和作者一起进步,可以微信扫描二维码,关注前端老L~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※!!!

JavaScript系列之条件运算符相关推荐

  1. 深入理解JavaScript系列(33):设计模式之策略模式(转)

    介绍 策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化不会影响到使用算法的客户. 正文 在理解策略模式之前,我们先来一个例子,一般情况下,如果我们要做数据合法性验证,很 ...

  2. javascript系列之DOM(三)---事件

    javascript系列之DOM(三)---事件 原文:javascript系列之DOM(三)---事件 事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些 ...

  3. 深入理解JavaScript系列(4):立即调用的函数表达式

    前言 大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行. 在详细了解这个之前,我们来谈了解一下"自执行"这个叫法,本文对这个功能的叫 ...

  4. tom大叔blog--------深入理解javascript系列-----------笔记

    之前一直收藏着tom大叔的blog,只是自己懒了下下...每个blog都像一个秘籍,每次看都有收获,也许自己道行太浅吧..不过还是很高兴,记下..也为了督促自己坚持下去... 一.深入理解JavaSc ...

  5. 深入理解JavaScript系列(5):强大的原型和原型链

    前言 JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型. 虽然这经常被当作是 JavaScript 的缺点被提及,其实基于原型的继承模型比传统的类继承还要强大.实 ...

  6. 深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点

    才华横溢的Stoyan Stefanov,在他写的由O'Reilly初版的新书<JavaScript Patterns>(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会 ...

  7. 深入理解JavaScript系列(27):设计模式之建造者模式

    介绍 在软件系统中,有时候面临着"一个复杂对象"的创建工作,其通常由各个部分的子对象用一定的算法构成:由于需求的变化,这个复杂对象的各个部分经常面临着剧烈的变化,但是将它们组合在一 ...

  8. 深入理解JavaScript系列(33):设计模式之策略模式

    介绍 策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化不会影响到使用算法的客户. 正文 在理解策略模式之前,我们先来一个例子,一般情况下,如果我们要做数据合法性验证,很 ...

  9. 深入理解JavaScript系列(32):设计模式之观察者模式

    介绍 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们 ...

  10. 深入理解JavaScript系列:《你真懂JavaScript吗?》答案详解

    介绍 昨天发的<大叔手记(19):你真懂JavaScript吗?>里面的5个题目,有很多回答,发现强人还是很多的,很多人都全部答对了. 今天我们来对这5个题目详细分析一下,希望对大家有所帮 ...

最新文章

  1. keras系列︱迁移学习:利用InceptionV3进行fine-tuning及预测、完美案例(五)
  2. varnish---反向代理web加速缓存服务器和CDN的推送
  3. vue知识总结第一篇vue组件的定义以及父子组件的传值。
  4. Java多线程(三)之ConcurrentHashMap深入分析
  5. React开发(275):dva debugger对应的值
  6. Vue2.x中的父组件数据传递至子组件
  7. QCon旧金山演讲总结:阿里无线技术架构演进
  8. 为什么觉得今年工作特别难找?
  9. php html ubb,PHP写的UBB代码转换HTML代码
  10. linux中的文本处理方法集锦
  11. 从底层看android5.0系统的启动过程
  12. Latex各种命令、符号、公式、数学符号、排版等
  13. 猫咪APP 服务器不稳定,这下知道猫咪为啥经常情绪不稳定了不?
  14. container 和initContainers使用
  15. 2022年PC推荐-组装机及品牌机 2022年8月16日(持续更新)
  16. 语义分割|学习记录(4)膨胀卷积(空洞卷积 )
  17. 使用SpringBoot一小时快速搭建一个简单后台管理(后端篇)
  18. python hdf5_安装HDF5 1.8 和H5PY--HDF5和python接口
  19. 【Redis】五种数据类型
  20. 谈谈卷积神经网络和循环神经网络

热门文章

  1. 机组组合问题常用术语
  2. 信息流广告如何操作?(含CPC、OCPC、CPM、eCPM、CTR等)
  3. js去掉url中的域名的方法
  4. Map获取key值和value值
  5. REST Assured 4 - 第一个GET Request
  6. 软件全屏使用时点击鼠标自动跳回桌面的问题
  7. CDD文件——CANdelaStudio
  8. 英文字母pc是什么意思,互联网的pc指的是什么
  9. 百度指数 自助采集 爬取 抓取 导出 提取 下载 查询
  10. 尖角科技:个人隐私安全检测系统上线了! !