代码结构
我们将要学习的第一个内容就是构建代码块。
语句
语句是执行操作的语法结构和命令。
我们已经见过了 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
扫描下方二维码,关注微信公众号「技术漫谈」,订阅更多精彩内容。
今天的文章现代 JavaScript 教程 — 代码结构分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/16838.html