码迷,mamicode.com
首页 > Web开发 > 详细

js中操作符 || 和 &&

时间:2015-06-23 10:18:15      阅读:159      评论:0      收藏:0      [点我收藏+]

标签: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

js中操作符 || 和 &&

标签:js操作符   与操作   或操作   逗号操作符   

原文地址:http://blog.csdn.net/u011700203/article/details/46598125

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!