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;
    }
}