最簡單的 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();順帶一提，不知道為什麼這一篇文章的底部評論區有問題，請移玉步到右上角的留言簿。
參考資料
相關文章
輕鬆整合 Web3：用 Privy 快速實作錢包登入與交易功能
Privy 提供一套簡單強大的 SDK，協助開發者在幾分鐘內實作錢包登入、訊息簽名與交易功能，支援多鏈、多裝置與自託管安全架構。無論你在打造 DeFi Dashboard、NFT 平台還是 Web3 遊戲入口，Privy 都能讓你快速整合區塊鏈功能，專注產品體驗。
書同文、API 同規格！Vercel AI SDK 帶你統一多模型開發流程
Vercel AI SDK 是專為開發者打造的 TypeScript 工具包，支援 React、Next.js、Vue、Svelte、Node.js 等主流框架，協助快速構建 AI 驅動應用。本文將深入剖析其統一 API、靈活架構、效能優化及多平台支援等核心亮點。
AI 寫的程式總是出錯？我用 TypeScript + 函數式設計讓它聽得懂！
你有遇過 AI 產生的程式碼完全跑不起來嗎？我曾經寫了一段計數器邏輯，結果它怎麼都看不懂。直到我用 TypeScript + 函數式設計重構，才發現——問題不在 AI，而是我們寫得不夠清楚。
用 Cloudflare KV 與 Hono 強化 ShareThis：建構彈性分享統計系統
想讓 ShareThis 分享按鈕擁有更多彈性與控制權？本教學將教你如何用 Cloudflare Workers 的 KV 資料庫與 Hono 框架，打造一個可擴充的後端 API。不只能保留原有分享數據，更支援快取、資料追蹤與訪問統計，幫助你打造真正可維護的分享統計系統。
測試速度飆升 10 倍！Vitest 帶來現代前端最強測試體驗
測試不該拖慢開發流程，而 Vitest 正是讓你「寫測試像開發一樣快」的關鍵武器。還在用 Jest 等太久？Vitest 結合 Vite 高速構建與即時測試回饋，支援 TypeScript、Vue、React 等框架，全面升級你的測試流程！
打造 Serverless 數據庫神器：Drizzle ORM x Cloudflare D1 全攻略
Drizzle ORM 結合 TypeScript 類型安全與 SQL 靈活性，是現代開發者在 Cloudflare D1 上構建 Serverless 數據庫的理想選擇。本文提供從安裝、建模到查詢的完整實戰教學。
