條件判斷/Condition

if

語法/Syntax

if (條件式為真) {
  //敘述
}

流程圖

 

範例/Example

let x = 25;
if( x > 10 ) {
    console.log('x is greater than 10');
}

if..else

語法/Syntax

if( 條件式為真/true) {
  // statement
} else { 
  // 當上面的條件式不為真(假/false)的話，執行此區塊的敘述 
}

流程圖

   

範例/Example

let x = 5;
if (x > 10) {
    console.log('x is greater than 10');
} else {
    console.log('x is less than or equal 10');
}

if.. else if … else

語法/Syntax

if (條件式1為真) {
   // statments
} else if (條件式2為真) {
  // statments
} else {
   // 以上2個條件式都不為真的話…
}

範例/Example

let a = 10, 
    b = 20;
if (a > b) {
    console.log('a is greater than b');
} else if (a < b) {
    console.log('a is less than b');
} else {
    console.log('a is equal to b');
}

三元運算式(if… else簡化寫法)

語法/Syntax

條件式 ? 運算式1 : 運算式2

範例/Example

isLoggedIn ? "Logout" : "Login";

若isLoggedIn這個布林變數是真的話，將 “Logout”值指定給isLoggedIn 變數，不為真的話，”Login”值指定給isLoggedIn 變數，也就是說isLoggedIn值是true的話，isLoggedIn = “Logout”，若isLoggedIn值是false的話，isLoggedIn = “LogIn”。  

var allowRegister = age > 18 ? true : false;

若age值大於18的話，布林值 true 指定給 allowRegister，若age值小於或等於18的話，布林值 false 指定給 allowRegister。 若敘述不止1行的話，可以用下面的方式來寫：

age > 18 ? (
    alert("OK, you can register."),
    redirectTo("register.html");
) : (
    stop = true,
    alert("Sorry, you are too young!")
);

Switch-case

語法/Syntax

switch (expression) {
    case value_1:
        statement_1;
        break;
    case value_2:
        statement_2;
        break;
    case value_3:
        statement_3;
        break;
    default:
        default_statement;
}

var day = 3;
var dayName;
switch (day) {
    case 1:
        dayName = 'Sunday';
        break;
    case 2:
        dayName = 'Monday';
        break;
    case 3:
        dayName = 'Tuesday';
        break;
    case 4:
        dayName = 'Wednesday';
        break;
    case 5:
        dayName = 'Thursday';
        break;
    case 6:
        dayName = 'Friday';
        break;
    case 7:
        dayName = 'Saturday';
        break;
    default:
        dayName = 'Invalid day';
}
console.log(dayName); //Tuesday

每一個case間若不插入break，整個程式流程會往下走，例：

var year = 2016;
var month = 2;
var dayCount;
switch (month) {
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
        dayCount = 31;
        break;
    case 4:
    case 6:
    case 9:
    case 11:
        dayCount = 30;
        break;
    case 2:
        if (((year % 4 == 0) && !(year % 100 == 0)) || (year % 400 == 0))
            dayCount = 29;
        else
            dayCount = 28;
        break;
    default:
        dayCount = -1; // invalid month
}

console.log(dayCount); //29

 

迴圈Loops

語法/Syntax

for (初始敘述，迴圈進入前所要執行的敘述; 迴圈進入的條件敘述; 每次迴圈執行完所要執行的敘述) { //迴圈區塊 }  迴圈有三種： for ，最常用的

for (var counter = 1; counter < 5; counter++) {
    console.log('Inside the loop:' + counter);
}
console.log('Outside the loop:' + counter);

/*輸出
Inside the loop:1
Inside the loop:2
Inside the loop:3
Inside the loop:4
Outside the loop:5
*/

 

for (let counter = 1; counter < 5; counter++) {
    console.log('Inside the loop:' + counter);
}
console.log('Outside the loop:' + counter);

//Uncaught ReferenceError: counter is not defined
//let所宣告的變數是區塊變數，其範圍僅限於for區塊，區塊外無法使用for裏面的區塊變數

  for的流程圖：   while

let count = 1;
while (count < 10) {
    console.log(count);
    count +=2;
}

  do while，先做一次，再判斷要不要再做…

let count = 0;
do {
    count++;
    console.log('count is:' + count);
} while (count < 10);

  break，跳出區塊 { }，直接離開一個for，while，do…while，switch

for (var i = 1; i < 10; i++) {
    if (i % 3 == 0) {
        break;
    }
}
console.log(i); // 3

  continue，略過目前的迴圈，進行下一個迴圈的進入決定… (跟break整個跳出迴圈有別)

for ( var i = 1; i < 10; i++) {
  if ( i % 2 == 0) continue;
  console.log(i);
}

/*輸出：
1
3
5
7
9
*/

參考資料：

1. JavaScript Loop Which Made Life Easy – JS Startup