「JavaScript 教程」入門篇-JavaScript 的基本語法

// 這是單行註釋/*
這是
多行

註釋
*/

此外,由於歷史上 JavaScript 可以兼容 HTML 代碼的註釋,所以也被視為合法的單行註釋。

x = 1;  x = 3;

上面代碼中,只有x = 1會執行,其他的部分都被註釋掉了。

需要注意的是,-->只有在行首,才會被當成單行註釋,否則會當作正常的運算。

function countdown(n) { 
while (n --> 0) console.log(n);
}
countdown(3)// 2// 1// 0

上面代碼中,n --> 0實際上會當作n-- > 0,因此輸出2、1、0。

5、區塊

JavaScript 使用大括號,將多個相關的語句組合在一起,稱為“區塊”(block)。

對於var命令來說,JavaScript 的區塊不構成單獨的作用域(scope)。

{ var a = 1;
}

a // 1

上面代碼在區塊內部,使用var命令聲明並賦值了變量a,然後在區塊外部,變量a依然有效,區塊對於var命令不構成單獨的作用域,與不使用區塊的情況沒有任何區別。在 JavaScript 語言中,單獨使用區塊並不常見,區塊往往用來構成其他更復雜的語法結構,比如for、if、while、function等。

6、條件語句

JavaScript 提供if結構和switch結構,完成條件判斷,即只有滿足預設的條件,才會執行相應的語句。

6.1、if 結構

if結構先判斷一個表達式的布爾值,然後根據布爾值的真偽,執行不同的語句。所謂布爾值,指的是 JavaScript 的兩個特殊值,true表示真,false表示偽。

if (布爾值)
語句;
// 或者if (布爾值) 語句;

上面是if結構的基本形式。需要注意的是,“布爾值”往往由一個條件表達式產生的,必須放在圓括號中,表示對錶達式求值。如果表達式的求值結果為true,就執行緊跟在後面的語句;如果結果為false,則跳過緊跟在後面的語句。

if (m === 3)
m = m + 1;

上面代碼表示,只有在m等於3時,才會將其值加上1。

這種寫法要求條件表達式後面只能有一個語句。如果想執行多個語句,必須在if的條件判斷之後,加上大括號,表示代碼塊(多個語句合併成一個語句)。

if (m === 3) {
m += 1;
}

建議總是在if語句中使用大括號,因為這樣方便插入語句。

注意,if後面的表達式之中,不要混淆賦值表達式(=)、嚴格相等運算符(===)和相等運算符(==)。尤其是賦值表達式不具有比較作用。

var x = 1;var y = 2;
if (x = y) { console.log(x);
}// "2"

上面代碼的原意是,當x等於y的時候,才執行相關語句。但是,不小心將嚴格相等運算符寫成賦值表達式,結果變成了將y賦值給變量x,再判斷變量x的值(等於2)的布爾值(結果為true)。

這種錯誤可以正常生成一個布爾值,因而不會報錯。為了避免這種情況,有些開發者習慣將常量寫在運算符的左邊,這樣的話,一旦不小心將相等運算符寫成賦值運算符,就會報錯,因為常量不能被賦值。

