脑图学习 JavaScript 之犀牛书【二】词法结构

介绍

犀牛书第二章主要叙述了一下 JavaScript 的 词法结构，其实就是 语法结构。

主要须要注意下 换行、分号的自动填补规则，知道了引擎的解析规则后就能够避免由于省略了必要的分号而致使奇怪的 bug。

自我提问

• 什么状况下必需要填补分号？

  var a = 1, b = 2, c = 3
  a = b + c
  (b + c).toString()
  复制代码

  function foo() {
      return
      123
  }
  console.log(foo());
  复制代码

脑图

关键知识点

字符集

JavaScript 中使用的是 Unicode 字符集，而且 区分大小写。

var abc = 1;
var ABC = 2;
// 1 2
console.log(abc, ABC);
复制代码

换行符

换行符有时会被忽略，可能会致使没必要要的 bug，具体见下方省略分号的意外bug。

分号自动填补规则

分号自动填补的规则是：在缺乏分号会报错（语法上）时自动在换行初填补分号。

var // 衔接下一行不报错 ===> var a
a // 衔接下一行报错，自动填补分号 ===> var a;
a // 衔接下一行不报错 a = 
= // 衔接下一行不报错 a = 1
1 // 衔接下一行报错，自动填补分号 ===> a = 1;
console.log // 衔接下一行不报错 ===> console.log(a)
(a)
复制代码

上述代码等价于

var a; a = 1; console.log(a);
复制代码

自动填补规则的特例

自动填补规则有 两个例外状况：

1. 遇到 return、break、continue 时后面的换行会 自动填补分号
2. 遇到 ++ 或 -- 运算符时，会 将运算符做为前缀

function foo() {
    return // 遇到 return 直接补全分号
    123
}
// undefined
console.log(foo());
复制代码

上述代码等价于

function foo() {
    return;
    123
}
console.log(foo());
复制代码

var a = 1, b = 2;
a // 下面是 ++ 运算符，放弃衔接，填补分号 ===> a;
++ // 衔接 ===> ++b
b // 衔接失败，填补分号 ===> ++b;
// 1 3
console.log(a, b);
复制代码

上述代码等价于

var a = 1, b = 2;
a;
++b;
console.log(a, b);
复制代码

var a = 1, b = 2;
a
++ // 这里会直接报错
console.log(a, b);
复制代码

省略分号的意外bug

某些状况下省略分号会致使意料以外的 bug。

var a = 1, b = 2, c = 3;
a = b + c // 这里会将尝试衔接下一句 ===> a = b + c(b+c).toString()，语法解析上没有问题，可是却不是编写者的本意，从而致使了意料以外的结果
(b + c).toString()
复制代码

分号风格抉择

是否须要在全部地方都填补分号是个风格问题 没有孰优孰劣，这个问题通常 靠团队代码风格的统一，或者 一些代码的格式化工具 就能够 很好的解决（好比 prettier）。

不过实质上而言加上分号比不加分号在编译性能上会有所优点，由于不加分号会让 JavaScript 一直猜想何时须要填补分号，可是在如今都用 babel 等预编译代码的状况下并没什么区别。

系列文章目录

1. 脑图学习 JavaScript 之犀牛书【一】
2. 脑图学习 JavaScript 之犀牛书【二】词法结构
3. 脑图学习 JavaScript 之犀牛书【三 · 一】数据类型
4. 脑图学习 JavaScript 之犀牛书【三 · 二】类型转换、变量
5. 脑图学习 JavaScript 之犀牛书【四 · 一】运算符、类型转换
6. 脑图学习 JavaScript 之犀牛书【四 · 二】表达式、计算顺序