前端优化之if...else判断

在前端,我们大多习惯使用if…else if…else来进行判断,但是这样做代码不美观,而且可读性低且性能差,于是写了这么一篇博客。
关于if…else的优化:
优化前的代码:

function daxiao(number) {
    var n =Math.floor(Math.random()*100);
    if (number == n) {
        return "值相等";
    }else {
        return "值不相等";
    }
}

1.推荐将最常见的条件放在首位。
优化后:

function daxiao(number) {
    var n =Math.floor(Math.random()*100);
    if (number != n) {
        return "值不相等";
    }else {
        return "值相等";
    }
}

2.推荐使用三元运算符号来进行优化。(条件判断)? (是,执行):(否,执行),如果是或否里不执行任何操作,可用null、undefined等占位。

优化后:

function daxiao(number) {
    var n =Math.floor(Math.random()*100);
    return number == n ? "值相等":"值不相等";
    }
}

关于if…else if…else的优化:
优化前的代码:

function daxiao(number) {
    var n =Math.floor(Math.random()*100);
    if (number == n) {
        return "刚刚好";
    }else if(number < n){
        return "number值小了";
    }else {
        return "mumber值大了";
    }
}

1.推荐将最常见的条件放在首位。
优化后:

function daxiao(number) {
    var n =Math.floor(Math.random()*100);
    if (number > n) {
        return "number值大了";
    }else if(number < n){
        return "number值小了";
    }else {
        return "刚刚好";
    }
}

2.switch/case。条件数量较大的话,就建议选用switch。 在大多数的情况下switch比if else运行的更加快。
优化后:

function daxiao(number) {
    var n =Math.floor(Math.random()*100);
    switch(true) {
	    case number > n:
	        return "number值大了";
	    case number < n:
	        return "number值小了";
	    default:
	        return "刚刚好";
	}
}

3.使用数组优化。
优化后:

function daxiao(number) {
    let string = "今天是星期";
	let date = new Date().getDay();
	// 使用数组
	let dateArr = ["天","一","二","三","四","五","六"];
	return string + dateArr[date]
}

4.使用对象优化。
优化后:

function daxiao(number) {
    let string = "今天是星期";
	let date = new Date().getDay();
	// 使用对象
	dateObj = {
		0: "天",
		1: "一",
		2: "二",
		3: "三",
		4: "四",
		5: "五",
		6: "六",
	};
	return string + dateObj[date]
}

5.使用 charAt 字符方法。
优化后:

function daxiao(number) {
	return "今天是星期" + "日一二三四五六".charAt(new Date().getDay());
}

你可能感兴趣的:(网站优化)