javascript使用技巧

  • 2018-10-22
  • 0
  • 0

1.还在使用条件语句switch,或许Object是个不错的选择

看个例子:

function test(name) {
    switch(name) {
        case 'zhangsan':
            console.log('男');
            console.log('22岁');
            break
        case 'lihong':
            console.log('女');
            console.log('24岁');
            break
        default:
            retnrun false;
    }
}

上面之举两个判断条件,意思是我们要根据姓名打印出对应属性,上面这种写法使用起来也确实没什么问题,但是就我个人而言,它看上去很冗长。同样的结果可以通过对象字面量来实现,语法也更加简洁:

let testName = {
    'zhangsan':{sex:'男',age:'22岁'},
    'lihong':{sex:'女',age:'24岁'}
}
function test(name) {
    console.log(testName[name].sex);
    console.log(testName[name].age);
    return;
}

又或者

let testName = [
    {name:'zhangsan',sex:'男',age:'22岁'},
    {name:'lihong',sex:'女',age:'24岁'}
]
function test(name) {
    let result = testName.filter(f => f.name === name);
    console.log(result[0].sex);
    console.log(result[0].age);
    return;
}

这种做法好像有个名字叫“表驱动设计”,这样做有很多好处,代码简洁是一点,这个 testName 其实是一张配置表,以后可以抽出去放到单独的地方,甚至放到服务端去配置,就可以很容易实现一些动态化需求。更延伸开去讲,能配置化的东西尽量都配置化,方便以后扩展功能。

2.look-up表代替if-else

比如大家可能会遇到类似下面的需求:比如某平台的信用分数评级,超过700-950,就是Lv5,650-700为Lv4,600-650为Lv3,550-600为Lv2,350-550为Lv1。
实现很简单:

function showGrace(grace) {
   let _level='Lv0';
   if(grace>=700){
       _level='Lv5'
   }
   else if(grace>=650){
       _level='Lv4'
   }
   else if(grace>=600){
       _level='Lv3'
   }
   else if(grace>=550){
       _level='Lv2'
   }
   else{
       _level='Lv1'
   }
   return _level;
}

复制代码运行也没问题,但是问题也是有

万一以后需求,改了比如650-750是L4,750-950是L5。这样就整个方法要改。
方法存在各种神仙数字:700,650,600,550。日后的维护可能存在问题(这些数字,运营想改就改)。
if-else太多,看着有点不舒服

所以下面用look-up表,把配数据置和业务逻辑分离的方式实现下:

function showGrace(grace) {
    let graceForLevel=[700,650,600,550,400];
    let levelText=['Lv5','Lv4','Lv3','Lv2','Lv1'];
    let _level = 'Lv1'
    graceForLevel.some((item,index)=> {
        if(grace >= item){
            _level = levelText[index];
            return _level;
        }
    })
    return _level;
}

3.代码的一些优化技巧

看下面代码:

const data1 = a > b ? 100 : 200;
const data2 = a > b ? 300 : 400;

这段代码虽然只有两行,但 a > b 这个条件要判断两次,性能我们且不论(a > b 只是个示例,实际的条件可能更复杂),至少已经重复了,写的时候写两次,读的人也要看两次,不如就

let data1 = 200;
let data2 = 400;
if (a > b) {
    data1 = 100;
    data2 = 300;
}

或者把 a > b 这个 condition 提前计算好,避免计算两次(这种优化不是针对性能,因为有些语言编译器在编译期会做类似这种优化,主要还是可读性):

const condition = a > b;
const data1 = condition ? 100 : 200;
const data2 = condition ? 300 : 400;

代码要简洁,但不是简短(代码行数少),简洁的意思是逻辑清晰,没有冗余信息

评论

还没有任何评论,你来说两句吧