现代 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

---

扫描下方二维码，关注微信公众号「技术漫谈」，订阅更多精彩内容。