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

 更新时间:2014年11月21日 09:11:10   转载 投稿:hebedich  
本文是通过示例详细分析了JS中三目运算符和if else的区别,是篇非常不错的文章,这里推荐给大家。

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

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

复制代码 代码如下:

if(n >= count-1){
n =0;
}else{
n ++;
}

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

复制代码 代码如下:

n = n >= (count-1) ? n=0 : n++

结果完全不同

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

做了如下测试:
 

复制代码 代码如下:

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

输出结果:2


三目运算如下:
 

复制代码 代码如下:

var n=1;
n = n>1?0 : n++;
console.log(n);
输出结果为:1

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

那么对于++n呢

if else 语句

复制代码 代码如下:

var n=1;
 if(n>1){
    n=0;
}else{
    ++n;
}
console.log(n);
输出结果:2

三目运算结果
 

复制代码 代码如下:

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

 
可以看出if else和三目运算的区别了吧~~~
 
n++和++n在此验证中,没有任何区别,因为if else都是计算结果之后的,不会返回n,没有任何返回值
 
但是对于三目运算,n++返回的n值为n本身,++n返回的n值为n+1之后的结果

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

相关文章

  • js实现多图和单图上传显示

    js实现多图和单图上传显示

    这篇文章主要为大家详细介绍了js实现多图和单图上传显示,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • js鼠标点击图片切换效果实现代码

    js鼠标点击图片切换效果实现代码

    这篇文章为大家分享了js鼠标点击图片切换效果实现代码,特别炫酷的效果,具有一定的参考价值,推荐给大家,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JavaScript导航脚本判断当前导航

    JavaScript导航脚本判断当前导航

    这篇文章主要介绍了JavaScript导航脚本判断当前导航的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • JavaScript操作 url 中 search 部分方法函数

    JavaScript操作 url 中 search 部分方法函数

    这篇文章主要介绍了JavaScript操作 url 中 search 部分方法函数的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • JS库 Highlightjs 添加代码行号的实现代码

    JS库 Highlightjs 添加代码行号的实现代码

    Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
    2017-09-09
  • React Hooks 实现和由来以及解决的问题详解

    React Hooks 实现和由来以及解决的问题详解

    这篇文章主要介绍了React Hooks 实现和由来以及解决的问题详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • js实现日历的简单算法

    js实现日历的简单算法

    这篇文章主要为大家详细介绍了js实现日历的简单算法,用js写了一套日历,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • document.getElementById为空或不是对象的解决方法

    document.getElementById为空或不是对象的解决方法

    document.getElementById为空或不是对象的解决方法,一般情况下注意先内容后js.
    2010-01-01
  • JS的replace方法与正则表达式结合应用讲解

    JS的replace方法与正则表达式结合应用讲解

    replace方法的语法是:stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string),reExp可以是正则表达式对象(RegExp)也可以是字符串(string),replaceText是替代查找到的字符串。。为了帮助大家更好的理解,下面举个简单例子说明一下
    2007-12-12
  • JavaScript检测浏览器是否支持CSS变量代码实例

    JavaScript检测浏览器是否支持CSS变量代码实例

    这篇文章主要介绍了JavaScript检测浏览器是否支持CSS变量代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-04-04

最新评论