发现ES6解构赋值的在chrome一个BUG.

Question

由于我现在写js基本不会加分号,今天写的时候发现在chrome(版本 54.0.2840.71 m)里使用ES6解构赋值时会有一个小问题.

代码如下

  let lastX = 0,
      lastY = 0  
  canvas.addEventListener('mousedown', (e) => {
      isDrawing = true
      [lastX, lastY] = [e.offsetX,e.offsetY]
   })

赋值语句前没有分号会赋值失败,报错

Uncaught TypeError: Cannot set property '0' of undefined(…)

加了之后就没问题了,希望大家注意,不知道其他浏览器是否有这个问题

Answer 1

这个跟解构有毛关系，你运行下面的代码看看会不会报错

isDrawing = true

[1,2,3].map(v=>v)

所以 ; 这个东西不是不让大家加，而是不加之前先弄清楚到底哪些情况是必须要加的

Answer 2

这不是bug，是你不加分号导致的。
因为JS是允许这样的语法的：

a
[0] = [
1
]

上面只是一句赋值。

ES规范规定，用户不主动加分号的时候，解释器会自动补分号，一般来说是在换行的时候补，但是有时候没那么智能。

a = b
[x,y] = [1,2]

这一段的b和下面的方括号是可以连起来的，所以就变成了

a = b[x,y] = [1,2]

解释器自动插入分号不是万能的，还有一些二义性比如这样：

a=b
(function(){
    
})()

这里的b会和下面的括号连起来，你以为是两句，其实是一句。

Answer 3

今天也碰到这问题了，蛋疼的要命。。