javascript - es6解构(不确定是否与重组有关)

Question

这个问题已经有答案了:

Destructuring assignment in while loop in ES6 function doesn't propogate out of loop? (1 个回答)

已关闭 5 年前。

所以我正在按照本教程进行操作，但遇到了一个奇怪的错误。

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()

    //[TODO] destruction doesn't work????
    [lastX, lastY] = [ev.offsetX, ev.offsetY]
    // lastX = ev.offsetX
    // lastY = ev.offsetY
}

canvas.addEventListener('mousemove', draw)
canvas.addEventListener('mousedown', (ev) => {
  isDrawing = true
  [lastX, lastY] = [ev.offsetX, ev.offsetY]
})
canvas.addEventListener('mouseup', () => isDrawing = false)
canvas.addEventListener('mouseout', () => isDrawing = false)

在绘制函数的末尾，如果我使用破坏语法，则会收到错误:

script.js:26 Uncaught TypeError: Cannot set property '0' of undefined at HTMLCanvasElement.draw

奇怪的是，当我在 mousedown 事件监听器中使用相同的符号时，它工作没有问题。

我做错了什么？

Answer 1

您没有使用分号，并且以左括号开始一行，从而陷入了 ASI 陷阱。它被解析为

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