js中操作符 || 和 &&

一、第一部分（引子）

js中操作符 || 和 &&

先来介绍一下在js中由其他数据类型转化为boolean时到底是转化成true还是false

js中，当以下值转成boolean类型的时候，会被转换成false

0

""（空串）

false

undefined

null

NaN

其余的则会被转化为true

这里顺便说一句，js中将数据转化为boolean类型的方式有

1.Boolean()

2.!!

//eg
var value = 5;

console.log(typeof value);//number

console.log(typeof Boolean(value));//boolean

console.log(typeof !!value);//boolean

二、第二部分（规则说明）

好了，下面言归正传，下面来介绍几条规则：

1.

a || b

当!!a为true时，返回值为a；当!!a为false时，返回值为b

2.

a && b

当!!a为true时，返回值为b；当!!a为false时，返回值为a

3.

&& 优先级高于 ||

4.

有多个&&，从左到右两两执行；||同理

//eg

console.log(true || 0);//true

console.log(0 || 1);//1

console.log(null || undefined);//undefined

console.log(undefined || null);//null

console.log(null && "rgy");//null

console.log(undefined && "rgy");//undefined

console.log(1 || 2 || 4);//1

console.log(1 && 2 && 4);//4

console.log(1 && 0 && 4);//0

console.log((1 && 3 || 0)) && 4);//4

console.log(1 && (3 || 0 && 4));//3

console.log(1 && 3 || 0 && 4);//3

console.log(0 && 4 || 1 && 3);//3

三、第三部分（应用）

1.

callback && callback();

这个想必大伙不陌生吧，如果callback存在，则执行callback()，它等价于

if(callback){

callback();

}

2.

this.count = this.count || 0;

这个在实现简单的讲数器的时候比较常用

3.

var obj = obj || {};

一般用于传参的obj，做个初始化

4.

引用http://www.jb51.net/article/21339.htm中的一个例子

成长速度为5显示1个箭头；

成长速度为10显示2个箭头；

成长速度为12显示3个箭头；

成长速度为15显示4个箭头；

其他都显示都显示0各箭头。

要求：根据成长速度的值显示箭头数

最通用也是最容易想到的方式无非是 if else 语句，或者是 switch case 语句

这当然是可以的，不过在js中却有更为简洁的方法：

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

2).
var add_step = 120;
var add_level = {'5':1,'10':2,'12':3,'15':4}[add_step] || 0; 
console.log(add_level);

当然&&与||的应用还有很多，远远不限于上面所列的这些，事实上，js中&&与||十分强大

但是需要注意的一点就是：js中||和&&的特性帮我们精简了代码的同时，

也带来了代码可读性的降低。这个和正则表达式是一个道理，能够精简代码，

但是可读性会降低，建议使用这样的方式的时候注意写上必要的注释

四、第四部分（逗号操作符）

既然说到了操作符，这里顺便说一下js中的逗号操作符

定义：

逗号运算符，它将先计算左边的参数，再计算右边的参数值，然后返回最右边参数的值。

先来2个case体会一下：

1.
var a = 9, b = 19;

function test(){
	return a++, b++, a * b;
}

var c = test();

console.log(a);//10
console.log(b);//20
console.log(c);//200

分析：
表达式 a++, b++, a * b 从左到右开始计算，
a的值变为10，b的值变为20，a * b的值自然就为200了

2.
console.log((1, 0, 3, alert("kkk")));//kkk

tip:

不过逗号操作符在赋值的时候要注意一下：

这样就会报错：
var a = 10;
var b = a++, 20;
console.log(b);
这个应该和“=”的优先级有关

改成这样就行了：
var a = 10;
var b = (a++, 20);
console.log(b);//20