Chrome调试器中JS局部作用域同一变量多次出现问题排查

这是JS里闭包结合调试器机制导致的常见问题，核心原因如下：

• 闭包留存旧变量：map的回调函数会形成闭包，如果这段代码之前执行过多次（比如组件重渲染、代码块重复运行），旧的item变量实例会被闭包保留，调试器会把这些历史实例一并展示，哪怕当前只循环了1次。
• 调试器快照累积：浏览器调试器会记录每次断点触发时的变量快照，你看到的4个实例其实是历次执行的快照集合，并非当前循环同时存在4个item。
• 前端框架重渲染影响：如果这是React这类框架的组件代码，组件每次重渲染都会重新执行map回调，每次执行都会创建新的item变量，调试器会累积这些实例，哪怕当前渲染只处理了1个元素。

你可以在回调里加一句console.log(i)验证，控制台只会输出0一次，说明实际只循环了1次，调试器里的多实例只是历史执行记录。

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