JavaScript三元表达式示例详解

 更新时间:2024年02月02日 08:56:07   作者:想你的风吹到了瑞士  
这篇文章主要给大家介绍了关于JavaScript三元表达式的相关资料,三元运算符是JavaScript仅有的使用三个操作数的运算符,文中通过代码介绍的非常详细,需要的朋友可以参考下

一、判断三个条件

三元表达式是JS中最为常用的快捷判断语句之一。其语法形式为:

条件 ? 结果1 : 结果2

当判断条件成立时,返回结果1,否则返回结果2。这是JS中最为基本的三元表达式形式。

在实际应用中,三元表达式可用于快速判断三个条件,如下所示示例代码:

let score = 85;
let result = score >= 90 ? '优秀' : score >=80 ? '良好' : '不及格';
console.log(result);

以上代码的意思是:当成绩大于90分时,返回字符串'优秀';当成绩大于等于80分时,返回字符串'良好';否则返回字符串'不及格'。运行以上代码,输出结果为'良好'。

通过以上代码,我们可以看到三元表达式的嵌套应用,其思想类似于if-else语句的嵌套判断。同时,三元表达式也能够完成复杂的条件判断。

二、js三元表达式嵌套

除了简单的三元表达式嵌套,JS中也可以通过多层嵌套完成更为复杂的判断。以下是其示例代码:

let fruit = 'apple';
let price = fruit === 'apple' ? (size === 'big' ? 10 : 8) : 5;
console.log(price);

以上代码的意思是:当水果类型为苹果时,如果尺寸为big,返回10元,否则返回8元;如果水果类型为非苹果,则返回5元。运行以上代码,输出结果为8。

通过以上代码,我们可以看到在三元表达式使用中,嵌套层数并没有硬性限制,可以根据实际需求完成多层嵌套。

三、js三元表达式判断一个

除了判断三个条件,三元表达式还可以完成对单个条件的判断。以下是其示例代码:

let age = 18;
let isAdult = age >= 18 ? true : false;
console.log(isAdult);

以上代码的意思是:当年龄大于等于18岁时,返回true,否则返回false。运行以上代码,输出结果为true。

这是三元表达式在实际应用中最为常用的形式之一,例如在表单提交中对数据的判断。

四、三元表达式的语法

三元表达式的语法形式十分简单,其一般形式为:

条件 ? 结果1 : 结果2

其中“条件”可以是任意的JS表达式,“结果1”和“结果2”也是任意JS表达式,可以是字符串、数字、函数等任意类型的值。

需要注意的是,三元表达式中的“?”和“:”都是必不可少的,缺一不可。同时,在三元表达式的书写时应该尽量保证代码的可读性,不要过分嵌套,减少出错的可能。

五、js三元运算符

JS中一共有三种运算符:一元运算符、二元运算符和三元运算符。三元运算符是三种运算符中最为特殊的一种,其语法和功能都有其独特性。

三元表达式的运算结果根据“?”和“:”的位置而定。当“?”和“:”符号两边的表达式计算结果为真时,返回“?”后的表达式计算结果;否则返回“:”后的表达式计算结果。以下是一个简单的示例:

let var1 = true ? 'yes' : 'no';
console.log(var1);

以上代码的意思是:如果判断结果为真,则返回字符串'yes';否则返回字符串'no'。运行以上代码,输出结果为'yes'。

六、js三元运算符表达式

对于三元运算符表达式,其结果同样可以赋值给一个变量或使用在一个JS表达式中。以下是一个示例:

let age = 18;
age >= 18 ? console.log('成年人') : console.log('未成年人');

以上代码的意思是:如果年龄大于等于18岁,则输出字符串'成年人';否则输出字符串'未成年人'。

需要注意的是,以上代码中使用了console.log()函数输出结果,这是一种常见的JS输出方式。同时三元表达式也可以作为条件语句或循环语句的判断条件。

七、js三元表达式简写

在实际使用中,可以通过三元表达式完成更为简洁的代码书写。例如:

let age = 18;
let message = age >= 18 ? '成年人' : '未成年人';

以上代码的意思是:如果年龄大于等于18岁,则将字符串'成年人'赋值给变量message;否则将字符串'未成年人'赋值给变量message。这种写法极大地简化了代码,提高了代码的可读性。

需要注意的是,简写形式只适用于简单的三元表达式,在复杂的三元表达式嵌套中不宜过度使用。

