Javscript 代码优化（持续更新）

目录

• 判断优化
• switch case 优化
• 数组

判断优化

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