Javscript 代码优化（持续更新）

目录

• 解构优化

判断优化

//bad
if(condition === 'aa' ||condition === 'bb' || condition === 'cc' ){
    //TODO
}

//good
let regCondition = /^(aa|bb|cc)$/;
regCondition.test(condition)

switch case 优化

//bad
funtion getLevel(level){
    let str = '';
    switch (level) {
        case A:
            str = '优秀';
            break;
        case B:
            str = '良好';
            break;
        case C:
            str = '及格';
            break;
        default:
            str =  '不及格';
    }
    return str;
}
//good
funtion getLevel(level) {
    let levelObj = { A: '优秀', B: '良好', C: '及格' };
    return levelObj[level] ? levelObj[level] : '不及格';
}

数组

//bad
let arr = [1, 2, 3, 4, 5, 6];
let temp = []
for (let i = 0; i < arr.length; i++) {
    if (arr[i] % 2 === 0) {
        temp.push(arr[i]);
    }
}
//good
let temp = arr.filter(item => item % 2 === 0);

//数组的链式调用
arr.filter(xxx).map(xxx).forEach(xxx);

//对象结构 快捷方式
const {valueA,valueB,valueC} = this;

避免在Vue 中 使用 this.valueA this.valueB ... 的方式 减小代码量。

解构优化

//背景 在vue项目中会大量的用到this.特别在data中定义了值的话 在method里面取值代码可能会变得很长。
//bad
methods:{
    fun(){
        this.xxx.push(xxx);
        this.bbb.map(xxxx);
        this.ccc = this.ddd = this.eee = true
        //..
    }
}
//good
methods:{
    fun(){
        let {xxx, bbb ,ccc ,ddd, eee} = this;
        xxx.push('123');
        bbb.map(xxxx);
        ccc = ddd = eee = true;
    }
}