if (x = 2) {
// 不報錯
if (2 = x) {
// 報錯

至於為什麼優先採用“嚴格相等運算符”(===),而不是“相等運算符”(==),請參考《運算符》章節。

6.2、if...else 結構

if代碼塊後面,還可以跟一個else代碼塊,表示不滿足條件時,所要執行的代碼。

if (m === 3) { 
// 滿足條件時,執行的語句
}
else {
// 不滿足條件時,執行的語句
}

上面代碼判斷變量m是否等於3,如果等於就執行if代碼塊,否則執行else代碼塊。

對同一個變量進行多次判斷時,多個if...else語句可以連寫在一起。

if (m === 0) { 
// ...}
else if (m === 1) {
// ...}
else if (m === 2) {
// ...}
else { // ...}

else代碼塊總是與離自己最近的那個if語句配對。

var m = 1;
var n = 2;
if (m !== 1)
if (n === 2)
console.log('hello');
else console.log('world');

上面代碼不會有任何輸出,else代碼塊不會得到執行,因為它跟著的是最近的那個if語句,相當於下面這樣。

if (m !== 1) { 
if (n === 2)
{ console.log('hello');
}
else { console.log('world');
}
}

如果想讓else代碼塊跟隨最上面的那個if語句,就要改變大括號的位置。

if (m !== 1) { 
if (n === 2) {
console.log('hello');
}
}
else { console.log('world');
}// world


6.3、switch 結構

多個if...else連在一起使用的時候,可以轉為使用更方便的switch結構。

switch (fruit) { 
case "banana": // ...
break;
case "apple": // ...
break;
default: // ...}

上面代碼根據變量fruit的值,選擇執行相應的case。如果所有case都不符合,則執行最後的default部分。需要注意的是,每個case代碼塊內部的break語句不能少,否則會接下去執行下一個case代碼塊,而不是跳出switch結構。

var x = 1;
switch (x) {
case 1:
console.log('x 等於1');
case 2:
console.log('x 等於2');
default: console.log('x 等於其他值');
}// x等於1// x等於2// x等於其他值

上面代碼中,case代碼塊之中沒有break語句,導致不會跳出switch結構,而會一直執行下去。正確的寫法是像下面這樣。

switch (x) {  

case 1: console.log('x 等於1');
break;
case 2: console.log('x 等於2');
break;
default: console.log('x 等於其他值');
}

switch語句部分和case語句部分,都可以使用表達式。

switch (1 + 3) { case 2 + 2:
f(); break; default:
neverHappens();
}

上面代碼的default部分,是永遠不會執行到的。

需要注意的是,switch語句後面的表達式,與case語句後面的表示式比較運行結果時,採用的是嚴格相等運算符(===),而不是相等運算符(==),這意味著比較時不會發生類型轉換。

var x = 1;
switch (x) {
case true: console.log('x 發生類型轉換');
break;
default: console.log('x 沒有發生類型轉換');
}// x 沒有發生類型轉換

上面代碼中,由於變量x沒有發生類型轉換,所以不會執行case true的情況。這表明,switch語句內部採用的是“嚴格相等運算符”,詳細解釋請參考《運算符》一節。

6.4、三元運算符 ?:

JavaScript 還有一個三元運算符(即該運算符需要三個運算子)?:,也可以用於邏輯判斷。

(條件) ? 表達式1 : 表達式2

上面代碼中,如果“條件”為true,則返回“表達式1”的值,否則返回“表達式2”的值。

var even = (n % 2 === 0) ? true : false;

上面代碼中,如果n可以被2整除,則even等於true,否則等於false。它等同於下面的形式。

var even;if (n % 2 === 0) {
even = true;
} else {
even = false;
}

這個三元運算符可以被視為if...else...的簡寫形式,因此可以用於多種場合。

var myVar;console.log(
myVar ? 'myVar has a value' : 'myVar does not have a value')
// myVar does not have a value

上面代碼利用三元運算符,輸出相應的提示。

var msg = '數字' + n + '是' + (n % 2 === 0 ? '偶數' : '奇數'); 

上面代碼利用三元運算符,在字符串之中插入不同的值。

7、循環語句

循環語句用於重複執行某個操作,它有多種形式。

7.1、while 循環

While語句包括一個循環條件和一段代碼塊,只要條件為真,就不斷循環執行代碼塊。

while (條件)
語句;// 或者while (條件) 語句;

while語句的循環條件是一個表達式,必須放在圓括號中。代碼塊部分,如果只有一條語句,可以省略大括號,否則就必須加上大括號。

while (條件) {
語句;
}

下面是while語句的一個例子。

var i = 0;while (i < 100) { console.log('i 當前為:' + i);
i = i + 1;
}

上面的代碼將循環100次,直到i等於100為止。

下面的例子是一個無限循環,因為循環條件總是為真。

while (true) { console.log('Hello, world');
}


7.2、for 循環

for語句是循環命令的另一種形式,可以指定循環的起點、終點和終止條件。它的格式如下。

for (初始化表達式; 條件; 遞增表達式)
語句// 或者for (初始化表達式; 條件; 遞增表達式) {
語句
}

for語句後面的括號裡面,有三個表達式。

  • 初始化表達式(initialize):確定循環變量的初始值,只在循環開始時執行一次。
  • 條件表達式(test):每輪循環開始時,都要執行這個條件表達式,只有值為真,才繼續進行循環。
  • 遞增表達式(increment):每輪循環的最後一個操作,通常用來遞增循環變量。

下面是一個例子。

var x = 3;for (var i = 0; i < x; i++) { console.log(i);
}// 0// 1// 2

上面代碼中,初始化表達式是var i = 0,即初始化一個變量i;測試表達式是i < x,即只要i小於x,就會執行循環;遞增表達式是i++,即每次循環結束後,i增大1。

所有for循環,都可以改寫成while循環。上面的例子改為while循環,代碼如下。

var x = 3;var i = 0;while (i < x) { console.log(i);
i++;
}

for語句的三個部分(initialize、test、increment),可以省略任何一個,也可以全部省略。

for ( ; ; ){ console.log('Hello World');
}

上面代碼省略了for語句表達式的三個部分,結果就導致了一個無限循環。

7.3、do...while 循環

do...while循環與while循環類似,唯一的區別就是先運行一次循環體,然後判斷循環條件。

do
語句while (條件);// 或者do {
語句
} while (條件);

不管條件是否為真,do...while循環至少運行一次,這是這種結構最大的特點。另外,while語句後面的分號注意不要省略。

下面是一個例子。

var x = 3;var i = 0;do { console.log(i);
i++;
} while(i < x);


7.4、break 語句和 continue 語句

break語句和continue語句都具有跳轉作用,可以讓代碼不按既有的順序執行。

break語句用於跳出代碼塊或循環。

var i = 0;while(i < 100) { console.log('i 當前為:' + i);
i++; if (i === 10) break;
}

上面代碼只會執行10次循環,一旦i等於10,就會跳出循環。

for循環也可以使用break語句跳出循環。

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

上面代碼執行到i等於3,就會跳出循環。

continue語句用於立即終止本輪循環,返回循環結構的頭部,開始下一輪循環。

var i = 0;while (i < 100){
i++; if (i % 2 === 0) continue; console.log('i 當前為:' + i);
}

上面代碼只有在i為奇數時,才會輸出i的值。如果i為偶數,則直接進入下一輪循環。

如果存在多重循環,不帶參數的break語句和continue語句都只針對最內層循環。

7.5、標籤(label)

JavaScript 語言允許,語句的前面有標籤(label),相當於定位符,用於跳轉到程序的任意位置,標籤的格式如下。

label:
語句

標籤可以是任意的標識符,但不能是保留字,語句部分可以是任意語句。

標籤通常與break語句和continue語句配合使用,跳出特定的循環。

top: for (var i = 0; i < 3; i++){ 
for (var j = 0; j < 3; j++){
if (i === 1 && j === 1) break top;
console.log('i=' + i + ', j=' + j);
}
}// i=0, j=0// i=0, j=1// i=0, j=2// i=1, j=0

上面代碼為一個雙重循環區塊,break命令後面加上了top標籤(注意,top不用加引號),滿足條件時,直接跳出雙層循環。如果break語句後面不使用標籤,則只能跳出內層循環,進入下一次的外層循環。

標籤也可以用於跳出代碼塊。

foo: { console.log(1); 
break
foo; console.log('本行不會輸出');
}console.log(2);// 1// 2

上面代碼執行到break foo,就會跳出區塊。

continue語句也可以與標籤配合使用。

top: 
for (var i = 0; i < 3; i++){
for (var j = 0; j < 3; j++){
if (i === 1 && j === 1) continue top;
console.log('i=' + i + ', j=' + j);
}
}
// i=0, j=0
// i=0, j=1
// i=0, j=2

// i=1, j=0
// i=2, j=0
// i=2, j=1
// i=2, j=2

上面代碼中,continue命令後面有一個標籤名,滿足條件時,會跳過當前循環,直接進入下一輪外層循環。如果continue語句後面不使用標籤,則只能進入下一輪的內層循環。


分享到:


相關文章: