美文网首页我爱编程
JS中运算符的高级用法

JS中运算符的高级用法

作者: 会飞的猪l | 来源:发表于2018-07-26 09:58 被阅读60次

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

假如说现在我们有一个需求:有一个成长速度,
成长速度为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

相关文章

  • JS中运算符的高级用法

    没有一点骚东西都不敢证明自己是一个"前端工程师" 假如说现在我们有一个需求:有一个成长速度,成长速度为5时,显示1...

  • JavaScript几个小技巧

    &&、||运算的高级用法   在JavaSript中,“&&”运算符除了可以对布尔值进行与(AND)运算之外,还可...

  • js面试题--new的原理

    JS中的new操作符 和其他高级语言一样,JS中也有new运算符,我们知道new运算符是用来实例化一个类,从而在内...

  • 比较运算符

    前端学习分享(js中比较运算符的使用) 本文旨在搞清楚比较运算符的用法和场景,在js中比较运算符有以下8个 == ...

  • 一些高级js用法

    最近在学习js,总结了一些高级js用法

  • Javascript中的位运算符

    本文章主要讲解JS中位运算符的基本说明和常见用法 位运算符用于32位的数字上, 任何的数字操作都将转为32位, 运...

  • js中 && 和 || 运算符的用法

    我在平时写js代码时,一般也就使用&&和||判断true和false,最近在看别人的js源码时,出现了大量的&&和...

  • js 循环

    js中forEach,for in,for of循环的用法 js的 for...in 和 for...of的用法 ...

  • 1.4、Python基础04 运算

    Python的运算符和其他语言类似 (我们暂时只了解这些运算符的基本用法,方便我们展开后面的内容,高级应用暂时不介...

  • Swift编程二十八(高级运算符)

    案例代码下载 高级运算符 除了基本运算符中描述的运算符之外,Swift还提供了几个执行更复杂值操作的高级运算符。这...

网友评论

    本文标题:JS中运算符的高级用法

    本文链接:https://www.haomeiwen.com/subject/mifpmftx.html