js中操作符 || 和 &&

页面导航:首页 > 网络编程 > JavaScript > js中操作符 || 和 &&

js中操作符 || 和 &&

来源: 作者: 时间:2016-01-23 10:23 【

一、第一部分(引子)js中操作符 || 和 先来介绍一下在js中由其他数据类型转化为boolean时到底是转化成true还是falsejs中,当以下转成boolean类型的时候,会被转换成false0 " "(空串)f

一、第一部分(引子)

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.
示例:
成长速度为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

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<