频道导航

JS中三目运算符和if else的区别分析与示例

2018-12-31 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了JS中三目运算符和if else的区别分析与示例，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

今天写了一个图片轮播的小demo，用到了判断

先试了一下if else

，代码如下:

<div class="codetitle"><a style="CURSOR: pointer" data="36214" class="copybut" id="copybut36214" onclick="doCopy('code36214')"> 代码如下:

<div class="codebody" id="code36214">
if(n >= count-1){
n =0;
}else{
n ++;
}

随后代码写完了，准备优化一下代码，将此段改成了三目运算符的写法

<div class="codetitle"><a style="CURSOR: pointer" data="27928" class="copybut" id="copybut27928" onclick="doCopy('code27928')"> 代码如下:

<div class="codebody" id="code27928">
n = n >= (count-1) ? n=0 : n++

结果完全不同

随后研究了一下这两者的区别，总结为一句话：三目运算有返回值，if else没有返回值

做了如下测试：

<div class="codetitle"><a style="CURSOR: pointer" data="5902" class="copybut" id="copybut5902" onclick="doCopy('code5902')"> 代码如下:

<div class="codebody" id="code5902">
var n=1;
if(n>1){
n=0;
}else{
n++;
}
console.log(n);

输出结果：2

三目运算

如下：

<div class="codetitle"><a style="CURSOR: pointer" data="45423" class="copybut" id="copybut45423" onclick="doCopy('code45423')"> 代码如下:

<div class="codebody" id="code45423">
var n=1;
n = n>1?0 : n++;
console.log(n);
输出结果为：1

插入一段其他内容：++n和n++的区别：简单地说,都是 n 自加1。区别是,n++是执行完后面的语句才加1;而++n 就先做 n+1才执行后面的语句

那么对于++n呢

if else 语句

代码如下:

1){ n=0; }else{ ++n; } console.log(n); 输出结果：2

三目运算结果

代码如下:

1?0 : ++n; console.log(n); 输出结果为：2

可以看出if else和三目运算的区别了吧～～～

n++和++n在此验证中，没有任何区别，因为if else都是计算结果之后的，不会返回n，没有任何返回值

但是对于三目运算，n++返回的n值为n本身，++n返回的n值为n+1之后的结果

读了本文，小伙伴们是不是对js中的三目运算符和if else有了新的认识呢。

原文链接：https://www.f2er.com/js/57260.html

else if 三目运算符

上一篇：JS在可编辑的div中的光标位置插入内下一篇：JS常用函数使用指南

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获

事件冒泡和事件捕获起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...

作者：前端之家时间：2021-02-22

搞懂js中小数运算精度问题原因及解决办法

js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...

作者：前端之家时间：2021-02-22

搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

什么是跨域跨域：广义的跨域包含一下内容： 1.资源跳转（链接跳转，重定向跳转，表单提...

作者：前端之家时间：2021-02-22

前端对base64编码的理解，原生js实现字符base64编码

@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...

作者：前端之家时间：2021-02-22

搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式

搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ：的缩写，说都能直接说出来：模型，：视图...

作者：前端之家时间：2021-02-22

js判断浏览器是否支持webGL

起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。在各种浏览器上运行...

作者：前端之家时间：2021-02-14

js判断undefined和null

js判断undefined js判断null js判断null和undefined

作者：前端之家时间：2021-02-14

将文字自动转为banner打印形式的工具

http://patorjk.com/software/taag/

作者：前端之家时间：2021-02-14

聊一聊 bootstrap 的轮播图插件

今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...

作者：前端之家时间：2021-02-14

js实现图片无缝循环跑马灯

html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...

作者：前端之家时间：2021-02-14

最新文章