ES6解构赋值失效求助：Canvas绘图功能实现时遇异常

嘿，这个坑我之前也踩过！你的解构赋值语句之所以不工作，完全是**JavaScript自动分号插入（ASI）**在搞鬼。

看你代码里的这段：

ctx.stroke()
//[TODO] destruction doesn't work????
[lastX, lastY] = [ev.offsetX, ev.offsetY]

因为ctx.stroke()后面没有加分号，JavaScript会自动尝试把它和下一行的解构语句合并解析，最终变成了这样的错误逻辑：

ctx.stroke()[lastX, lastY] = [ev.offsetX, ev.offsetY]

这显然不是你想要的写法，自然就导致解构赋值失效，甚至可能在控制台抛出语法错误。

两种快速修复方案： #

• 给前面的ctx.stroke()加上分号，明确分割两条语句：

  ctx.stroke();
  [lastX, lastY] = [ev.offsetX, ev.offsetY]
  

• 在解构语句开头加个分号（强制和前面的代码切割开）：

  ctx.stroke()
  ;[lastX, lastY] = [ev.offsetX, ev.offsetY]
  

而你用直接赋值lastX = ev.offsetX、lastY = ev.offsetY能正常运行，是因为这种赋值语句的语法不会被前面的函数调用语句干扰，JavaScript能正确识别这是两条独立的语句。

修改后你的完整draw函数示例：

let isDrawing = false
let lastX = 0
let lastY = 0
const draw = function(ev){
    console.log('isDrawing', isDrawing)
    if(!isDrawing){
        return
    }
    ctx.beginPath()
    ctx.moveTo(lastX, lastY)
    ctx.lineTo(ev.offsetX, ev.offsetY)
    ctx.stroke(); // 加上分号解决ASI问题
    [lastX, lastY] = [ev.offsetX, ev.offsetY]
}
canvas.addEventListener('mousemove', draw)
canvas.addEventListener('mousedown', (e) => {
    isDrawing = true
    [lastX, lastY] = [e.offsetX, e.offsetY]
})
// 记得补充mouseup和mouseleave事件停止绘图
canvas.addEventListener('mouseup', () => isDrawing = false)
canvas.addEventListener('mouseleave', () => isDrawing = false)

内容的提问来源于stack exchange，提问作者Pastilhas