[JS 文章收集] 用 Node.js 學 JavaScript 語言（2）基本控制

Source From Here 
簡介 
在上一期當中，我們介紹了 node.js 的安裝與使用方式，文章連結如下： 

* 用 Node.js 學 JavaScript 語言（1）簡介與安裝

在本期當中，我們將繼續介紹 JavaScript 的語法，包含控制邏輯與迴圈等等。 

if 判斷 
JavaScript 的 JavaScript If...Else Statements，和 C 語言幾乎一樣。舉例而言，下列程式可以根據 score 所設的定分數，來印出「及格」或「不及格」的訊息，只要大於 60 分，就算是及格了。 
- 檔案：score.js 

view plaincopy to clipboardprint?

1. #!/usr/bin/env node  
2. var score = 61;  
3.   
4. if (score >= 60)  
5.   console.log("及格");  
6. else  
7.   console.log("不及格");  

執行結果: 

# chmod +x score.js
# ./score.js
及格

底下為更完善的 if/else 範例: 
- rank.js 

view plaincopy to clipboardprint?

1. #!/usr/bin/env node  
2.   
3. var scores = [59, 61, 72, 83, 94]  
4.   
5.   
6. for(var i=0; i
7. {  
8.     if (scores[i] < 60)  
9.         console.log(scores[i]+' 不及格');  
10.     else if(scores[i] < 70)  
11.         console.log(scores[i]+' 尚可');  
12.     else if(scores[i] < 80)  
13.         console.log(scores[i]+' 不錯');  
14.     else if(scores[i] < 90)  
15.         console.log(scores[i]+' 很好');  
16.     else  
17.         console.log(scores[i]+' 棒');  
18. }  

執行結果: 

# node rank.js
59 不及格
61 尚可
72 不錯
83 很好
94 棒

兩種相等判斷 
在 javascript 當中，比較特別的一件事情是，是否相等的判斷通常有兩種，一種是兩個等號的 `==` ，另一種是參個等號的 `===`。這兩種判斷到底差別在哪裡呢？答案是：三個等號者會判斷型態是否相等，因此是嚴格的相等，而兩個等號者不會判斷型態，因此是不嚴格的相等，以下範例說明了兩者的差異: 
- equals.js 

view plaincopy to clipboardprint?

1. #!/usr/bin/env node  
2. console.log('"30"==30 is ', "30" == 30);  
3. console.log('"30"!=30 is ', "30" != 30);  
4. console.log('"30"===30 is ', "30" === 30);  
5. console.log('"30"!==30 is ', "30" !== 30);  

執行結果： 

# node equals.js
"30"==30 is true
"30"!=30 is false
"30"===30 is false
"30"!==30 is true

while 迴圈 
JavaScript 的迴圈與 C 是非常像的，包含 while 與 for 語句都幾乎是一樣的。以下是一個 JavaScript 的 while 迴圈範例。 
- while.js 

view plaincopy to clipboardprint?

1. #!/usr/bin/env node  
2. i = 1;  
3. while (i <= 10)  
4. {  
5.     console.log("i=", i);  
6.     i = i + 1  
7. }  

執行結果： 

# node while.js
i= 1
i= 2
i= 3
i= 4
i= 5
i= 6
i= 7
i= 8
i= 9
i= 10

如果我們在從 1 數到 10 的過程當中，把變數 i 進行累加，那麼就可以得到累加總和， 1+..+10 = 55 的結果如下。 
- whilesum.js 

view plaincopy to clipboardprint?

1. #!/usr/bin/env node  
2. sum=0;  
3. i=1;  
4. while (i<=10) {  
5.   sum = sum + i;  
6.   console.log("i=", i, " sum=", sum);  
7.   i = i + 1;  
8. }  

執行結果: 

# node whilesum.js
i= 1 sum= 1
i= 2 sum= 3
i= 3 sum= 6
i= 4 sum= 10
i= 5 sum= 15
i= 6 sum= 21
i= 7 sum= 28
i= 8 sum= 36
i= 9 sum= 45
i= 10 sum= 55

for 迴圈 
接著來看 JS For loop 範例: 
- for.js 

view plaincopy to clipboardprint?

1. #!/usr/bin/env node  
2. for (i=1;i<=10;i++) {  
3.   console.log("i=", i);  
4. }  

執行結果： 

# node for.js
i= 1
i= 2
i= 3
i= 4
i= 5
i= 6
i= 7
i= 8
i= 9
i= 10

當然、同樣的事情也可以用 for 迴圈來做，這種寫法會更短更簡潔，以下是採用 for 進行 1+…+10 的範例: 
- sum.js 

view plaincopy to clipboardprint?

1. #!/usr/bin/env node  
2. sum=0;  
3. for (i=1;i<=10;i++) {  
4.   sum = sum + i;  
5.   console.log("i=", i, " sum=", sum);  
6. }  

執行結果： 

# node sum.js
i= 1 sum= 1
i= 2 sum= 3
i= 3 sum= 6
i= 4 sum= 10
i= 5 sum= 15
i= 6 sum= 21
i= 7 sum= 28
i= 8 sum= 36
i= 9 sum= 45
i= 10 sum= 55

另外、 javascript 也從 C 語言那裏繼承了 continue 與 break 等語句，遇到 continue 時會回到迴圈開頭，忽略後面語句。而遇到 break 時則會跳出迴圈。 
- forbreak.js 

view plaincopy to clipboardprint?

1. #!/usr/bin/env node  
2. for (i=1;i<=10;i++) {  
3.   if (i == 3) continue;  
4.   if (i == 8) break;  
5.   console.log("i="+i);  
6. }  

執行結果： 

# node forbreak.js
i=1
i=2
i=4
i=5
i=6
i=7

陣列 
JavaScript 的陣列宣告非常簡單，就是用 `[...]` 所框起來的一連串資料，或者您也可以用 `new Array()` 語句來建立一個空的陣列，而且可以用 length 屬性來取得陣列大小。 
- array.js 

view plaincopy to clipboardprint?

1. var a=[1,6,2,5,3,6,1];  
2.   
3. for (i=0;i
4.   console.log("a[%d]=%d", i, a[i]);  
5. }  

執行結果: 

# node array.js
a[0]=1
a[1]=6
a[2]=2
a[3]=5
a[4]=3
a[5]=6
a[6]=1

當然、javascript 有些語法是 C 語言所沒有的，像是 JavaScript 的 foreach 語句採用 `for (i in c)` 這樣的語法，其中的 c 必須是個陣列或容器，而 i 則是索引值 (注意、不是內容，是索引值)，以下是這種語句的一個範例。 
- foreach.js 

view plaincopy to clipboardprint?

1. var a=[1,6,2,5,3,6,1];  
2.   
3. for (i in a) {  
4.   console.log("a[%d]=%d", i, a[i]);  
5. }  

執行結果: 

# node foreach.js
a[0]=1
a[1]=6
a[2]=2
a[3]=5
a[4]=3
a[5]=6
a[6]=1

字典 (物件) 
雖然上述這些 JavaScript 的語法很像 C 語言，但是 JavaScript 本質上仍然是個動態語言，其特性比較像 Python、 Ruby 等語言，因此預設就有提供更高階的資料結構，其中最重要的一個就是字典 (dictonary)，字典中的基本元素是 (key, value) 的配對，我們只要將 key 傳入就可以取得 value 的値，以下是一個 JavaScript 的字典範例。 
- dict.js 

view plaincopy to clipboardprint?

1. var dict={ name:"john", age:30 };  
2.   
3. dict["email"] = "john@gmail.com";  
4. dict.tel = "02-12345678";  
5.   
6. for (var key in dict) {  
7.   console.log("key=", key, " value=", dict[key]);  
8. }  
9.   
10. console.log("age=", dict.age);  
11. console.log("birthday=", dict["birthday"]);  
12. console.log("Before dict.tel=", dict.tel)  
13. delete dict.tel // Delete key='tel'  
14. console.log("After dict.tel=", dict.tel)  

執行結果: 

# node dict.js
key= name value= john
key= age value= 30
key= email value= john@gmail.com
key= tel value= 02-12345678
age= 30
birthday= undefined
Before dict.tel= 02-12345678
After dict.tel= undefined

結語 
在本章中，我們介紹了「變數、運算式、if 判斷式, for 與 while 迴圈」，還有「陣列與字典物件」等基礎語法，學會這些語法之後，就可以寫一些基礎的小程式了。 但是若要寫出更好、更模組化的程式，那就還需要學會「函數與物件導向」的寫法，這將是下一期的主題。 

Supplement 
* 後續 >> 用 Node.js 學 JavaScript 語言（3）函數、參數與閉包 
* W3CSchool - JS While Loop 
* W3CSchool - For Loop 
* W3CSchool - JavaScript Arrays 
* W3CSchool - JavaScript Array Methods 
* JavaScript 核心 : 這些東西不簡單 (型態轉換) 
* JavaScript 核心 : 這些東西不簡單 (物件) 
* MDN web docs - Loops and iteration