1、||(逻辑或),

从字面上来说,只有前后都是false的时候才返回false,否则返回true。

1
2
3
4
alert(true||false); // true
alert(false||true); // true
alert(true||true); // true
alert(false||false); // false

这个傻子都知道~~

但是,从深层意义上来说的话,却有另一番天地,试下面代码

1
alert(0||1);//1

显然,我们知道,前面0意味着false,而后面1意味着true,那么上面的结果应该是true,而事实返回的结果是1。再看下面代码:

1
alert(2||1);//2

我们知道,前面2是true,后面1也是true,那返回结果又是什么呢?测试结果是2,继续看:

1
alert('a'||1);//'a'

同样,前面'a'是true,后面1也是true;测试结果是'a',下面

1
alert(''||1);//1

由上,我们知道前面”是false,后面1是true,而返回结果是1。再看下面

1
alert('a'||0);//'a'

前面'a'是true,而后面0是false,返回结果是'a',继续下面

1
alert(''||0);//0

前面”是false,后面0同样是false,返回结果是0

1
alert(0||'');//''

前面0是false,后面”是false,返回结果是”

这就意味

1、只要“||”前面为false,不管“||”后面是true还是false,都返回“||”后面的值。

2、只要“||”前面为true,不管“||”后面是true还是false,都返回“||”前面的值。

我称这种为短路原理: 知道了前面第一个的结果就知道后的输出,如果为第一个为:true,则取第一个的值,如果第一个为false,则取第二个的值。

js必须牢记的6个蛋蛋: 请你一定要记住:在js逻辑运算中,0、”“、null、false、undefined、NaN都会判为false,其他都为true(好像没有遗漏了吧,请各位确认下)。这个一定要记住,不然应用||和&&就会出现问题。

这里顺便提下:经常有人问我,看到很多代码if(!!attr),为什么不直接写if(attr);

其实这是一种更严谨的写法:
请测试 typeof 5和typeof !!5的区别。!!的作用是把一个其他类型的变量转成的bool类型。

2.&&(逻辑与)

从字面上来说,只有前后都是true的时候才返回true,否则返回false。

1
2
3
4
alert(true&&false); // false
alert(true&&true); // true
alert(false&&false); // false
alert(false&&true); // false

然后,根据上面经验,我们看看“&&”号前后,不单单是布尔类型的情况。

1
alert(''&&1);//''

结是返回”,“&&”前面”是false,后面是1是true。

1
alert(''&&0);//''

结是返回”,“&&”前面”是false,后面是0也是false。

1
alert('a'&&1);//1

结是返回1,“&&”前面”a是true,后面是1也是true。

1
alert('a'&&0);//0

结是返回0,“&&”前面”a是true,后面是0是false。

1
alert('a'&&'');//''

结是返回”,“&&”前面”a是true,后面是”是false。

1
alert(0&&'a');//0

结是返回0,“&&”前面”0是false,后面是'a'是true。

1
alert(0&&''); //0

结是返回0,“&&”前面”0是false,后面是”也是false。

短路原理

1、只要“&&”前面是false,无论“&&”后面是true还是false,结果都将返“&&”前面的值;

2、只要“&&”前面是true,无论“&&”后面是true还是false,结果都将返“&&”后面的值;

3.在开发中的应用

下面三段代码等价:

