JS魔法堂：ASI(自动分号插入机制)和前置分号

原创

肥仔John 2022-03-29 14:30:59 博主文章分类：JavaScript ©著作权

文章标签 javascript ico java 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者肥仔John的原创作品，请联系作者获取转载授权，否则将追究法律责任

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

今晚在知乎看到百姓网前端技术专家——贺师俊对《JavaScript 语句后应该加分号么？》的回答，让我又一次看到大牛的风采，实在佩服万分。但单纯的敬佩是不足以回报他如此优秀的文字，必须深入理解文字的含义和背后的原理才不愧呢！

在这之前我们需要先理解ASI（自动分号插入机制）。

二、 Automatic Semicolon Insertion (ASI, 自动分号插入机制)　　　

主要参考：http://justjavac.com/javascript/2013/04/22/automatic-semicolon-insertion-in-javascript.html

从事C#和Java的猴子们都知道分号是用作断句（EOS，end of statement）的，而且必须加分号，否则编译就不通过了。但JavaScript由于存在ASI机制，因此允许我们省略分号。ASI机制不是说在解析过程中解析器自动把分号添加到代码中，而是说解析器除了分号还会以换行为基础按一定的规则作为断句的依据，从而保证解析的正确性。

首先这些规则是基于两点：

 1. 以换行为基础；

 2. 解析器会尽量将新行并入当前行，当且仅当符合ASI规则时才会将新行视为独立的语句。

ASI的规则

1. 新行并入当前行将构成非法语句，自动插入分号

if(1 < 10) a = 1
console.log(a)
// 等价于
if(1 < 10) a = 1;
console.log(a);

2. 在continue,return,break,throw后自动插入分号

return
{a: 1}
// 等价于
return;
{a: 1};

3. ++、--后缀表达式作为新行的开始，在行首自动插入分号

a
++
c
// 等价于
a;
++c;

4. 代码块的最后一个语句会自动插入分号

function(){ a = 1 }
// 等价于
function(){ a = 1; }

No ASI的规则

1. 新行以 ( 开始

var a = 1
var b = a
(a+b).toString()
// 会被解析为以a+b为入参调用函数a，然后调用函数返回值的toString函数
var a = 1
var b =a(a+b).toString()

2. 新行以 [ 开始

var a = ['a1', 'a2']
var b = a
[0,1].slice(1)
// 会被解析先获取a[1]，然后调用a[1].slice(1)。
// 由于逗号位于[]内，且不被解析为数组字面量，而被解析为运算符，而逗号运算符会先执行左侧表达式，然后执行右侧表达式并且以右侧表达式的计算结果作为返回值
var a = ['a1', 'a2']
var b = a[0,1].slice(1)

3. 新行以 / 开始

var a = 1
var b = a
/test/.test(b)
// /会被解析为整除运算符，而不是正则表达式字面量的起始符号。浏览器中会报test前多了个.号
var a = 1
var b = a / test / .test(b)

4. 新行以 + 、 - 、 % 和 * 开始

var a = 2
var b = a
+a
// 会解析如下格式
var a = 2
var b = a + a

5. 新行以 , 或 . 开始

var a = 2
var b = a
.toString()
console.log(typeof b)
// 会解析为
var a = 2
var b = a.toString()
console.log(typeof b)

到这里我们已经对ASI的规则有一定的了解了，另外还有一样有趣的事情，就是“空语句”。

// 三个空语句
;;;

// 只有if条件语句，语句块为空语句。
// 可实现unless条件语句的效果
if(1>2);else
  console.log('2 is greater than 1 always!');

// 只有while条件语句，循环体为空语句。
var a = 1
while(++a < 100);

三、前置分号　　　　　　　　　　　　　　　　　　　　　　　　　　

重申一下分号的作用——作为语句的断言（EOS），目的是让解析器正确解析程序。那既然存在ASI机制，那为什么还有那么多团队的代码规范中还规定必须写分号呢？不外乎三个原因：1. 因为存在No ASI的情况，懒得记忆这些特例；2. 团队的工程师需要兼顾前后端开发（苦逼如我~~），而后端采用Java、C#或PHP，保持两端代码规范接近管理成本较低；3. 旧有的规范就是这样，现在也没必要改了。

对于省略分号后代码压缩工具会出问题，jslint会对无分号的代码报warning等问题，贺师俊已经在回复中对其进行详细说明了。因此分不分号纯属个人和团队的偏好问题，当然也可以混合使用咯（下面借一下大牛@高原的图）

JS魔法堂：ASI(自动分号插入机制)和前置分号_javascript

对于我这种能少敲键盘则少敲，能不用鼠标就不用的大懒虫，自然而然加入到“无分号党”的怀抱咯，入党的前提条件就是记住一下规则来应付No ASI的情况：

在以 ([/+- 开头的语句前加分号(由于正常写法均不会出现以 .,*% 作为语句开头，因此只需记住前面5个即可，你看能懒则懒哦)

然后就是通过合理的缩进和空白行来使代码结构更为清晰(coffeescript不就是这样的吗？！)

示例：

;(function(exports, undefined){
　　var getKeys = Object.getOwnPropertyName 
   　　&& Object.getOwnPropertyName.bind(Object)
       || function(obj){
       　　var keys = []
          for (var key in obj)
          　　keys.push(key)
          return keys
       }

    var each = exports.forEach = exports.each = function(arrayLike, fn, ctx){
    　　if(arrayLike == undefined) return

       var isObj = arrayLike.length !== +arrayLike.length
 　　      ,keys = isObj ? getKeys(arrayLike) : arrayLike
          ,len = keys.length
          ,idx
       for (var i = 0; idx = isObj ? keys[i] : i, i < len; ++i)
    　　   fn.call(ctx, idx, arrayLike[idx])
    }
}(new Function('return this')(), void 0))

forEach({'s':1,'c':2}, function(i, item){
　　console.log(i + '  ' + item)
})
forEach([1,2], function(i, item){
　　console.log(i + '  ' + item)
})