第一件需要学习的事情就是构建代码块。

语句

语句是执行操作的语法结构和命令。

我们已经见过语句 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” ,然后是 12

出现无分号变量的错误,是因为 JavaScript 并不在方括号 [...] 前添加一个隐式的分号。

所以,因为分号并不会自动插入,第一个例子被视为一条简单的语句,我们从引擎看到的是这样子的:

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

但它应该是两条语句,而不是一条。这种情况下的合并是不对的,所以才会造成错误。诸如此类,还有很多。

如果语句被换行分割,非常建议在语句之间添加分号。这个规则被社区广泛采纳。让我们再次强调 —— 大部分时候可以省略分号,但是最好是,尤其对于新手,加上它。

注释

随着时间推移,程序变得越来越复杂。为代码添加注释来描述发生了什么(What happens)和为什么(Why),变得非常有必要了。

注释可以在脚本的任何地方添加,它们并不会影响代码的执行,因为引擎会简单地忽略它们。

单行注释以两个正斜杠字符 // 开始。

这一行的剩余部分是注释。它可能占据它所拥有的整行或者跟随在一条语句的后面。

就像这样:

// 这行注释占据所拥有的整行
alert('Hello');

alert('World'); // 这行注释跟随在语句后面

多行注释以一个正斜杠和星号开始 “/*” 并以一个星号和正斜杆结束 “*/”

就像这样:

/* 两个消息的例子。
这是一个多行注释。
*/
alert('Hello');
alert('World');

注释的内容被忽略了,所以如果我们在 /* … */ 中放入代码,并不会执行。

有时候,可以很方便地临时禁用代码:

/* 注释代码
alert('Hello');
*/
alert('World');
使用热键!

在大多数的编辑器中,一行代码可以使用 Ctrl+/ 热键进行单行注释,诸如 Ctrl+Shift+/ 的热键可以进行多行注释(选择代码,然后按下热键)。对于 Mac 电脑,应使用 Cmd 而不是 Ctrl

不支持注释嵌套!

没有 /*...*/ 内嵌套另一个 /*...*/

下面这段代码因为错误而无法执行:

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

注释你的代码,请不要有任何迟疑。

注释会增加代码总量,但这一点也不是问题。有很多工具可以在你部署到服务器之前缩减代码。这些工具会移除注释,所以注释不会出现在发布的脚本中。所以,注释对我们的生产没有任何负面影响。

在进一步的教程中,会有一章 代码风格 的内容解释如何书写更好的注释。

教程路线图

评论

在评论之前先阅读本内容…
  • 欢迎你在文章下添加补充内容、提出你的问题或回答提出的问题。
  • 使用 <code> 标签插入几行代码,对于多行代码 — 可以使用 <pre>,对于超过十行的代码 — 建议使用沙箱(plnkrJSBincodepen 等)。
  • 如果你无法理解文章中的内容 — 请详细说明。