建站
咨詢
售后
建站咨詢
新聞中心
前言
最近部門在對(duì)以往的代碼做一些優(yōu)化，我在代碼中看到一連串的 if(){}elseif(){} 的邏輯判斷。這明顯是有優(yōu)化空間的。
由于內(nèi)部代碼不適合分享，這里我就用 <輸出今天為星期幾> 來(lái)講講邏輯判斷優(yōu)化的一些方案。
這里先聲明，免有人疑惑：
我們?cè)陧?xiàng)目中使用的很可能會(huì)有多層的嵌套，不像我的例子只有一層。不過(guò)其優(yōu)化的思想是大致相同的。由于 returnWeekday() 方法異常之簡(jiǎn)單，所以提前聲明。
需求
寫一個(gè) returnWeekday() 方法返回"今天是星期*"。
接下來(lái)我們就一步一步來(lái)。
優(yōu)化過(guò)程
這里我簡(jiǎn)單的分為 “初學(xué) —> 入門 —> 中級(jí)” 這幾個(gè)階段。
初學(xué)
當(dāng)我們開始拿到需求的時(shí)候，看到一系列的邏輯判斷，首先想到的應(yīng)該就是 if 語(yǔ)句了。
代碼如下：
- function returnWeekday(){
- let string = "今天是星期";
- let date = new Date().getDay();
- if (date === 0) {
- string += "日";
- } else if (date === 1) {
- string += "一";
- } else if (date === 2) {
- string += "二";
- } else if (date === 3) {
- string += "三";
- } else if (date === 4) {
- string += "四";
- } else if (date === 5) {
- string += "五";
- } else if (date === 6) {
- string += "六";
- }
- return string
- }
- console.log(returnWeekday())
當(dāng)我們寫完了這樣的代碼，第一感覺就是 elseif 塊是不是太多了。
可是當(dāng)我們還在思考如何優(yōu)化的時(shí)候，產(chǎn)品就在釘釘發(fā)消息給你問(wèn)這個(gè)需求完成的怎么樣了？還帶了一個(gè)壞笑的表情包。這個(gè)時(shí)候你告訴自己，這個(gè)優(yōu)化后面再說(shuō)吧?？墒蔷枚弥?，需求加之。這個(gè)再也沒有優(yōu)化過(guò)了，直到下一個(gè)接手。
上面的代碼確實(shí) elseif 塊太多了，看著就不舒服。
我們?cè)诳础禞avaScript 高級(jí)程序設(shè)計(jì)》的時(shí)候，看到這樣一句話：
switch 語(yǔ)句與 if 語(yǔ)句的關(guān)系最為密切，而且也是在其他語(yǔ)言中普遍使用的一種流控制語(yǔ)句。
所以我們是不是可以考慮使用 switch 語(yǔ)句來(lái)優(yōu)化一下呢？
入門
這里我們使用 switch 語(yǔ)句優(yōu)化一遍代碼。
注意：switch 語(yǔ)句在比較值的時(shí)候使用的是全等操作符，不會(huì)有類型轉(zhuǎn)換的情況。
代碼如下：
- function returnWeekday(){
- let string = "今天是星期";
- let date = new Date().getDay();
- switch (date) {
- case 0 :
- string += "日";
- break;
- case 1 :
- string += "一";
- break;
- case 2 :
- string += "二";
- break;
- case 3 :
- string += "三";
- break;
- case 4 :
- string += "四";
- break;
- case 5 :
- string += "五";
- break;
- case 6 :
- string += "六";
- break;
- }
- return string
- }
- console.log(returnWeekday())
我們?cè)?case 里面拼接字符，以達(dá)到輸出預(yù)期結(jié)果的目的。這里的結(jié)構(gòu)看起來(lái)確實(shí)比 if 語(yǔ)句清晰了一點(diǎn)。可是還是有點(diǎn)疑惑？
假設(shè)哪一天，相關(guān)組織發(fā)現(xiàn)，星象有變。每周需要變成八天（產(chǎn)品的思維，你無(wú)法想象）。我們這個(gè) returnWeekday() 方法就需要多加一層判斷了。
我們的希望是已經(jīng)封裝好的方法，不要頻繁的修改?？墒切枨蟮淖儎?dòng)是你無(wú)法控制的。
所以我們繼續(xù)思考該怎么優(yōu)化。
中級(jí)
我們看到這里的 case 是數(shù)字，和數(shù)組的下標(biāo)是一致的。
即：['天','一','二','三','四','五','六'] 的下標(biāo)。
所以我們可以考慮使用數(shù)組來(lái)優(yōu)化。
代碼如下：
- function returnWeekday(){
- let string = "今天是星期";
- let date = new Date().getDay();
- // 使用數(shù)組
- let dateArr = ['天','一','二','三','四','五','六'];
- return string + dateArr[date]
- }
- console.log(returnWeekday())
以上代碼是不是比 switch 語(yǔ)句和 if 語(yǔ)句清晰多了。而且就算一周變?yōu)榘颂?，只需要修?dateArr 數(shù)組就好了。
倘若我們的每個(gè) case 是不規(guī)律的字符串呢？那我們使用對(duì)象，每個(gè) case 為一個(gè) key
代碼如下：
- function returnWeekday(){
- let string = "今天是星期";
- let date = new Date().getDay();
- // 使用對(duì)象
- dateObj = {
- 0: '天',
- 1: "一",
- 2: "二",
- 3: "三",
- 4: "四",
- 5: "五",
- 6: "六",
- };
- return string + dateObj[date]
- }
- console.log(returnWeekday())
以上使用數(shù)組或者對(duì)象的寫法，提高代碼的可讀性的同時(shí)，維護(hù)起來(lái)也變得簡(jiǎn)單了。
使用 charAt 字符方法
字符串有個(gè)和使用數(shù)組下標(biāo)類似的方法：
- // charAt 定位方法
- function returnWeekday(){
- return "今天是星期" + "日一二三四五六".charAt(new Date().getDay());
- }
- console.log(returnWeekday())
需求變動(dòng)
這個(gè)時(shí)候，有人希望 returnWeekday() 方法不僅返回今天是周幾，還需要區(qū)分工作日和休息日，調(diào)用相關(guān)方法。
如果是使用 switch、 if 或 數(shù)組 維護(hù)起來(lái)就有點(diǎn)麻煩，需要改寫的地方還挺多的。
- function returnWeekday(){
- let string = "今天是星期";
- let date = new Date().getDay();
- // 使用對(duì)象
- dateObj = {
- 0: ['天','休'],
- 1: ["一",'工'],
- 2: ["二",'工'],
- 3: ["三",'工'],
- 4: ["四",'工'],
- 5: ["五",'工'],
- 6: ["六",'休'],
- }
- // 類型，這里也可以對(duì)應(yīng)相關(guān)方法
- dayType = {
- '休': function(){
- // some code
- console.log('為休息日')
- },
- '工': function(){
- // some code
- console.log('為工作日')
- }
- }
- let returnData = {
- 'string' : string + dateObj[date][0],
- 'method' : dayType[dateObj[date][1]]
- }
- return returnData
- };
- console.log(returnWeekday().method.call(this))
其他常見優(yōu)化手段
這里在給出一些常見的優(yōu)化手段。
三元運(yùn)算
適合簡(jiǎn)單的 if(){}else{} 情況。
- //滾動(dòng)監(jiān)聽，頭部固定
- handleScroll: function () {
- let offsetTop = this.$refs.pride_tab_fixed.getBoundingClientRect().top;
- if( offsetTop < 0 ){
- this.titleFixed = true
- } else {
- this.titleFixed = false
- }
- // 改成三元
- (offsetTop < 0) ? this.titleFixed = true : this.titleFixed = false;
- // 我們發(fā)現(xiàn)條件塊里面的賦值情況是布爾值，所以可以更簡(jiǎn)單
- this.titleFixed = offsetTop < 0;
- }
這樣在精簡(jiǎn)代碼的時(shí)候，可讀性也沒有降低。
邏輯與運(yùn)算符
有些時(shí)候我們可以使用邏輯與運(yùn)算符來(lái)簡(jiǎn)化代碼
- if( falg ){
- someMethod()
- }
可以改成：
- falg && someMethod();
使用 includes 處理多重條件
- if( code === '202' || code === '203' || code === '204' ){
- someMethod()
- }
可以改成
- if( ['202','203','204'].includes(code) ){
- someMethod()
- }
分享題目：你可以這樣優(yōu)化if-else代碼結(jié)構(gòu)
文章鏈接：http://m.5511xx.com/article/dhggopj.html
