程式碼結構 - 現代 JavaScript 教學

我們首先要學習的是程式碼的組成要素。

陳述句

陳述句是執行動作的語法結構和指令。

我們已經看過一個陳述句，alert('Hello, world!')，它會顯示訊息「Hello, world!」。

我們的程式碼中可以有任意數量的陳述句。陳述句可以用分號分隔。

例如，這裡我們將「Hello World」拆成兩個警示

alert('Hello'); alert('World');

通常，陳述句會寫在不同的行，以提高程式碼的可讀性

alert('Hello');
alert('World');

在大部分情況下，當存在換行時，分號可以省略。

這樣也可以

alert('Hello')
alert('World')

在這裡，JavaScript 將換行解釋為「隱含」的分號。這稱為自動分號插入。

在大部分情況下，換行表示分號。但「大部分情況下」並不表示「總是」！

有些情況下，換行並不表示分號。例如

alert(3 +
1
+ 2);

程式碼會輸出 6，因為 JavaScript 在這裡沒有插入分號。直覺上很明顯，如果該行以加號 "+" 結尾，則表示「未完成的表達式」，因此那裡的分號是不正確的。而在這種情況下，這會照預期運作。

但有時候 JavaScript「無法」在真正需要分號的地方假設一個分號。

在這種情況下發生的錯誤很難找到並修復。

如果你有興趣看到此類錯誤的具體範例，請查看此程式碼

alert("Hello");

[1, 2].forEach(alert);

現在還不需要考慮大括號 [] 和 forEach 的含義。我們稍後會研究它們。現在，只要記住執行程式碼的結果：它會顯示 Hello，然後是 1，然後是 2。

現在讓我們移除 alert 後面的分號

alert("Hello")

[1, 2].forEach(alert);

與上述程式碼相比，只有一個字元不同：第一行結尾的分號消失了。

如果我們執行此程式碼，只會顯示第一個 Hello（而且會有一個錯誤，你可能需要開啟主控台才能看到它）。沒有數字了。

這是因為 JavaScript 沒有在方括號 [...] 之前假設一個分號。因此，最後一個範例中的程式碼被視為單一陳述式。

以下是引擎看到它的方式

alert("Hello")[1, 2].forEach(alert);

看起來很奇怪，對吧？這種合併在這種情況下是錯誤的。我們需要在 alert 後面加上分號才能讓程式碼正確執行。

在其他情況下也可能發生這種情況。

我們建議在陳述式之間加上分號，即使它們由換行符號分隔。這個規則被社群廣泛採用。讓我們再次注意 - 有可能 在大部分時間省略分號。但對初學者來說，使用它們更安全。

隨著時間的推移，程式會變得越來越複雜。有必要加入描述程式碼作用和原因的註解。

註解可以放入腳本的任何地方。它們不會影響其執行，因為引擎會忽略它們。

單行註解以兩個正斜線字元 // 開頭。

該行的其餘部分是註解。它可以佔用自己的一整行，或跟在陳述式之後。

就像這裡

// This comment occupies a line of its own
alert('Hello');

alert('World'); // This comment follows the statement

多行註解以正斜線和星號 /* 開頭，並以星號和正斜線 */ 結尾。

像這樣

/* An example with two messages.
This is a multiline comment.
*/
alert('Hello');
alert('World');

註解的內容會被忽略，所以如果我們在 /* … */ 中放入程式碼，它不會執行。

有時暫時停用程式碼的一部分會很方便

/* Commenting out the code
alert('Hello');
*/
alert('World');

在大部分編輯器中，可透過按下 Ctrl+/ 熱鍵為單行註解加上註解，而 Ctrl+Shift+/ 類似，可為多行註解加上註解（選取一段程式碼並按下熱鍵）。對於 Mac，請嘗試使用 Cmd 取代 Ctrl，以及 Option 取代 Shift。

不得在另一個 /*...*/ 內部有 /*...*/。

此類程式碼會因為錯誤而中斷

/*
  /* nested comment ?!? */
*/
alert( 'World' );

請不要猶豫為您的程式碼加上註解。

註解會增加整體程式碼大小，但這完全不是問題。有許多工具會在發佈到生產伺服器之前縮小程式碼。它們會移除註解，因此它們不會出現在工作腳本中。因此，註解完全不會對生產造成負面影響。

稍後在教學課程中，將會有一個章節程式碼品質，其中也會說明如何撰寫更好的註解。