Javascript 代碼結(jié)構(gòu)

我們將要學(xué)習(xí)的第一個(gè)內(nèi)容就是構(gòu)建代碼塊。

語(yǔ)句

語(yǔ)句是執(zhí)行行為（action）的語(yǔ)法結(jié)構(gòu)和命令。

我們已經(jīng)見(jiàn)過(guò)了 ?alert('Hello, world!')? 這樣可以用來(lái)顯示消息的語(yǔ)句。

我們可以在代碼中編寫(xiě)任意數(shù)量的語(yǔ)句。語(yǔ)句之間可以使用分號(hào)進(jìn)行分割。

例如，我們將 “Hello World” 這條信息一分為二：

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

通常，每條語(yǔ)句獨(dú)占一行，以提高代碼的可讀性：

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

分號(hào)

當(dāng)存在換行符（line break）時(shí)，在大多數(shù)情況下可以省略分號(hào)。

下面的代碼也是可以運(yùn)行的：

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

在這，JavaScript 將換行符理解成“隱式”的分號(hào)。這也被稱為 自動(dòng)分號(hào)插入。

在大多數(shù)情況下，換行意味著一個(gè)分號(hào)。但是“大多數(shù)情況”并不意味著“總是”！

有很多換行并不是分號(hào)的例子，例如：

alert(3 +
1
+ 2);

代碼輸出 ?6?，因?yàn)?JavaScript 并沒(méi)有在這里插入分號(hào)。顯而易見(jiàn)的是，如果一行以加號(hào) ?"+"? 結(jié)尾，那么這是一個(gè)“不完整的表達(dá)式”，不需要分號(hào)。所以，這個(gè)例子得到了預(yù)期的結(jié)果。

但存在 JavaScript 無(wú)法確定是否真的需要自動(dòng)插入分號(hào)的情況。

這種情況下發(fā)生的錯(cuò)誤是很難被找到和解決的。

一個(gè)錯(cuò)誤的例子
如果你好奇地想知道一個(gè)這種錯(cuò)誤的具體例子，那你可以看看下面這段代碼：

alert("Hello");

[1, 2].forEach(alert);

你不需要考慮方括號(hào) [] 和 forEach 的含義，現(xiàn)在它們并不重要，之后我們會(huì)學(xué)習(xí)它們。讓我們先記住這段代碼的運(yùn)行結(jié)果：先顯示 Hello，然后顯示 1，然后 2。

現(xiàn)在，讓我們刪除 alert 語(yǔ)句后的分號(hào)：

alert("Hello")

[1, 2].forEach(alert);

與上面的代碼相比只有一個(gè)字符的區(qū)別：第一行末尾的分號(hào)不見(jiàn)了。

如果我們運(yùn)行這段代碼，只有第一個(gè) ?Hello ?會(huì)被顯示出來(lái)（并且有一個(gè)報(bào)錯(cuò)，你可能需要打開(kāi)控制臺(tái)才能看到它）。并且不會(huì)再有數(shù)字被顯示出來(lái)。

這是因?yàn)?，JavaScript 引擎并沒(méi)有假設(shè)在方括號(hào) ?[...]? 前有一個(gè)分號(hào)。因此，最后一個(gè)示例中的代碼被視為了單個(gè)語(yǔ)句。

對(duì)于引擎來(lái)說(shuō)，它是這樣的：

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

看起來(lái)很奇怪，對(duì)吧？在這種情況下，這樣將兩行代碼合并到一起是不對(duì)的。我們需要在 alert 后面加一個(gè)分號(hào)，代碼才能正常運(yùn)行。

這也可能發(fā)生在其他情況下。

即使語(yǔ)句被換行符分隔了，我們依然建議在它們之間加分號(hào)。這個(gè)規(guī)則被社區(qū)廣泛采用。我們?cè)俅螐?qiáng)調(diào)一下 —— 大部分時(shí)候可以省略分號(hào)，但是最好不要省略分號(hào)，尤其對(duì)新手來(lái)說(shuō)。

注釋

隨著時(shí)間推移，程序變得越來(lái)越復(fù)雜。為代碼添加 注釋 來(lái)描述它做了什么和為什么要這樣做，變得非常有必要了。

你可以在腳本的任何地方添加注釋，它們并不會(huì)影響代碼的執(zhí)行，因?yàn)橐鏁?huì)直接忽略它們。

單行注釋以兩個(gè)正斜杠字符 // 開(kāi)始。

這一行的剩余部分是注釋。它可能獨(dú)占一行或者跟隨在一條語(yǔ)句的后面。

就像這樣：

// 這行注釋獨(dú)占一行
alert('Hello');

alert('World'); // 這行注釋跟隨在語(yǔ)句后面

多行注釋以一個(gè)正斜杠和星號(hào)開(kāi)始 “/*” 并以一個(gè)星號(hào)和正斜杠結(jié)束 “*/”。

就像這樣:

/* 兩個(gè)消息的例子。
這是一個(gè)多行注釋。
*/
alert('Hello');
alert('World');

注釋的內(nèi)容被忽略了，所以如果我們?cè)?nbsp;/* … */ 中放入代碼，并不會(huì)執(zhí)行。

有時(shí)候，可以很方便地臨時(shí)禁用代碼：

/* 注釋代碼
alert('Hello');
*/
alert('World');

使用快捷鍵！
在大多數(shù)的編輯器中，一行代碼可以使用 ?Ctrl+/? 快捷鍵進(jìn)行單行注釋，諸如 ?Ctrl+Shift+/? 的快捷鍵可以進(jìn)行多行注釋（選擇代碼，然后按下快捷鍵）。對(duì)于 Mac 電腦，應(yīng)使用 ?Cmd ?而不是 ?Ctrl?，使用 ?Option ?而不是 ?Shift?。

不支持注釋嵌套！
不要在 ?/*...*/? 內(nèi)嵌套另一個(gè) ?/*...*/?。
下面這段代碼報(bào)錯(cuò)而無(wú)法執(zhí)行：

/*
  /* 嵌套注釋 ?!? */
*/
alert( 'World' );

對(duì)你的代碼進(jìn)行注釋，這還有什么可猶豫的！

注釋會(huì)增加代碼總量，但這一點(diǎn)也不是什么問(wèn)題。有很多工具可以幫你在把代碼部署到服務(wù)器之前縮減代碼。這些工具會(huì)移除注釋，這樣注釋就不會(huì)出現(xiàn)在發(fā)布的腳本中。所以，注釋對(duì)我們的生產(chǎn)沒(méi)有任何負(fù)面影響。

在后面的教程中，會(huì)有一章 代碼質(zhì)量 的內(nèi)容解釋如何更好地寫(xiě)注釋。