基本语法

Mr.Hope ... 2019-09-14 JavaScript
大约 4 分钟

本章简单介绍 JavaScript 种语句,区块和注释的概念。

# 语句

JavaScript 程序的执行单位为行 (line),也就是一行一行地执行。一般情况下,每一行就是一个语句。

语句 (statement) 是为了完成某种任务而进行的操作,比如下面就是一行赋值语句。

let a = 1 + 3;
1

这条语句先用 let 命令,声明了变量 a,然后将 1 + 3 的运算结果赋值给变量 a

1 + 3叫做表达式 (expression),指一个为了得到返回值的计算式。语句和表达式的区别在于,前者主要为了进行某种操作,一般情况下不需要返回值;后者则是为了得到返回值,一定会返回一个值。凡是 JavaScript 语言中预期为值的地方,都可以使用表达式。比如,赋值语句的等号右边,预期是一个值,因此可以放置各种表达式。

下面的一行代码是一个字符串,但仍然可以视为一个完整的语句:

"Hello, world";
1

语句以分号结尾,一个分号就表示一个语句结束。多个语句可以写在一行内。下面的一行代码包含两个语句“

let x = 1; let y = 2; // 不建议一行写多个语句!
1

分号前面可以没有任何内容,JavaScript 引擎将其视为空语句。

;;;
1

上面的代码就表示 3 个空语句。

注意

JavaScript 并不强制要求在每个语句的结尾加 ; ,浏览器中负责执行 JavaScript 代码的引擎会自动在每个语句的结尾补上 ;

让 JavaScript 引擎自动加分号在某些情况下会改变程序的语义,导致运行结果与期望不一致。在本教程中,所有语句都会添加 ; 不会省略。

在 Mr.Hope 的所有项目中,都强制要求在行末添加分号。

# 区块

JavaScript 使用大括号,将多个相关的语句组合在一起,称为“区块”(block)。

区块是一组语句的集合,用 {...} 。例如,下面的代码先做了一个判断,如果判断成立,将执行 {...} 中的所有语句:

if (2 > 1) {
  x = 1;
  y = 2;
  z = 3;
}
1
2
3
4
5

注意花括号 {...} 内的语句具有缩进,通常是 2 个空格。缩进不是 JavaScript 语法要求中所必须的,但缩进有助于我们理解代码的层次,所以编写代码时要遵守缩进规则。很多文本编辑器如 VS Code 具有“自动缩进”的功能,可以帮助整理代码。

缩进

缩进也可以是一个 tab (四个空格宽)。

Mr.Hope 的个人喜好是设置两个空格,这样可以减少缩进量,即减少代码右移。

对于 var 命令来说,JavaScript 的区块不构成单独的作用域(scope)。

{
  var a = 1;
}
a; // 1
1
2
3
4

上面代码在区块内部,使用 var 命令声明并赋值了变量 a,然后在区块外部,变量 a 依然有效,区块对于 var 命令不构成单独的作用域,与不使用区块的情况没有任何区别。在 JavaScript 语言中,单独使用区块并不常见,区块往往用来构成其他更复杂的语法结构,比如 forifwhilefunction 等。

区块 还可以嵌套,形成层级结构:

if (2 > 1) {
  x = 1;
  y = 2;
  z = 3;
  if (x < y) {
    z = 4;
  }
  if (x > y) {
    z = 5;
  }
}
1
2
3
4
5
6
7
8
9
10
11

JavaScript 本身对嵌套的层级没有限制,但是过多的嵌套无疑会大大增加看懂代码的难度。遇到这种情况,需要把部分代码抽出来,作为函数来调用,这样可以减少代码的复杂度。

# 注释

源码中被 JavaScript 引擎忽略的部分就叫做注释,它的作用是对代码进行解释,供开发人员观看,而 JavaScript 引擎会自动忽略。

JavaScript 提供两种注释的写法:

  • // 开头直到行末的字符被视为行注释,

    // 这是一行注释
    alert("hello"); // 这也是注释
    
    1
    2
  • /*...*/ 把多行字符包裹起来,把一大 “块” 视为一个注释:

    /* 从这里开始是块注释
    仍然是注释
    仍然是注释
    注释结束 */
    
    1
    2
    3
    4

由于历史遗留问题[1],JavaScript 可以兼容 HTML 代码的注释。不过请不要使用此做法。


  1. 使用 HTML 代码的注释

    由于历史上 JavaScript 可以兼容 HTML 代码的注释,所以 <!----> 也被视为合法的单行注释。

    x = 1; <!-- x = 2;
    --> x = 3;
    
    1
    2

    上面代码中,只有 x = 1 会执行,其他的部分都被注释掉了。

    需要注意的是,--> 只有在行首,才会被当成单行注释,否则会当作正常的运算。

    function countdown(n) {
      while (n-- > 0) console.log(n);
    }
    countdown(3);
    // 2
    // 1
    // 0
    
    1
    2
    3
    4
    5
    6
    7

    上面代码中,n --> 0 实际上会当作 n-- > 0,因此输出 2、1、0。 ↩︎