美文网首页我爱编程
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中运算符的高级用法

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