現代 JavaScript 教程 — 代碼結構

代碼結構

咱們將要學習的第一個內容就是構建代碼塊。

語句

語句是執行操做的語法結構和命令。

咱們已經見過了 alert('Hello, world!') 這樣能夠用來顯示消息的語句。

咱們能夠在代碼中編寫任意數量的語句。語句之間可使用分號進行分割。

例如，咱們將 "Hello World" 這條信息一分爲二：

alert('Hello'); alert('World');
複製代碼

一般，每條語句獨佔一行，以提升代碼的可讀性：

alert('Hello');
alert('World');
複製代碼

分號

當存在分行符（line break）時，在大多數狀況下能夠省略分號。

下面的代碼也是能夠運行的：

alert('Hello')
alert('World')
複製代碼

在這，JavaScript 將分行符理解成「隱式」的分號。這也被稱爲 自動分號插入。

在大多數狀況下，換行意味着一個分號。可是「大多數狀況」並不意味着「老是」！

有不少換行並非分號的例子，例如：

alert(3 +
1
+ 2);
複製代碼

代碼輸出 6，由於 JavaScript 並無在這裏插入分號。顯而易見的是，若是一行以加號 "+" 結尾，那麼這是一個「不完整的表達式」，不須要分號。因此，這個例子獲得了預期的結果。

但存在 JavaScript 沒法肯定是否真的須要自動插入分號的狀況。

這種狀況下發生的錯誤是很難被找到和解決的。

一個錯誤的例子

若是你好奇地想知道一個這種錯誤的具體例子，那你能夠看看下面這段代碼：

[1, 2].forEach(alert)
複製代碼

你不須要考慮方括號 [] 和 forEach 的含義，如今它們並不重要，以後咱們會學習它們。讓咱們先記住這段代碼的運行結果：先顯示 1，而後顯示 2。

如今咱們在代碼前面插入一個 alert 語句，而且不加分號：

alert("There will be an error")

[1, 2].forEach(alert)
複製代碼

如今，若是咱們運行代碼，只有第一個 alert 語句的內容被顯示了出來，隨後咱們收到了一個錯誤！

可是，若是咱們在第一個 alert 語句末尾加上一個分號，就工做正常了：

alert("All fine now");

[1, 2].forEach(alert)
複製代碼

如今，咱們能獲得 "All fine now"，而後是 1 和 2。

出現無分號變量（variant）的錯誤，是由於 JavaScript 並不會在方括號 [...] 前添加一個隱式的分號。

因此，由於沒有自動插入分號，第一個例子中的代碼被視爲了一條簡單的語句，咱們從引擎看到的是這樣的：

alert("There will be an error")[1, 2].forEach(alert)
複製代碼

但它應該是兩條語句，而不是一條。這種狀況下的合併是不對的，因此纔會形成錯誤。諸如此類，還有不少。

即便語句被換行符分隔了，咱們依然建議在它們之間加分號。這個規則被社區普遍採用。咱們再次強調一下 —— 大部分時候能夠省略分號，可是最好不要省略分號，尤爲對新手來講。

註釋

隨着時間推移，程序變得愈來愈複雜。爲代碼添加 註釋 來描述它作了什麼和爲何要這樣作，變得很是有必要了。

你能夠在腳本的任何地方添加註釋，它們並不會影響代碼的執行，由於引擎會直接忽略它們。

單行註釋以兩個正斜槓字符 // 開始。

這一行的剩餘部分是註釋。它可能獨佔一行或者跟隨在一條語句的後面。

就像這樣：

// 這行註釋獨佔一行
alert('Hello');

alert('World'); // 這行註釋跟隨在語句後面
複製代碼

多行註釋以一個正斜槓和星號開始 "/*" 並以一個星號和正斜杆結束 "*/"。

就像這樣:

/* 兩個消息的例子。 這是一個多行註釋。 */
alert('Hello');
alert('World');
複製代碼

註釋的內容被忽略了，因此若是咱們在 /* ... */ 中放入代碼，並不會執行。

有時候，能夠很方便地臨時禁用代碼：

/* 註釋代碼 alert('Hello'); */
alert('World');
複製代碼

使用快捷鍵

在大多數的編輯器中，一行代碼可使用 key:Ctrl+/ 熱鍵進行單行註釋，諸如 key:Ctrl+Shift+/ 的熱鍵能夠進行多行註釋（選擇代碼，而後按下熱鍵）。對於 Mac 電腦，應使用 key:Cmd 而不是 key:Ctrl。

不支持註釋嵌套！

不要在 /*...*/ 內嵌套另外一個 /*...*/。

下面這段代碼報錯而沒法執行：

/*
  /* 嵌套註釋 ?!? */
*/
alert( 'World' );
複製代碼

對你的代碼進行註釋，這還有什麼可猶豫的！

註釋會增長代碼總量，但這一點也不是什麼問題。有不少工具能夠幫你在把代碼部署到服務器以前縮減代碼。這些工具會移除註釋，這樣註釋就不會出如今發佈的腳本中。因此，註釋對咱們的生產沒有任何負面影響。

在後面的教程中，會有一章 代碼質量 的內容解釋如何更好地寫註釋。

本教程首發於微信公衆號「技術漫談」。

---

現代 JavaScript 教程：開源的現代 JavaScript 從入門到進階的優質教程。React 官方文檔推薦，與 MDN 並列的 JavaScript 學習教程。

在線免費閱讀：zh.javascript.info

---

掃描下方二維碼，關注微信公衆號「技術漫談」，訂閱更多精彩內容。