为什么这段js代码加不加分号输出不同？

Question

var a = 1
var b = 2
[a, b] = [b, a+b]
console.log(a, b)

var a = 1;
var b = 2;
[a, b] = [b, a+b]
console.log(a, b)

上面这两段代码，不加分号和加分号，在控制台输出为什么会不一样？
我个人习惯以前从来不加分号，是否意味着这个习惯不好呢？

Answer 1

不加分号又没有 ASI 机制的话，等价于

var a = 1
var b = 2[a, b] = [b, a+b]
console.log(a, b)

而 2[a, b] 等于 undefined，[b, a+b] 等于 [undefined, 1 + undefined]，之后从右往左赋值，最终 b 的值为 [undefined, NaN]

加了分号就是增加了断句的依据, 上面的代码就变成了

var a = 1;
var b = 2;[a, b] = [b, a+b]
console.log(a, b)

由于第二行代码不再解释为连续赋值，因此会先将 b 赋值为 2，然后再根据解构赋值，最后结果为 [2, 3]

---

updated
关于 2[a, b] 为什么等于 undefined，是因为这明显是数组取值的语法呀，具体求值顺序如下：

• a, b 先按逗号操作符来求值，逗号操作符是从左往右依次求值，返回最后一个表达式的值，因此 a, b 的值代表 undefined
• 2[undefined] 等于 undefined

Answer 2

上面那段代码你一行行输入，而不是整段复制，跟下面那段代码是一样的效果。而你在IDE中写代码，加不加分号都能是一样的效果是因为ASI机制。

JavaScript 中的 ASI 机制，允许我们省略分号。ASI 机制不是说在解析过程中解析器自动把分号添加到代码中，而是说解析器除了分号还会以换行为基础按一定的规则作为断句的依据，从而保证解析的正确性。

建议加上分号。不仅仅是为了自己以后改bug，重构，调试等等，也为了使以后团队合作中更有效率