Day05 JavaScript 條件判斷

做選擇的時刻

程式語言中，做選擇是非常常見的一件事。例如：判斷登入者身份是否為管理員、當前設定是否為深色模式等。想像我們有一個交易系統，我們需要判斷使用者帳戶餘額是否足夠購買Apple Vison Pro。首先，我們必須認識if跟else。

if 和 else

if跟else是常見的條件判斷詞。

接下來，跟前面用console.log()印出來不一樣，這裡我們用document內建的method：write()，直接把內容印在畫面上。

加上if和else

解讀上面的指令，只有money > 10時，才會印出”你有超過十塊錢”。其他情況，也就是money <= 10時，會印出”你有少於十塊錢”。

if和else基本上就是二選一，如果if條件成立，else就完全不會執行。

可以看見if else的結構如下：

if (條件) {
條件成立做的事
} else {
條件不成立時做的事
}

分別用{}把指令包著，條件則用()括著。

if不一定要搭配else，else只是一種外加的保險。如果前面都符合了，就不會輪到else執行。

else if

如果要連續判斷好幾個條件，可以在if後接著用else if。

else if跟else有類似的特性，只要前面的條件符合了，就不會被執行。跟連續寫好多個if不同，那種情況每個if都會獨立判斷一次。

這邊的程式先判斷錢包裡是不是多於100元，不是的話接著判斷是不是大於10元。條件符合時，財產介於10-100之間。

條件

接下來我們來仔細談談if的條件，money > 10，這裡到底發生了什麼。

條件基本上就是true或是false兩種情況，也就是常聽見的boolean。如果條件是true，則if內的動作會執行。而在這邊，money > 10的回傳值就是true，所以會印出”你有超過十塊錢”。

知道這件事後，我們可以嘗試不同的條件，像是：

注意：=是用來把後方的值指定給前方的變數，==則用來判斷前後兩者是否相等，會回傳true或false，兩者是截然不同的。

為了更好理解if的條件，我們可以寫下這行毫無意義的程式。

可以看見()內的值，其實就是true或false。

但這行因為條件永遠都是true，所以下面這行一定會被執行，那直接寫document.write("這行一定會被執行")就好了，根本不需要if。

特殊條件

我們不一定要用上面的比較符號（>, ==等），有些特別的值寫在條件裡，也會被當成true或false處理。

undefined

如果有一個變數沒有被指定值，那麼電腦跟我們一樣，不會知道這個變數到底代表什麼。舉例來說，下方的number被宣告出來，但沒有用=指定數值。在JavaScript的世界裡，number現在的狀態就是undefined（未定義）。而undefined寫在條件裡會被判斷為false。

空的String

空的字串在條件裡也會被當成false。

0

數字0在條件裡也會被當成false，不是0的數字是true。

條件的其他應用

這些條件本質上就是true或false，也就是boolean（布林值）。

程式語言有許多需要條件判斷的時刻，除了剛才提到的if、else之外，常見的還有需要程式重複做一件事時。

試想，當我們要程式重複做一件事時，電腦最需要知道的就是什麼時候該停下來吧！這個時候就必須用上boolean作為條件判斷。

舉例來說，當我想在畫面上印上1-100。

我可以這樣寫：

確實可行，但真的有點太累了。

這時候我們就可以用上loop(迴圈)。

先定義了count = 1，然後在while的條件內寫下「只要count <= 100就一直執行」。

這邊的count++就是count = count + 1的簡寫。count就會從1倍更新成2，再變成3…

你會看見一串可怕的數字出現在畫面中，他的確是1-100，只是有點醜。我們幫數字加個HTML換行標籤<br>。

稍微好看多了！

總而言之，while迴圈內也用到了跟if一樣的條件判斷，諸如此類的應用還有很多，我們暫時不必一一了解，只需要先知道這些JavaScript基本架構的意涵，未來再看見任何相似的使用情境，很快就能理解、上手。

小結

從課程開始看到這，你可能會覺得枯燥乏味、不明所以。不確定這些太簡單的介紹能怎麼樣地實作出一個現實生活中的應用程式，也可能只覺得這些陌生的語法艱澀難懂。這些都沒關係，和一開始一樣，我想要強調的是()、{}、==、=等，這些具有特殊意義的符號，他們在JavaScript裡扮演骨幹的角色。嚴格來說，到現在所有的while、if你都還沒弄明白，沒關係。只要看見每個符號在JS裡被使用的情況。接下來在學習更複雜語法或是實作時，這些內容會發揮他們關鍵的作用，讓你更容易看懂一段未知的JS程式。

明天我們回頭談談function，這次要談的是Higher-Order Function（高階方程式）。

Resource

今日Codepen

連結

Credits

• Learn JavaScript: Full-Stack from Scratch — Brad Schiff
• Web Programming — Rick Huang
• https://openprocessing.org/sketch/1561900/ — Chang Wen Han
• https://chartogne-taillet.com/fr — Bruno Simon
• https://www.apple.com/apple-vision-pro/ — Apple
• https://claude.ai — Anthropic

關於我

我是Erkin, 一個網站開發者。
有任何疑問或是想勘誤的話歡迎聯繫。

• Github
• Mail
• Website
• 請杯咖啡