CoffeeScript 學習筆記：運算元 與 條件陳述

這次介紹的主題是很常用的if和switch，讓我們看看CoffeeScript如何呈現吧。

運算元

首先要介紹的是運算元，我們知道JavaScript有 == 和 === 的區別，但是基本上建議大家都使用 === 取代 == ，因為 === 會去判別變數類別，而 == 較不嚴謹，所以在某些情況會出現意想不到的錯誤，例如：數字１等於字串１等等。
而在CoffeeScript裡，一律都是編譯成 === ，以下將運算元列表給各位參考：

• 左邊為CoffeeScript，右邊為JavaScript
  • ==    等於    ===
  • !=    等於    !==
  • not    等於    !
  • and    等於    &&
  • or    等於    ||
  • true, yes, on    等於    true
  • false, no, off   等於    false

條件陳述式

瞭解了運算元之後，可以來開始看看 if 和 switch 了！

if 陳述式

在CoffeeScript裡，if的寫法十分自由，以下會都列出來，至於是否真的要使用，我覺得還是看每個人的習慣，以下先一一列出來寫法：

沒 else 的三種寫法

JavaScript

if (age > 18){
    alert("I am over 18!");
}

CoffeeScript

#第一種寫法：類似JavaScript寫法去掉括號
if age > 18
    alert "I am over 18!"
#第二種寫法：濃縮成一行，result在前
alert "I am over 18!" if age > 18

#第三種寫法：濃縮成一行，result在後
if age > 18 then alert "I am over 18!"

個人比較喜歡的是result在後的寫法，與本來寫JavaScript的習慣比較相近，但重點還是統一寫法，盡量不要一下用第二種、一下用第三種，反而會造成程式碼閱讀上的困難。

有 else 的兩種寫法

JavaScript

if (age > 18){
    alert("I am over 18!");
} else {
    alert("I am younger than 18!");
}

CoffeeScript

#第一種寫法：類似JavaScript寫法去掉括號
if age > 18
    alert "I am over 18!"
else
    alert "I am younger than 18!"
#第二種寫法：濃縮成一行
if age > 18 then alert "I am over 18!" else alert "I am younger than 18!"

連續比較

JavaScript

if ( 2 < number && number < 10){
    alert("Number is between 2 and 10.")
}

CoffeeScrupt

if 2 < number < 10
    alert "Number is between 2 and 10."

其他 if 範例

JavaScript

//Example 1
if (firstCheck === false && secondCheck === false){
    alert("Fire the Hsiung Feng III missle!"); //發射雄風三型
//Example 2
if (!firstCheck && !secondCheck){
    alert("Fire the Hsiung Feng III missle!");
//Example 3
if (!short){
    alert("I am not short!");
}

CoffeeScript

#Example 1
if firstCheck is no and secondCheck is no
    alert "Fire the Hsiung Feng III missle!"
#Example 2
if not fisrtCheck and not secondCheck
    alert "Fire the Hsiung Feng III missle!"
#Example 3
#if not 也可以寫成 unless
if not short then alert "I am not short!"
unless short then alert "I am not short!"

Switch 陳述式

JavaScript

var food = prompt("What do you want to eat?");
switch(food){
    case "cookie":
        alert("Here is your cookies!");
    case "candy":
        alert("No! You can't have candy!");
    case "coke":
        alert("Yummy!");
    default:
        alert("I don't know what are you talking about.");
}

CoffeeScript

food = prompt "What do you want to eat?"
switch food
    when "cookie" then alert "Here is your cookies!"
    when "candy" then alert "No! You can't have candy!"
    when "coke" then alert "Yummy!"
    else alert "I don't know what are you talking about."

檢查存在

檢查變數是否存在

我們時常會為了檢查變數是否存在而寫一長串了 if 來判別，在 CoffeeScript 裡只要一個？就解決囉！

JavaScript

//Example 1
if(typeof coffee !== "undefined" && coffee !== null){
    alert("My coffee is here!"); //coffee存在
}
//Example 2
if(typeof coffee === "undefined" || coffee === null){
    coffee = 1; //coffee不存在或null
}
//Example 3
var coffee = null;
if(coffee == null){
    coffee = 1;
}

CoffeeScript

#Example 1
if coffee?
    alert "My coffee is here!"
#Example 2
if not coffee?
    coffee = 1
unless coffee?
    coffee = 1
#Example 3
#需要先定義過coffee
coffee = null
coffee ?= 1

檢查物件是否存在

JavaScript

if (typeof coffee !== "undefined" && coffee !== null) {
    coffee.drink();
}

CoffeeScript

if coffee? then coffee.drink()
#或者縮寫成
coffee?.drink()

檢查函式是否存在

如果該函式存在，則執行該函式

JavaScript

if (typeof student.learn === "function") {
    student.learn();
}

CoffeeScript

student.learn?()
#也可以連續檢查並執行
student.learn?().sleep?()