JavaScript快速入門 – 決策(Decision making)與(迴圈loops)
條件判斷/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); // 3continue,略過目前的迴圈,進行下一個迴圈的進入決定… (跟break整個跳出迴圈有別)
for ( var i = 1; i < 10; i++) { if ( i % 2 == 0) continue; console.log(i); } /*輸出: 1 3 5 7 9 */參考資料: