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' );


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

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


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

目录
相关文章
|
3月前
|
运维 监控 JavaScript
基于 Node.js 图结构的局域网设备拓扑分析算法在局域网内监控软件中的应用研究
本文探讨图结构在局域网监控系统中的应用,通过Node.js实现设备拓扑建模、路径分析与故障定位,提升网络可视化、可追溯性与运维效率,结合模拟实验验证其高效性与准确性。
270 3
|
3月前
|
JavaScript 前端开发 安全
【逆向】Python 调用 JS 代码实战:使用 pyexecjs 与 Node.js 无缝衔接
本文介绍了如何使用 Python 的轻量级库 `pyexecjs` 调用 JavaScript 代码,并结合 Node.js 实现完整的执行流程。内容涵盖环境搭建、基本使用、常见问题解决方案及爬虫逆向分析中的实战技巧,帮助开发者在 Python 中高效处理 JS 逻辑。
|
5月前
|
JavaScript 前端开发 算法
流量分发代码实战|学会用JS控制用户访问路径
流量分发工具(Traffic Distributor),又称跳转器或负载均衡器,可通过JavaScript按预设规则将用户随机引导至不同网站,适用于SEO优化、广告投放、A/B测试等场景。本文分享一段不到百行的JS代码,实现智能、隐蔽的流量控制,并附完整示例与算法解析。
172 1
|
6月前
|
JavaScript 前端开发
怀孕b超单子在线制作,p图一键生成怀孕,JS代码装逼娱乐
模拟B超单的视觉效果,包含随机生成的胎儿图像、医疗文本信息和医院标志。请注意这仅用于前端开发学习
|
7月前
|
JSON 前端开发 Serverless
Mock.js 语法结构全解析
Mock.js 的语法规范介绍,从数据模板定义规范和数据占位符定义规范俩部分介绍, 让你更好的使用 Mock.js 来模拟数据并提高开发效率。
|
6月前
|
JavaScript
JS代码的一些常用优化写法
JS代码的一些常用优化写法
125 0
|
8月前
|
存储 JavaScript 前端开发
在NodeJS中使用npm包进行JS代码的混淆加密
总的来说,使用“javascript-obfuscator”包可以帮助我们在Node.js中轻松地混淆JavaScript代码。通过合理的配置,我们可以使混淆后的代码更难以理解,从而提高代码的保密性。
823 9
|
9月前
|
前端开发 JavaScript
【Javascript系列】Terser除了压缩代码之外,还有优化代码的功能
Terser 是一款广泛应用于前端开发的 JavaScript 解析器和压缩工具,常被视为 Uglify-es 的替代品。它不仅能高效压缩代码体积,还能优化代码逻辑,提升可靠性。例如,在调试中发现,Terser 压缩后的代码对删除功能确认框逻辑进行了优化。常用参数包括 `compress`(启用压缩)、`mangle`(变量名混淆)和 `output`(输出配置)。更多高级用法可参考官方文档。
694 11
|
9月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9月前
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~