使用特定变量名称时，对象解构会给我一个 NaN 值

Question

我的对象有 2 个属性，当这些属性被命名为 left 和 top { left: rect.left, top: rect.top}。 解构对象后，我的 x 和 y 变量都是 NaN。

const { x, y } = this.getCanvasPosition(this.canvasHex.current);

但是如果我将该对象的属性重命名为 x 和 y { x: rect.left, y: rect.top}，我会得到我正在寻找的值。

我想知道这里到底发生了什么。

Answer 1

您需要重命名属性，因为您没有属性 x 和 y，但是 left 和 top。

const { left: x, top: y } = this.getCanvasPosition(this.canvasHex.current);

const { left: x, top: y } = { left: 10, top: 5 };

console.log(x, y);