js三元表达式(三元运算符)

简介: js三元表达式(三元运算符)

前言

众所周知,三元表达式在代码量上比if…else语句更简洁一些。但是博主在可读性上更加偏向于if…else语句。三元表达式不仅在js中使用,在很多后台程序语言,比如java、php中都有使用,不过在js中对于三元表达式的要求貌似要松很多。废话不多说。下面一起看看三元表达式。

三元表达式

素质N连问

首先 为什么叫三元表达式?

顾名思义,有三个元素组成的表达式。

哪三个元素呢?

“条件”“真结果”“假结果”。

三元表达式的基本格式是什么呢?

条件?真结果:假结果

三元表达式是如何对应if…else语句的?

条件 ? 真结果 : 假结果

if(条件){真结果}else{假结果}

我们来看一下官方的解释。W3C把“三元表达式”叫做"ECMAScript 条件运算符"

诶!中间为什么空了一块呢?

我给它补上:

boolean_expression ? true_value : false_value

这行代码的意思官方也给了具体的说明,这里不再赘述。

三元表达式结果执行多行代码表达:

大家也看到了,在官方的w3c文档中,给的只有一条结果执行语句,但是博主之前说过,至少在js中,三元表达式和if…else语句是可以相互替换的。

那么既然if…else语句都可以在结果执行时写多行代码,三元表达式为什么不行呢?

其实是可以的。

<script>
    var a='';
    var b='';
    var age=prompt("Input your age:");
    age>18 ? (a='成年人',b='18岁以上') : (a='未成年人',b='18岁以下');
    alert(a);
    alert(b);
    </script>

这下看明白了吗?只要在结果中多条语句之间加上“,”就可以了。

三元表达式在for循环中的运用

<script>
    var a='';
    var b='';
    for(var i=0;i<4;i++){
      i>2 ? (a='成年人',b='18岁以上') : (a='未成年人',b='18岁以下');
      alert(a);
      alert(b);
    }
    </script>

以上代码打印一次 ‘成年人’,‘18岁以上’ 三次‘ 未成年人’,‘18岁以下’。

三元表达式的嵌套

if…else语句可以嵌套多层,那想必三元表达式也可以进行嵌套吧!没错,三元表达式可以进行嵌套,而且理论上可以无限嵌套下去。为什么说理论上?因为暂时没有见过有人嵌套过多行三元表达式。首先不利于代码的阅读,其次对于逻辑能力不强的人来说,确实是一种脑力的摧残!大家自行感受一下。

<script>
    var a='';
    var b='';
    var age=prompt("Input your age:");
      age<18 ?  (a='儿童',b='18岁以下'):( age>50 && age<80 ? (a='老年人',b='50岁以上') : (age>=80 ? (a='长寿者',b='80岁以上'):(a='你的年龄是以下两种',b='18、50')));
      alert(a);
      alert(b);
    </script>

其实这块代码看起来感觉还不是很明显,但是博主在调试过程中已经有点晕了,特别是在最后三个括号那里,纠结了!

所以归纳一下三元表达式的嵌套:

条件1 ? 真结果1:( 条件1.1 真结果1.1 : (条件1.1.1 ? 真结果1.1.1:假结果1.1.1))

简便的写法可以不用括号

是不是眼睛都看花了?

三元表达式的局限性

最后,大家注意,三元表达式在使用过程中不能使用break,continue等语句。否则…

相关文章
|
4天前
|
JavaScript 前端开发 开发者
混淆赋值运算符(=)和相等比较运算符(==, ===)(js的问题)
混淆赋值运算符(=)和相等比较运算符(==, ===)(js的问题)
10 0
|
4天前
|
JavaScript 前端开发
JavaScript中的短路表达式
JavaScript中的短路表达式
14 0
|
4天前
|
JavaScript 前端开发 Java
JavaScript基础语法(运算符)
JavaScript基础语法(运算符)
33 0
|
4天前
|
存储 JavaScript 前端开发
【JavaScript技术专栏】JavaScript基础入门:变量、数据类型与运算符
【4月更文挑战第30天】本文介绍了JavaScript的基础知识,包括变量(var、let、const)、数据类型(Number、String、Boolean、Undefined、Null及Object、Array)和运算符(算术、赋值、比较、逻辑)。通过实例展示了如何声明变量、操作数据类型以及使用运算符执行数学和逻辑运算。了解这些基础知识对初学者至关重要,是进阶学习JavaScript的关键。
|
4天前
|
JavaScript 前端开发
JavaScript中的短路表达式
JavaScript中的短路表达式
11 1
|
4天前
|
JavaScript 前端开发
JS中运算符的算术、赋值、+、比较(不同类型之间比较)、逻辑
JS中运算符的算术、赋值、+、比较(不同类型之间比较)、逻辑
10 1
|
4天前
|
JavaScript
js的一些运算符规则
js的一些运算符规则
13 1
|
4天前
|
JavaScript
js的比较运算符
js的比较运算符
15 1
|
4天前
|
JavaScript 前端开发
js的运算符
js的运算符
15 2
|
4天前
|
JavaScript 前端开发 数据安全/隐私保护
【专栏】JavaScript中的`==`和`===`运算符有重要区别,本文将从三个部分详细探讨
【4月更文挑战第29天】JavaScript中的`==`和`===`运算符有重要区别。`==`进行类型转换后比较,而`===`不转换类型,要求完全相等。在比较对象时,`==`只比较引用,`===`比较内容。推荐使用`===`以确保准确性,但在需要类型转换时可谨慎使用`==`。注意特殊值如`null`和`undefined`的比较。在数据验证、类型判断和条件判断等场景中,应根据需求选择合适的运算符。理解两者差异能提升代码质量和稳定性。