前端优化之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());
}
  • 0
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
回答: 前端中,if-else和switch-case都是用来进行条件判断的语句。根据引用\[1\]的结论,当条件是连续数字或相隔不大时,编译器会使用表结构做优化,此时switch-case的性能优于if-else。而在其他情况下,switch-case其实就是逐个分支判断,性能与if-else无异。所以,如果条件是不连续的数字,如1、2、3、456、987,使用switch-case可能会浪费内存,因为每个case都需要占用内存空间。因此,在这种情况下,使用if-else可能更合适。引用\[2\]中也提到了这一点。然而,最终选择使用if-else还是switch-case并不仅仅取决于性能,而是根据具体情况和代码的可读性来决定。很多优秀的项目和代码选择了if-else语句,这可能是因为if-else更灵活,适用范围更广,更容易理解和维护。所以,在前端开发中,我们需要根据具体情况来选择使用if-else还是switch-case语句。 #### 引用[.reference_title] - *1* *2* [if-else 和 switch-case 哪个效率更高?](https://blog.csdn.net/lt_xiaodou/article/details/126966636)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [优秀的代码最终选择if else,还是switch case](https://blog.csdn.net/xingyu_qie/article/details/128810177)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值