《重学前端》学习笔记Day108

JavaScript语法：到底要不要写分号呢？

自动插入分号规则

自动插入分号规则其实独立于所有的语法产生式定义，有三条件定义：

• 要有换行符，且下一个符号是不符合语法的，那么就尝试插入分号。
• 有换行符，且语法中规定此处不能有换行符，那么就自动插入分号。

• 源代码结束处，不能形成完整的脚本或者模块结构，那么就自动插入分号。

  // 命中第一条规则
  let a = 1/*此处要加分号*/
  void function(a){
    console.log(a);
  }(a);

  // 命中第二条规则
  var a = 1, b = 1, c = 1;
  a/*此处要加分号*/
  ++
  b/*此处要加分号*/
  ++
  c

  //这个两个function调用写法被称作IFEE(立即执行的函数表达式)，
  // JavaScript会认为函数返回的可能还是个函数，所以函数后边在跟函数调用就是合理的。
  // 因此这里不会自动加分号。
  (function(a){
  console.log(a);
  })()
  (function(a){
  console.log(a);
  })()

  //根据JavaScript自动插入分号规则，带换行符的注释也被认为是有换行符，而恰好的是，
  // return也有[no LineTerminator here]规则的要求。所以return这里会自动加分号。
  function f(){
  return/*
  This is a return value.
  */1;
  }
  f();

  no LineTerminator here 规则

  no LineTerminator here规则表示它所在的结构中的这一位置不能插入换行符。
  

  // 带标签的continue语句，不能在continue后插入换行。
  outer:for(var j = 0; j < 10; j++)
    for(var i = 0; i < j; i++)
        continue /*no LineTerminator here*/ outter

  // break与continue一样，不能在break后插入换行。
  outer:for(var j = 0; j < 10; j++)
    for(var i = 0; i < j; i++)
        break /*no LineTerminator here*/ outter

  // return 和后自增、后自减运算符 不能插入换行符
  function f(){
  return /*no LineTerminator here*/1;
  }
  i/*no LineTerminator here*/++
  i/*no LineTerminator here*/--

  // throw 和 throw 之间不能插入换行符
  throw/*no LineTerminator here*/new  ("error")

  // 凡是async关键字，后面不能插入换行符
  async/*no LineTerminator here*/function f(){
  }
  const f = async/*no LineTerminator here*/x => x*x

  // 箭头函数前，不能插入换行符
  const f = x/*no LineTerminator here*/=> x*x

  // yield之后，不能插入换行符
  function *g(){
    var i = 0;
    while(true)
    yield/*no LineTerminator here*/i++;
  }

  不写分号要注意的情况

  以括号开头的语句

  // 以下代码看似是两个独立的立即执行函数，但是其实第三组括号被理解为传参，导致报错
  (function(a){
    console.log(a);
  })()/*这里没有被自动插入分号*/
  (function(a){
    console.log(a);
  })()

  以数组开头的语句

  // 这段代码本意是变量a赋值，然后对一个数组执行forEach
  // 但因为没加分号，被理解为下标运算和逗号表达式
  var a = [[]]/*这里没有被自动插入分号*/
  [3, 2, 1, 0].forEach(e => console.log(e))

  以正则表达式开头的语句

  // 这里本意是声明三个变量，然后正则匹配判断
  // 但是第一个斜杠被理解成除号，整个意思都变了
  var x = 1, g = {test:()=>0}, b = 1/*这里没有被自动插入分号*/
  /(a)/g.test("abc")
  console.log(RegExp.$1)

  以Template开头的语句

  // template与正则组合使用，本意是声明函数f，然后赋值给g，在测试Template中是否包含'a'
  // 但由于没有自动插入分号，被理解为f和template是一体的，莫名其妙的被执行了一次。
  var f = function(){
  return "";
  }
  var g = f/*这里没有被自动插入分号*/
  `Template`.match(/(a)/);
  console.log(RegExp.$1)

此文章为7月Day11学习笔记，内容来源于极客时间《重学前端》，日拱一卒，每天进步一点点💪💪