JavaScript对象解构为自定义命名变量的实现方式及性能影响咨询

问题1解答 #

有合法语法支持，JavaScript的对象解构原生支持重命名变量，语法格式为 const { 原对象属性名: 自定义变量名 } = 目标对象。

你给出的示例代码修改为合法写法如下：

const source1 = {x1: -5, y1: -5, x2: 10, y2: 10};
const source2 = {x1: 15, y1: 15, x2: 20, y2: 20};

// 正确的解构重命名写法
const { x1: s1x1, y1: s1y1, x2: s1x2, y2: s1y2 } = source1;
const { x1: s2x1, y1: s2y1, x2: s2x2, y2: s2y2 } = source2;

// 使用新生成的变量
let result = s1x1 * s2x1;

如果需要用表达式动态指定映射关系，可以结合计算属性语法，更推荐将结果挂载到自定义对象上避免全局变量污染：

const prefix = 's1';
const resultMap = {};
({
  x1: resultMap[`${prefix}x1`],
  y1: resultMap[`${prefix}y1`]
} = source1);

问题2解答 #

常规使用场景下几乎没有额外性能开销。
现代主流JS引擎（V8、SpiderMonkey、JavaScriptCore等）都对解构语法做了深度优化，编译后的执行效率和手动逐个赋值的差异在纳秒级别，日常开发完全感知不到。只有在每秒执行十万次以上的极端高频场景下才可能出现可测量的微小差异，且这类差异通常是引擎的即时编译调度波动导致，不是语法的固有额外开销，稳定运行后性能会和手动赋值持平。

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