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

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

时间: 2024-10-29 09:20:29

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

js中的数组Array定义与sort方法使用示例_javascript技巧

Array数组相当于java中的ArrayList 定义方法: 1:使用new Array(5 )创建数组 var ary = new Array(5): 2:使用Json语法,var ary = [1,3,4]: 数组排序: 例: 复制代码 代码如下: function sort(){ var ary=[11,12,3,5,29]; ary.sort();//按照字符编码排序11,12,29,3,5; alert(ary.toString()); ary.sort(function(v1,v2

JS中window.open全屏命令解析及使用示例_javascript技巧

一.代码示例 复制代码 代码如下: window.open(url,'新窗口','width='+(window.screen.availWidth-10)+',height='+(window.screen.availHeight-30)+',top=0,left=0,resizable=yes,status=yes,menubar=no,scrollbars=yes'); 二.命令解析 window.open 弹出新窗口的命令 page.html 弹出窗口的文件名 newwindow 弹出窗

node.js中的定时器nextTick()和setImmediate()区别分析_node.js

1.node中使用定时器的问题在于,它并非精确的.譬如setTimeout()设定一个任务在10ms后执行,但是在9ms后,有一个任务占用了5ms,再次轮到定时器时,已经耽误了4ms. 好了node中的定时器就简单的讲这么多. 2.看代码: 复制代码 代码如下: process.nextTick(function(){     console.log("延迟执行"); }); console.log("正常执行1"); console.log("正常执行2

js中最容易被忽视的事件问题大总结_javascript技巧

什么叫跨平台事件?即在不同的浏览器上执行同一事件,所使用的方法不同. 什么是EventUtil对象?有什么作用?即将所有与事件相关的函数,融合在一起的一个容器,方便管理事件对象,它没有属性.主要处理DOM事件和IE事件的磨合,使其尽可能的相似. 下面我们来看一下DOM和IE之间的对象属性和方法做个对比(这里只指出两者之间不同的属性和方法),主要有以下五大点: DOM属性和方法 IE属性和方法 charcode keycode preventDefault returnValue=false re

关于JS中match() 和 exec() 返回值和属性的测试_javascript技巧

语法: exec() : RegExpObject.exec(string) match() : stringObject.match(string) stringObject.match(regexp) 知识点: exec() 是RegExp对象的方法,而 match() 是String对象的方法. 都会返回包含第一个匹配项信息的数组:或者在没有匹配项的情况下返回null. 返回的数组虽然是Array 的实例,但包含两个额外的属性:index 和 input.其中,index 表示匹配项在字符

JS中mouseover和mouseout多次触发问题如何解决_javascript技巧

问题描述 我希望当鼠标移动到id1上的时候,id2显示,当鼠标离开id1的时候,id2显示.问题如下: 1.当鼠标从id1上移动到id2上的时候,id由有显示变为不显示,然后变为显示 2.当鼠标从id2上移动到id1上的时候, id2有显示变为不显示,然后变为显示 我希望的是当鼠标在id1或者id2上移动的时候,id2一直显示,不发生变化. <script type="text/javascript" src="https://code.jquery.com/jquer

JS中动态创建元素的三种方法总结(推荐)_javascript技巧

1.动态创建元素一 document.write() 例如向页面中输出一个 li 标签 <pre class="html" name="code"><span style="font-size:12px;"><script> document.write("<li>123</li>"); </script></span> body标签中就会插入

JS中检测数据类型的几种方式及优缺点小结_javascript技巧

1.typeof 用来检测数据类型的运算符 typeof value 返回值首先是一个字符串,其次里面包含了对应的数据类型,例如:"number"."string"."boolean"."undefined"."object"."function" 局限性: 1)typeof null ->"object" 2)检测的不管是数组还是正则都返回的是"ob

教你JS中的运算符乘方、开方及变量格式转换_javascript技巧

1)如何计算乘方 题一:3的4次方(不会打,请原谅 ==!!!) 3的4次方=3*3*3*3 var a = Math.pow(3,4); console.log(a); 说明:Math.pow()是用来计算乘方的语法 注意:Math的M是大写: 题二:3的4*5次方 var a =Math.pow(3,4*5); console.log(a); 2)如何计算根号 题目:根号81 var a = Math.sqrt(81); console.log(a); 变量格式转换 用户的输入 var ye