《JavaScript全栈教程》04:JavaScript基本语法——语句、注释与代码规范
任何编程语言的学习都从语法规则开始。本文带你系统掌握JavaScript的语句结束符、代码块、注释规范以及大小写敏感等核心语法基础,帮你避开新手最容易踩的“自动分号陷阱”,为后续深入学习打下扎实根基。
本篇核心收获
- 理解JavaScript语句的结束规则,掌握分号
;的正确用法与自动插入分号(ASI, Automatic Semicolon Insertion)的风险 - 掌握语句块
{...}的嵌套结构与缩进规范,养成良好代码风格 - 熟练使用行注释
//和块注释/* ... */,并能区分两者的适用场景 - 牢记JavaScript严格区分大小写的特性,避免因大小写错误导致的运行异常
一、语句与分号
1.1 语句的基本规则
JavaScript的语法和Java语言类似,每个语句以;结束,语句块用{...}。但是,JavaScript并不强制要求在每个语句的结尾加;,浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上;。
⚠️ 避坑指南:让JavaScript引擎自动加分号(即自动插入分号机制ASI)在某些情况下会改变程序的语义,导致运行结果与期望不一致。
1.2 完整语句示例
下面的一行代码就是一个完整的赋值语句:
var x = 1;下面的一行代码是一个字符串,但仍然可以视为一个完整的语句:
'Hello, world';1.3 多个语句的写法
下面的一行代码包含两个语句,每个语句用;表示语句结束:
var x = 1; var y = 2; // 不建议一行写多个语句!💡 建议:虽然语法允许一行写多个语句,但为了代码可读性,强烈不推荐这样做。
二、语句块与代码结构
2.1 语句块的定义
语句块是一组语句的集合,用花括号{...}包裹。例如,下面的代码先做了一个判断,如果判断成立,将执行{...}中的所有语句:
if (2 > 1) {
x = 1;
y = 2;
z = 3;
}注意:花括号{...}内的语句具有缩进,通常是4个空格。缩进不是JavaScript语法要求必须的,但缩进有助于我们理解代码的层次,所以编写代码时要遵守缩进规则。很多文本编辑器具有“自动缩进”的功能,可以帮助整理代码。
2.2 嵌套的语句块
{...}还可以嵌套,形成层级结构:
if (2 > 1) {
x = 1;
y = 2;
z = 3;
if (x < y) {
z = 4;
}
if (x > y) {
z = 5;
}
}JavaScript本身对嵌套的层级没有限制,但是过多的嵌套无疑会大大增加看懂代码的难度。遇到这种情况,需要把部分代码抽出来,作为函数来调用,这样可以减少代码的复杂度。
📌 模块小结:语句以分号结尾是最安全的实践;语句块用
{...}组织代码,配合4空格缩进提升可读性;嵌套层级不宜过深,必要时通过函数拆分降低复杂度。
三、注释
注释是给开发人员看到的说明文字,JavaScript引擎会自动忽略注释内容。
3.1 行注释
以//开头直到行末的字符被视为行注释:
// 这是一行注释
alert('hello'); // 这也是注释3.2 块注释
另一种块注释是用/* ... */把多行字符包裹起来,把一大“块”视为一个注释:
/*
从这里开始是块注释
仍然是注释
仍然是注释
注释结束
*/3.3 练习:注释的使用
分别利用行注释和块注释把下面的语句注释掉,使它不再执行:
// 请注释掉下面的语句:
// alert('我不想执行');
/* alert('我也不想执行'); */💡 练习提示:行注释只能注释单行,块注释可以跨越多行。上述示例中,第一句已用
//注释,第二句用/* */包裹完成注释。
四、大小写敏感
请注意,JavaScript严格区分大小写,如果弄错了大小写,程序将报错或者运行不正常。
例如,变量名myVar和myvar是两个完全不同的变量;函数名alert不能写成Alert或ALERT。这是新手最容易犯的错误之一,编写代码时务必留意。
本篇核心知识点速记
| 知识点 | 核心要点 |
|---|---|
| 语句结束符 | 推荐始终使用;结尾,避免依赖自动插入分号(ASI) |
| 语句块 | 用{...}包裹一组语句,内部使用4空格缩进 |
| 嵌套层级 | 理论无限制,但过深时建议抽离为函数 |
| 行注释 | // 注释内容,仅作用于当前行 |
| 块注释 | /* 注释内容 */,可跨越多行 |
| 大小写 | JavaScript严格区分大小写,变量名、函数名必须精确匹配 |
✅ 本篇核心:掌握分号规范、语句块结构、两种注释写法以及大小写敏感规则,是写出可读、可维护JavaScript代码的第一步。
