我爱编程

JS中运算符的高级用法

2018-07-26  本文已影响60人  会飞的猪l

没有一点骚东西都不敢证明自己是一个"前端工程师"

假如说现在我们有一个需求:有一个成长速度,
成长速度为5时,显示1个箭头,
成长速度为10时,显示2个箭头,
成长速度为15时,显示3个箭头,
成长速度为20时,显示4个箭头。
其他都显示0个箭头。
看到这个需求,马上想到的应该就是if,else吧

var add_level = 0; 
if(add_step == 5){ 
add_level = 1; 
} 
else if(add_step == 10){ 
add_level = 2; 
} 
else if(add_step == 15){ 
add_level = 3; 
} 
else if(add_step == 20){ 
add_level = 4; 
} 
else { 
add_level = 0; 
} 

当然这个是最low的方法。
稍微好一点的话可以使用 swith:

var add_level = 0; 
switch(add_step){ 
case 5 : add_level = 1; 
break; 
case 10 : add_level = 2; 
break; 
case 15 : add_level = 3; 
break; 
case 20 : add_level = 4; 
break; 
default : add_level = 0; 
break; 

但是感觉还是很low,这个时候作为一个“工程师”就该拿出点东西来啦

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

还有更强大的

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

在js逻辑运算中,我们知道 0、""、null、false、undefined、NaN 这五种数据类型是会被判断为false的。那么,我们在进行js的逻辑运算过程中,就可以根据上面的原理以及这五种数据类型来进行相应的判断处理。
&&:从左到右依此判断,当当前值为true这继续,当为false则返回此值
&&这个具体在项目中怎么使用呢
用于执行语句

if(a>=5){alert(123)};
//可以写成
a>=5&&alert(123)

&&很多情况下可以当做if,有没有感觉很装逼!!!
||:从左到右依次判断,当当前值为false则继续,为true则返回此值
||这个具体在项目中怎么使用呢
这个很多情况下用于赋值

if(a==undefined){
  a = {}
}else{
  a = a;
}
//可以写成
a = a || {};

在来扩展一点新知识吧
优雅的取整

let a = ~~2.33;
let b = 2.33 | 0;
let c = 2.33 >>0;
let d = 2.33 <<0;
let e= 2.33 ^ 0;
console.log(a,b,c,d,e) //2

优雅的将字符串转成数字

let a = '123';
let b = '123,4567';
let c = a *1;
let d = ~~b * 1;
let e = +a;
console.log(typeof a); // String
console.log(typeof b); // String
console.log(typeof c); // Number
console.log(typeof d); // Number
console.log(typeof e); // Number
上一篇 下一篇

猜你喜欢

热点阅读