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

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

先试了一下if else，代码如下:

uufHTML5中文学习网 - HTML5先行者学习网
if(n >= count-1){uufHTML5中文学习网 - HTML5先行者学习网
n =0;uufHTML5中文学习网 - HTML5先行者学习网
}else{uufHTML5中文学习网 - HTML5先行者学习网
n ++;uufHTML5中文学习网 - HTML5先行者学习网
}uufHTML5中文学习网 - HTML5先行者学习网

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

复制代码代码如下:

 uufHTML5中文学习网 - HTML5先行者学习网
n = n >= (count-1) ? n=0 : n++uufHTML5中文学习网 - HTML5先行者学习网

结果完全不同

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

做了如下测试：

复制代码代码如下:

var n=1;
if(n>1){
n=0;
}else{
n++;
}
console.log(n);

输出结果：2

三目运算如下：

复制代码代码如下:

uufHTML5中文学习网 - HTML5先行者学习网
var n=1;uufHTML5中文学习网 - HTML5先行者学习网
n = n>1?0 : n++;uufHTML5中文学习网 - HTML5先行者学习网
console.log(n);uufHTML5中文学习网 - HTML5先行者学习网
输出结果为：1uufHTML5中文学习网 - HTML5先行者学习网

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

那么对于++n呢

if else 语句

复制代码代码如下:

uufHTML5中文学习网 - HTML5先行者学习网
var n=1;uufHTML5中文学习网 - HTML5先行者学习网
 if(n>1){uufHTML5中文学习网 - HTML5先行者学习网
    n=0;uufHTML5中文学习网 - HTML5先行者学习网
}else{uufHTML5中文学习网 - HTML5先行者学习网
    ++n;uufHTML5中文学习网 - HTML5先行者学习网
}uufHTML5中文学习网 - HTML5先行者学习网
console.log(n);uufHTML5中文学习网 - HTML5先行者学习网
输出结果：2uufHTML5中文学习网 - HTML5先行者学习网

三目运算结果

复制代码代码如下:

uufHTML5中文学习网 - HTML5先行者学习网
var n=1;uufHTML5中文学习网 - HTML5先行者学习网
n = n>1?0 : ++n; uufHTML5中文学习网 - HTML5先行者学习网
console.log(n); 输出结果为：2uufHTML5中文学习网 - HTML5先行者学习网

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

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

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

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

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