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

JavaScript 2018-12-31

今天写了一个图片轮播的小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有了新的认识呢。

elseif三目运算符

相关文章

自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗
前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为l...
nice-validator表单验证插件的简单使用
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现
前言 图片上传是web项目常见的需求，我基于之前的博客的代码...
踹掉后端，前端导出Excel！
前言 导出Excel文件这个功能，通常都是在后端实现返回前端一...
Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量
前言 众所周知，js是单线程的，从上往下，从左往右依次执行，...
select标签 禁止选择但又能通过序列化form表单传值到后台
前言 项目开发中，我们可能会碰到这样的需求：select标签，禁...