JavaScript 代码结构:语句、分号和注释

简介: JavaScript 代码结构:语句、分号和注释

640.png

代码结构


我们将要学习的第一个内容就是构建代码块。


语句


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

我们已经见过了 alert('Hello, world!') 这样可以用来显示消息的语句。

我们可以在代码中编写任意数量的语句。语句之间可以使用分号进行分割。

例如,我们将 "Hello World" 这条信息一分为二:


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

通常,每条语句独占一行,以提高代码的可读性:


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


分号


当存在分行符(line break)时,在大多数情况下可以省略分号。

下面的代码也是可以运行的:


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


在这,JavaScript 将分行符理解成“隐式”的分号。这也被称为 自动分号插入[1]

在大多数情况下,换行意味着一个分号。但是“大多数情况”并不意味着“总是”!

有很多换行并不是分号的例子,例如:


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

出现无分号变量(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' );


对你的代码进行注释,这还有什么可犹豫的!

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


在后面的教程中,会有一章 代码质量 的内容解释如何更好地写注释。

目录
相关文章
|
29天前
|
JavaScript
短小精悍的js代码
【10月更文挑战第17天】
120 58
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
234 2
|
17天前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
35 3
原生js炫酷随机抽奖中奖效果代码
|
22天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
200 4
|
23天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
75 6
|
19天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
49 1
|
1月前
|
JavaScript 前端开发 开发者
如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。
【10月更文挑战第9天】随着前端开发技术的发展,代码规范和格式化工具变得至关重要。本文介绍如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。通过安装插件、配置 ESLint 和 Prettier,以及设置 VSCode,实现代码实时检查和格式化,确保代码风格一致。
29 2
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。
【10月更文挑战第8天】本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。通过安装 VSCode 插件、配置 ESLint 和 Prettier,实现代码规范检查和自动格式化,确保代码风格一致,提高可读性和维护性。
74 2
|
1月前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包:原理、应用与代码演示
【10月更文挑战第12天】深入理解JavaScript中的闭包:原理、应用与代码演示
下一篇
无影云桌面