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


Posted in Javascript onNovember 21, 2014

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

Javascript 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
ppk谈JavaScript style属性
Oct 10 Javascript
javascript利用初始化数据装配模版的实现代码
Nov 17 Javascript
用jquery仿做发微博功能示例
Apr 18 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
使用js画图之饼图
Jan 12 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
深入理解JavaScript定时机制
Oct 27 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 11 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 #Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 #Javascript
js实现div弹出层的方法
Nov 20 #Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 #Javascript
js实现二代身份证号码验证详解
Nov 20 #Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 #Javascript
javascript获取flash版本号的方法
Nov 20 #Javascript
You might like
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
Python的Tornado框架异步编程入门实例
2015/04/24 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
python批量处理文件或文件夹
2020/07/28 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
介绍下Java中==和equals的区别
2013/09/01 面试题
歌咏比赛口号大全
2015/12/25 职场文书
python实现批量移动文件
2021/04/05 Python
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript