深入淺出代碼優化﹣if/else

作者: Calpa Liu
字數:1195
出版:2018 年 10 月 22 日
對於代碼裡面的 if else,我們可以使用邏輯判斷式,或更好的三元判斷式來優化代碼。除了可以降低維護項目的成本之外,還可以提升代碼可讀性。就讓我們從最簡單的 if else 例子開始吧。

最簡單的 if...else... 或者 switch 都是 JavaScript 的入門,我們這裡就簡單說一下:

if (workIsDone === true) {
  eatDinner();
} else {
  keepCoding();
}

表達式與陳述句

首先我們要了解什麼是表達式(Expressions),什麼是陳述句(Statements)。

表達式是任何句子用來給 JavaScript 引擎展開,並產生值。

例如,它可以是一個數字,數組,對象,正則表達式,賦值,函數。

陳述句這是任何句子用來給 JavaScript 引擎讓某些事物發生,或者由副作用。

例如:條件命令式,變量,循環,返回,try/catch/finally

條件和真假值

何為真?何為假?萬物有所變,但 JavaScript 引擎卻有所定義。

我們可以簡單地用 A == false 來判斷假的值。

'' "" ``
0 -0
null
undefined
NaN
false

值得注意的是,使用模板字符串而裡面沒有填充任何值的話,也是會返回 false 的。

非假為真

如何優雅地寫出條件判斷式

還記得 De Morgan's Laws 嗎?

我們可以用它來簡化複雜的條件判斷式:

!(A || B) === (!A && !B); // true
!(A && B) === (!A || !B); // true

實戰部分

對於 Google Analytics(GA),我們不希望把作者本人的數據,以及測試環境的數據也上傳上去,以免干擾資料正確性。我們就可以問用戶是否已經作者本人,以及是否在測試環境上,來判斷是否需要寄送 Google Analytics 數據到 Google 服務器上。

假設兩個函數已經寫好了,比如說 isAuthor()isTestingEnvironment()

只有在不是作者本人,或者當前環境不是測試環境,我們才寄送數據到 Google 服務器上。

const enableGA = !(isAuthor() || isTestingEnvironment());
const betterEnableGA = !isAuthor() && !isTestingEnvironment();

當然,更加好的寫法是只有當用戶不是作者本人,以及不在測試環境上,我們才寄送數據到 Google 服務器上。

const enableGA = isNotAuthor() && isNotTestingEnvironment();

優化 if else 的不同手段

以 && 取代單純的 if 語句

if (user && user.canDeletePost) {
  deletePost();
}

以上的代碼可以取代為:

user && user.canDeletePost && deletePost();

當然,如果你認為這樣寫的代碼太長,會有副作用,那麼你可以簡化為:

const userCanDeletePost = user && user.canDeletePost;
userCanDeletePost && deletePost();

以 || 取代 if else 語句

我們這裡會用一個判斷用戶密碼長度的簡單函數作為例子。如果你有更加好的代碼片段,歡迎在底部的評論區留言。

let strength = null;

if (password.length > 7) {
  strength = "Strong";
} else {
  strength = "Weak";
}

以上的代碼可以取代為:

const strength = (password.length > 7 && "Strong") || "Weak";

然而,使用 &&|| 的組合會增加程序員閱讀代碼的思維層數,一種更加好的做法是使用三元運算符(ternary operator)。

值得注意的是,如果你的 && 之後 的 A 是一個 falsy 的值,它永遠不會返回,而是返回 B。

(condition && A) || B;

// 例如:
let password = "abcdefg1234";
(password.length > 7 && false) || "Weak"; // 'Weak'

password = "a";
(password.length > 7 && false) || "Weak"; // 'Weak'

我們可以使用三元運算符而不是邏輯運算符來更好地表達語句。

三元運算符

最簡單的三元運算符會是,條件為真?返回 A,不然返回 B。

condition ? A : B;

針對以上的例子,判斷密碼長度的代碼片段可以改為:

const strength = password.length > 7 ? "Strong" : "Weak";

另外一個例子,就是在支持多瀏覽器的 AJAX 庫裡面可以得出的代碼片段:

let xmlhttp = null;

if (window.XMLHttpRequest) {
  // 現代瀏覽器
  xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
  // 舊 IE 版本 (IE <= 6)
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

我們可以使用邏輯運算符來優化以上代碼片段:

const xmlhttp =
  (window.XMLHttpRequest && new XMLHttpRequest()) ||
  (window.ActiveXObject && new ActiveXObject("Microsoft.XMLHTTP")) ||
  null;

或使用更加好的三元運算符來優化以上代碼片段:

const xmlhttp = window.XMLHttpRequest
  ? new XMLHttpRequest()
  : window.ActiveXObject
  ? new ActiveXObject("Microsoft.XMLHTTP")
  : null;

值得注意的是,三元判斷式是從右到左結合的:

// 這個判斷式
A
  ? B
  : C
  ? D
  : E
  ? F
  : G(
      // 等同以下判斷式
      A ? B : C ? D : E ? F : G
    ); // B

然而,你可能是想寫:

((A ? B : C) ? D : E) ? F : G; // F

所以,記得自己加括號來控制代碼如何結合解析。

後記

上個星期,組織舉辦了一場前端 Code Review 的大會,其中優化 if...else... 的手法,讓我有所體悟。之後,我花了點時間研究邏輯判斷式及三元判斷式。希望能夠達到知其然,知其所以然的階段。

對於第一段代碼,我們可以簡化為以下代碼:

workIsDone ? eatDinner() : keepCoding();

順帶一提,不知道為什麼這一篇文章的底部評論區有問題,請移玉步到右上角的留言簿。

參考資料

關於 Calpa

Calpa 擅長使用 TypeScriptReact.jsVue.js 建立 Responsive Website。

他積極參與開源社區,曾在 2019 年的香港開源大會上擔任講者,提供工作經驗和見解。此外,他也在 GitHub 上公開分享個人博客程式碼,已獲得超過 300 顆星星和 60 個分支的支持。

他熱愛學習新技術,並樂意分享經驗。他相信,唯有不斷學習才能跟上快速演變的技術環境。

熱門文章

最新文章

圖片管理中心
管理圖片資源
IP 查詢
快速查詢和定位 IP 地址的地理位置和相關信息
Python 運行器
無需後端、無需登入,只需打開瀏覽器即可運行 Python 代碼(由 Pyodide 提供支持)
封面圖生成器
自動創建適合各種平台的文章封面圖
原作(青山剛昌)產生器
一鍵創建原作(青山剛昌)的封面圖
日本色彩
探索和使用傳統日本色彩
部落格內容洞察儀表板
以視覺化儀表板方式追蹤文章成效、分享熱度與分類分布,協助創作者掌握內容表現。
蒙特卡羅估算 π
使用蒙特卡羅方法演示 π 值的估算過程
LLM
使用 LLM 模型進行聊天
活動圖生成器
一鍵創建活動的封面圖
Wagmi Card
一鍵創建 Wagmi 的封面圖
Facebook Quote
Facebook Quote
Music Macro Language (MML) Studio
用程式語法編寫旋律,用音符構築想像
Blurhash
一鍵創建 Blurhash
文字分類器
使用 MediaPipe TextClassifier 分類文字
前端工程師免費工具資源
前端工程師免費工具資源
後端工程師免費工具資源
後端工程師免費工具資源
全端工程師免費工具資源
全端工程師免費工具資源
Web3 工程師免費工具資源
Web3 工程師免費工具資源
紫微斗數排盤系統|結合 AI 的命盤性格與事業財務分析生成器
紫微斗數排盤工具,輸入生日與時辰,自動生成完整命盤分析提示(Prompt)。結合最專業紫微理論與 AI 助力,助你深入解析性格、事業、財務與人際課題。免費使用,適合命理師及紫微愛好者。
PixAI Prompt 組合器|快速打造可用於 AI 繪圖的語言拼圖
使用 PixAI 卻不會寫 prompt?這個工具幫你一鍵組裝角色、表情、風格語彙,輸出高品質繪圖提示語句(Prompt),可直接貼入 PixAI 使用。適合插畫師、創作者、AI 新手與 VTuber 角色開發者。