八、js三元表达式怎么写

当我们需要使用三元表达式时,需要先确定条件判断,然后按照语法形式书写代码。

以下是一个简单的示例:

let score = 85;
let result = score >= 90 ? '优秀' : '不优秀';
console.log(result);

以上代码的意思是:如果成绩大于等于90分,则返回字符串'优秀';否则返回字符串'不优秀'。

在实际应用中,我们可以结合变量、运算符等进行复杂的条件判断,完成更加灵活的代码书写。

九、js三元表达式进阶写法

在JS中,三元表达式还可以用于返回函数调用结果。例如:

function foo(flag) {
    return flag ? () => console.log('flag is true.') : () => console.log('flag is false.');
}
let f = foo(true);
f(); // flag is true.

以上代码的意思是:当flag的值为true时,返回一个匿名函数,并输出字符串'flag is true.';否则返回另一个匿名函数,并输出字符串'flag is false.'。

通过以上示例,我们可以看到在JS中,三元表达式具有非常高的灵活性和可扩展性,可以用于各种场合,有效地提高代码的可读性和开发效率。

$a=$b>$c ? ($c-$b) ? 1 :($b-$c) : ($b+$c) ? 0 : $b*$c;   //$a=0

转化成if(){}   else{}格式
		if($b>$c){
            if($c-$b){
                $a=1;
            }else{
                $a=$b-$c;
            }
        }else{
            $a=$b+$c;
            if($a){
                $a=0;
            }else{
                $a=$b*$c;
            }
        }

补充知识:三元运算符可以代替简单的 if 语句,但尽量不要嵌套使用,这样会降低代码的可读性

总结 

到此这篇关于JavaScript三元表达式的文章就介绍到这了,更多相关js三元表达式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序向Java后台传输参数的方法实现

    微信小程序向Java后台传输参数的方法实现

    这篇文章主要介绍了微信小程序向Java后台传输参数的方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • js写的评论分页(还不错)

    js写的评论分页(还不错)

    js写的分页在网上可以搜到很多的文章,在也为大家介绍一个,喜欢的的朋友可以参考下
    2013-12-12
  • 学习使用Bootstrap栅格系统

    学习使用Bootstrap栅格系统

    这篇文章主要教大家学习使用Bootstrap栅格系统,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Python执行js字符串常见方法示例

    Python执行js字符串常见方法示例

    这篇文章主要为大家介绍了Python执行js字符串常见方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步早日升职加薪
    2022-04-04
  • 前端百度地图添加点并跳转到百度地图进行导航完整代码

    前端百度地图添加点并跳转到百度地图进行导航完整代码

    web开发过程中经常碰到需要调用百度地图来视线定位导航的过程,许多技术博客上介绍的都是调用百度地图的api,这篇文章主要给大家介绍了关于前端百度地图添加点并跳转到百度地图进行导航的相关资料,需要的朋友可以参考下
    2024-07-07
  • javascript 用函数语句和表达式定义函数的区别详解

    javascript 用函数语句和表达式定义函数的区别详解

    本篇文章主要介绍了javascript 用函数语句和表达式定义函数的区别。需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • webpack.DefinePlugin与cross-env区别详解

    webpack.DefinePlugin与cross-env区别详解

    这篇文章主要介绍了webpack.DefinePlugin与cross-env区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • JS浅拷贝深拷贝原理以及常用方法大全

    JS浅拷贝深拷贝原理以及常用方法大全

    在JavaScript中,深拷贝和浅拷贝是两种常见的对象复制方式,它们的主要区别在于复制的深度和对原始对象数据的引用关系,这篇文章主要介绍了JS浅拷贝深拷贝原理以及常用方法的相关资料,需要的朋友可以参考下
    2026-03-03
  • JavaScript实现清空(重置)文件类型INPUT元素值的方法

    JavaScript实现清空(重置)文件类型INPUT元素值的方法

    这篇文章主要介绍了JavaScript实现清空(重置)文件类型INPUT元素值的方法,结合实例形式分析了javascript清空input文本框的常用方法与实现技巧,需要的朋友可以参考下
    2016-11-11
  • 浅谈bootstrap源码分析之tab(选项卡)

    浅谈bootstrap源码分析之tab(选项卡)

    下面小编就为大家带来一篇浅谈bootstrap源码分析之tab(选项卡)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06

最新评论