JavaScript函数解构最佳实践：map遍历参数解构是否更具性能优势？

核心结论 #

两种写法的性能差异极小，常规业务场景下完全不需要考虑：

• 主流JS引擎（V8、SpiderMonkey、JavaScriptCore等）对解构语法已经做了非常成熟的优化，参数位置解构和函数体内解构编译后的底层执行逻辑几乎一致，万级及以下的数组遍历根本测不出可感知的性能差距。
• 只有当你需要处理百万级以上的超大规模数组遍历时，参数解构才会有1%~3%的微弱性能优势，本质是少了一层函数内部的独立变量声明步骤，但这个级别的差距对绝大多数业务场景来说没有实际价值。

写法选择建议 #

优先以可读性和可维护性为判断标准，不用刻意为了性能选写法：

• 如果map回调逻辑很简单，只需要用到对象的几个固定属性，直接在参数位置解构更简洁，冗余代码更少
• 如果回调逻辑复杂，后续需要用到完整的遍历项对象，或者需要修改解构出来的变量值，放在函数体内部解构更灵活，后续迭代代码的成本更低

你贴的第一段代码存在笔误，函数体内解构的源对象应该是当前遍历的item而非option，修正后两种写法的对比如下：

函数体内解构写法 #

{items.map((item) => {
  const {value1, value2} = item
  return (<li>{value1} {value2}</li>)
})}

参数位置解构写法 #

{items.map(({value1, value2}) => (
  <li>{value1} {value2}</li>
))}

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