1
2
3
4
5
6
7
a=a||"defaultValue"
if(!a){ 
a="defaultValue"
if(a==null||a==""||a==undefined){ 
a="defaultValue"
}

你愿意用哪一个呢?

2、 像var Yahoo = Yahoo || {};这种是非常广泛应用的。
获得初值的方式是不是很优雅?比if。。。。else…好很多,比?:也好不少。

3、 callback&&callback()

在回调中,经常这么写,更严谨,先判断 callback 是不是存在,如果存在就执行,这样写的目的是为了防止报错
如果直接写 callback();
当callback不存在时代码就会报错。

4、综合实例

需求如图:

这里写图片描述

假设对成长速度显示规定如下:

成长速度为5显示1个箭头;
成长速度为10显示2个箭头;
成长速度为12显示3个箭头;
成长速度为15显示4个箭头;
其他都显示都显示0各箭头。
用代码怎么实现?

差一点的if,else:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var add_level = 0; 
if(add_step == 5){ 
add_level = 1; 
else if(add_step == 10){ 
add_level = 2; 
else if(add_step == 12){ 
add_level = 3; 
else if(add_step == 15){ 
add_level = 4; 
else
add_level = 0; 
}

稍好些的switch:

1
2
3
4
5
6
7
8
9
10
11
12
13
var add_level = 0; 
switch(add_step){ 
case 5 : add_level = 1; 
break
case 10 : add_level = 2; 
break
case 12 : add_level = 3; 
break
case 15 : add_level = 4; 
break
default : add_level = 0; 
break;
}

如果需求改成:

成长速度为>12显示4个箭头;
成长速度为>10显示3个箭头;
成长速度为>5显示2个箭头;
成长速度为>0显示1个箭头;
成长速度为<=0显示0个箭头。

那么用switch实现起来也很麻烦了。

那么你有没有想过用一行就代码实现呢?

ok,让我们来看看js强大的表现力吧:

1
var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;

更强大的,也更优的:

1
var add_level={'5':1,'10':2,'12':3,'15':4}[add_step] || 0;

第二个需求:

1
var add_level = (add_step>12 && 4) || (add_step>10 && 3) || (add_step>5 && 2) || (add_step>0 && 1) || 0;

以上所述是小编给大家介绍的全面解析JavaScript中“&&”和“||”操作符(总结篇),希望对大家有所帮助

全面解析JavaScript中“&&”和“||”操作符(总结篇)的更多相关文章

  1. JavaScript中“&&”和“||”操作符的意义,深入理解和使用场景

     一.概念 与其他语言不同,在js中,逻辑运算符可以返回任何类型的数据,不仅仅是true和false. &&和||的返回值是两个操作数的其中一个.即a&&b或者a||b ...

  2. 深入解析Javascript中this关键字的使用

    深入解析Javascript中面向对象编程中的this关键字 在Javascript中this关键字代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.比如: function TestFun ...

  3. 深度解析javascript中的浅复制和深复制

    原文:深度解析javascript中的浅复制和深复制 在谈javascript的浅复制和深复制之前,我们有必要在来讨论下js的数据类型.我们都知道有Number,Boolean,String,Null ...

  4. javascript中的操作符详解1

    好久没有写点什么了,根据博主的技术,仍然写一点javascript新手入门文章,接下来我们一起来探讨javascript的操作符. 一.前言 javascript中有许多操作符,但是许多初学者并不理解 ...

  5. JavaScript中in操作符(for..in)、Object.keys()和Object.getOwnPropertyNames()的区别

    ECMAScript将对象的属性分为两种:数据属性和访问器属性.每一种属性内部都有一些特性,这里我们只关注对象属性的[[Enumerable]]特征,它表示是否通过 for-in 循环返回属性,也可以 ...

  6. 了解javascript中的this --实例篇

    对javascript this的赋值有了深一层的理解后,看一下比较复杂的情况,this的应用篇参考<对javascript this的理解>. #demo1 var name=" ...

  7. 解析JavaScript中apply和call以及bind

    函数调用方法 在谈论JavaScript中apply.call和bind这三兄弟之前,我想先说下,函数的调用方式有哪些: 作为函数 作为方法 作为构造函数 通过它们的call()和apply()方法间 ...

  8. [转] JavaScript中in操作符(for..in)、Object.keys()和Object.getOwnPropertyNames()的区别

    ECMAScript将对象的属性分为两种:数据属性和访问器属性.每一种属性内部都有一些特性,这里我们只关注对象属性的[[Enumerable]]特征,它表示是否通过 for-in 循环返回属性,也可以 ...

  9. Javascript中void操作符

    Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值. void操作符用法格式如下:1.javascript:void (expression)2.javascript ...

随机推荐

  1. unity, Destroy注意事项

    Destroy不是立即发生作用,而是推迟到帧末,所以下面代码是错误的: void OnTriggerEnter(Collider other){   if (other.gameObject.tag  ...

  2. “互联网+”取代O2O将成为2016最大风口

    2016年的最大风口是“互联网+”,经历了O2O的洗礼,B2C服务的全线崛起.跨界与场景打造的极致体验,从0到1的产业开放,都将在这一年集体爆发,“互联网+”比O2O更加接地气,更具有完整的商业模式和 ...

  3. log4j2配合slf4j使用

    说明 log4j2被用于日志输出,相信绝大多数程序猿都对此不陌生.笔者刚接触log4j2,因此记个博客备用. log4j2是一个日志框架,slf4j是日志框架接口,之所以使用log4j2和slf4j搭 ...

  4. linux学习笔记29---命令watch

    watch是一个非常实用的命令,基本所有的Linux发行版都带有这个小工具,如同名字一样,watch可以帮你监测一个命令的运行结果,省得你一遍遍的手动运行.在Linux下,watch是周期性的执行下个 ...

  5. 截图工具gsnap

    嵌入式linux截图工具的基本原理就是通过读取Framebuffer,把LCD上显示的内容转换成图片格式文件(jpeg.bmp.png). gsnap.bin 1.jpg  /dev/fb0 gsna ...

  6. springbatch操作DB

    一.需求分析 使用Spring Batch对DB进行读写操作: 从一个表中读取数据, 然后批量的插入另外一张表中. 二.代码实现 1. 代码结构图: 2. applicationContext.xml ...

  7. C++ 类模板二(类模版与友元函数)

    //类模版与友元函数 #include<iostream> using namespace std; template<typename T> class Complex{ p ...

  8. Java反射机制的作用?

    Java反射机制的作用? 解答:Java反射机制的作用是: 1)在运行时判断任意一个对象所属的类. 2)在运行时构造任意一个类的对象. 3)在运行时判断任意一个类所具有的成员变量和方法. 4)在运行时 ...

  9. highCharts图表应用-模拟心电图

    通过前两章的学习,相信大家对highcharts已经有了初步的了解.这一章将通过一个例子来模拟Highcharts如何实现经常变化的数据显示. 比如说股票的涨停.实时篮球比分以及A选手和B选手的支持率 ...

  10. debug命令

    debug -r 查看寄存器-a 输入指令-t 执形命令 通用寄存器:AX=AH+ALBX=BH+BLCX=CH+CLDX=DH+DL 2Byte 16bitFFFF0-(2的16次方减1) debu ...