🌲中高级前端不一定知道的分号自动插入规则 | 网易实践小总结

695 阅读2分钟

代码规范里分为两派: 添加分号与不添加分号, 熟悉分号自动插入的规则,有助于帮助我们书写代码

合法匹配

javascript的解释器会对代码进行逐句匹配合法,碰到不合法的情况下就会插入分号,看以下例子:

  var name = 'martin'
  var myName = name

从var开始拼接到'martin'的时候此时var name = 'martin' 是符合js的语法规则的,但是再次拼接下一个token的时候,变成var name = 'martin'var 此时的代码显然已经不符合js的语法规则,所以解释器会在‘martin’后面自动插入一个分号

规则:

OnePart

规则: javascript只会把以下这5种符号当做语句的延续与上一句进行拼接 (、[、+、-、/ 其余的拼接时默认中间带一个空格

例子:

  const myName = 'martin'
  const getName = myName
  (() => { return 2 })

以上代码会被转译成

  const myName = 'martin';
  const getName = myName(() => { return 2 });

在const getName = myName后面因为是(所以会自动拼接到myName后面,所以会被编译成上面的样子,此段代码也就会报错myName is not function

SecondPart

规则: javascript会在return、throw、break、continue该行后面自动插入分号,也就是在上面四个关键字后面如果换行的话会出现问题

例子:

  function showName() {
      return
      const name = 'martin'
  }

以上代码会被转译成

  function showName() {
      return;
      const name = 'martin';
  }

显然这样也就导致return出了一个undefined,后面代码并不会执行

ThirdPart

规则:分号不会在for循环语句里自动添加

例子:

  for (let i = 0 i < 10 i++) {}

原本在let i = 0之后会插入一个分号,但是以上代码因为在for循环里不会自动插入分号,所以会在词法解析的时候就报错Invalid or unexpected token

FourthPart

规则: 在}标记之前一行、一个代码块、一段程序结束的地方自动添加分号

例子:

  if (true) {
    let name = 'martin'
  }

以上代码会编译成

  if (true) {
    let name = 'martin';
  }

结束语

书写代码时如果不写分号的情况下会有隐患存在,熟悉插入规则,可以有效帮助我们避免这种情况

往期

🌲中高级前端不一定了解的setTimeout | 网易实践小总结

80行代码实现Vue骨架屏🏆 | 网易小实践

你理解错误的Vue nextTick

别再说Transition 无法过渡display了