在前端開發中如何減少或取代if else

2021-10-23 17:24:13 字數 2348 閱讀 8550

最近在開發過程中時常因為專案比較忙,都是先考慮實現功能,最近回首看**發現很多冗長的if-else判斷,今日就寫一些自己在替代if-else的一些方案。

需求:當a 為或假的時候b的取值也隨之發生變化;

let a = true,b = null;

console.time('time1');

if (a) else

console.timeend('time1'); // => time1: 0.005126953125ms

console.time('time2');

b = a ? '你好' : '再見';

console.timeend('time2'); // time2: 0.004150390625ms

上述**中可以看出兩個執行的時間上通過三元運算子執行時間短且想對比較**整潔;

優:簡化**,減少**臃腫

缺:只適用於邏輯判斷比較簡單的;不使用與邏輯複雜的處理;

let a = 3,b = null;

console.time('time1');

if (a === 1) else if (a === 2) else if (a === 3) else

console.timeend('time1'); // => time1: 0.712890625ms

console.time('time2');

switch (a)

console.timeend('time2'); // time2: 0.52392578125ms

總所周知:if-else只是單純地乙個接乙個比較;if...else每個條件都計算一遍;

而switch不同 他是通過某個case語句後的值開始,它下方的所有語句都會一直執行,直到遇到乙個break為止。

隨後,switch語句將結束。

優:美觀度高 可識別程度也高。不需要if-else逐個去判斷

缺:不適用於多深度的判斷。

通常後台或給我們返回這樣的引數: type:0; // 0:未開始,1:已開始,2:已結束。

這個時候用if-else就有些多餘了。我們可以通過建立物件的形式來解決

let option = , type = 2;

option[type];

上述**可以看出 一行**即可,

優:使用物件,不需要 if-else 遍歷判斷, 減少**的冗長執行機制快;

缺:不利於擴充套件,因為你option的物件是前端寫死的;

需求:判斷班級裡某個學生的分數評級 0-60待努力,61-70加油,71-80良好,81-90優秀,91-99極好,100滿分

需求很簡單:

let score = 89,rating = null;

console.time('time1');

if (score <= 60) else if (score <= 70) else if (score <= 80) else if (score <= 90) else if (score <= 99) else

console.log(rating)

console.timeend('time1'); // => time1: 0.546875ms

if-else 太多,且當需求修改的時候維護起來比較麻煩

look-up表實現會怎樣呢?

let score = 89,rating = null;

let level = [60, 70, 80, 90, 99, 100];

let leveltext = ['待努力', '加油', '良好', '優秀', '極好', '滿分'];

for (let i = 0; i < level.length; i++)

}

資料與邏輯業務的分離如果有需求修改 只需修改 level與leveltext即可邏輯不需要修改;

更近一步的話可以將此方法封裝

let level = [60, 70, 80, 90, 99, 100];

let leveltext = ['待努力', '加油', '良好', '優秀', '極好', '滿分'];

this.leetcode(score, level, leveltext);

leetcode (score, level, leveltext)

}},

總結:

在判斷語句的時候盡量做到資料與邏輯業務的分離,有利於後期的維護。要靈活運用各種特性來完成需求,在大多情況下switch 比if-else執行更快。在使用if-else的時候盡量避免else的使用。

如何在前端應用中實現單元測試

前端工程化是現代前端提公升效率和 質量的乙個重要手段。單元測試作為保障 質量,提公升 可維護性的一種方法,也越來越多的在前端得到應用。本文以前端主流的 vue 框架為基礎,帶領大家在前端應用中搭建單元測試,並演示如何對 vue 單檔案元件進行測試。希望通過本文的的講述,能給希望學習如何在前端應用中進...

程式設計師如何減少開發中的 Bug?

一 概述 愛因斯坦曾經說過 如果給我乙個小時解答一道決定我生死的問題,我會花55分鐘來弄清楚這道題到底是在問什麼。一旦清楚了它在問什麼,剩下的5分鐘足夠解答這個問題。雖然我們軟體開發過程不會面臨生死的抉擇,但是卻直接影響著使用者的使用感受,決定著產品的走向。所以程式設計師如何減少開發中的 bug,既...

前端開發中如何解析json資料(三)

資料三 china america spain 上述 也是json資料 的一種表現形式,而且該形式也是很常見的,最外層是乙個物件,物件中鍵對應的值是乙個陣列。陣列裡面又包含json物件。在網路請求這裡,這樣的 json 資料也是很常見的,下面我們就來看一下如何 解析這樣的json資料。首先是通過fo...