如何重复使用ES6解构赋值更新已定义变量？

你遇到的Unexpected token错误，是因为单独的{ left, bottom } = margin();会被JavaScript解析成代码块，而非解构赋值表达式，导致语法不合法。

但可以明确告诉你：完全可以重复使用解构赋值来更新已定义的变量，只需调整语法让JS把这段代码识别为赋值表达式而非代码块，具体有两种常用方式：

方法一：用括号包裹解构赋值表达式 #

这是最简洁的解决办法，括号会强制JS把内部内容当作表达式处理：

function margin() {
  const left=1, right=2, top=3, bottom=4;
  return { left, right, top, bottom };
}

let { left, bottom } = margin();

// 正确重复更新：用括号包裹
({ left, bottom } = margin());

方法二：先解构到临时对象再赋值 #

如果不想用括号，也可以先把新对象解构到临时变量，再手动更新目标变量，这种方式可读性更高，适合复杂场景：

function margin() {
  const left=1, right=2, top=3, bottom=4;
  return { left, right, top, bottom };
}

let { left, bottom } = margin();

// 另一种更新方式
const { left: newLeft, bottom: newBottom } = margin();
left = newLeft;
bottom = newBottom;

关键说明 #

JavaScript规定，以{开头的语句默认会被解析为代码块（比如if、for语句后的代码块），而解构赋值属于表达式范畴。用括号包裹后，整个结构就变成了表达式语句，引擎会正确识别为解构赋值操作，从而完成变量更新。

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