iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
0
自我挑戰組

草頭黃小姐的 30 天 JavaScript 自學小本本系列 第 7

Day 07 JavaScript 的流程控制

在 JavaScript 中執行流程,通常會先執行前面的程式碼,按照順序執行下去,如果我們加了一些條件,它當中的邏輯是怎麼運行的呢?那就跟著草頭黃小姐的腳步來了解一下吧:)

如果這樣,不然就那樣

我們就從程式碼來了解如果怎麼樣,不然就那樣來意思吧!

var age = 20;

if ( age >= 18 ){
  console.log('已成年');
}

那我們印出來的結果會是:

第一行的意思:這裡的意思是,我指定一個 age 的值為 20
第二行的意思:如果年紀大於或等於 18
第三行的意思:請印出“已成年”

但如果我們把第一行的年紀換成 10 歲,其實是不會執行任何事情唷!

其實 if 常會跟著 else 來寫,以上這題要讓它執行,可以怎麼做呢?

var age = 20;

if ( age >= 18 ){
  console.log('已成年');
} else{
  console.log('未成年');
}

這裡的意思是說,如果大於等於 18 就印出 已成年,否則就印出未成年。

如果這樣,不然就這樣,要不然就那樣

有的時候你可能不一定有兩種選擇,要是有三種以上的選擇!
我們從下面這個例子解釋

var age = 5;

if ( age >= 18 ){
  console.log('已成年');
} else if ((age <= 12) && (age>18)){
  console.log('青少年')
} else{
  console.log('小朋友')
}

看到了嗎?只要在第四行的條件式上的 else 後方加上一個 if,就會變成不然就怎麼樣的意思,&& 在這裡表示 and 的意思。

三元運算子

我們用最直接的例子來讓大家看何謂三元運算子:
首先還記得我們今天一直用到的例子

var age=30;

var isAdult;

if (age>=18){
  isAdult = true;
}else{
  isAdult = false;
}

我們要來用三元運算子來改寫看看

var age =30;

var isAdult = (age>=18)?true:false;

第二行的意思是如果 age>=18,如果成立給 true,如果不成立就給後面這個值。
這兩種寫法沒有誰比較優勢,一切回到程式碼的可讀性,如果你看習慣第一種,那就不一定要寫第二種。不需要為了精簡而去寫那種可能要多花一些時間才看懂的語法。

更龜毛的狀況:如果這樣,不然就這樣,要不然就那樣,還是那樣好了...

var = 0

switch (gender){
    case 1;
    console.log(男);
    break;
    
    case 2;
    console.log(女);
    break;
    
    default;
    console.log(不想說);
    break;
}

switch 的用法就是要告訴你,符合哪樣就請跑出相對應結果。
再用 case 去分類其結果,並在尾巴加上 break,表示一個結果的結束,但還有下一種可能。

在視覺上比較有架構的整理,當流程很多的時候,用有架構整理會較易閱讀。

最後,今天的重點是,條件式其實有很多種寫法,但要謹記一個重點:你可以這樣做,但不一定要這樣做。

寫出可讀性比較高的程式碼遠比寫出精簡的程式碼來得重要:)


上一篇
Day 06 JavaScript 不同資料型態混在一起用:PART 2
下一篇
Day08 JavaScript :基礎班的函數
系列文
草頭黃小姐的 30 天 JavaScript 自學小本本30

尚未有邦友留言

立即登入留言