JavaScript：forEach与循环/条件语句的变量作用域差异及原因咨询

为什么for/while/if else不创建新作用域，但forEach会？ #

嘿，很高兴你开始深挖JavaScript的作用域细节啦！这个问题的核心其实是JavaScript里作用域的创建规则，咱们把它拆解开来说明白：

1. 先搞清楚：哪些东西会创建新作用域？ #

在JavaScript里，传统上只有函数会创建独立的作用域（ES5及以前）。而ES6引入let/const之后，用{}包裹的代码块也能创建块级作用域，但这和forEach的情况是两码事。

像for/while/if else这类属于流程控制语句，它们的大括号在ES5时代只是语法上的块，不会产生新的作用域——如果用var声明变量，这些变量会被提升到外层的函数或全局作用域里，整个循环/分支共享同一个变量。

2. forEach为什么能创建新作用域？ #

因为forEach本质上是数组的一个方法，它的工作逻辑是：遍历数组的每一个元素，然后调用你传入的回调函数。

重点来了：每一次调用回调函数，都会生成一个新的函数作用域！不管你在回调里用var/let/const声明变量，这些变量都属于当前这个回调函数的作用域，和其他循环迭代的作用域完全隔离。

举个对比例子你就懂了：

经典的for循环+var问题（无独立作用域）

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// 输出：3 3 3
// 原因：var声明的i是外层作用域的变量，三个定时器共享同一个i，循环结束后i已经变成3了

forEach的情况（有独立作用域）

[1, 2, 3].forEach(item => {
  setTimeout(() => console.log(item), 100);
});
// 输出：1 2 3
// 原因：每次forEach调用回调函数，item都是当前迭代的参数，属于这个回调的独立作用域，三个定时器各自引用不同的item

3. 补充：ES6后for循环也能有“独立作用域” #

如果在for循环里用let声明变量，也能达到类似forEach的效果：

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// 输出：0 1 2
// 原因：let在块级作用域中生效，每次循环都会创建一个新的i变量，定时器引用的是各自循环的i

但这是let带来的块级作用域特性，不是for循环本身创建的作用域哦。

核心总结 #

• for/while/if else是流程控制语句，本身不创建作用域；ES6后let/const让它们的代码块拥有了块级作用域，但这是块的特性。
• forEach的“独立作用域”来自于它每次迭代都会调用的回调函数——函数天生会创建独立作用域，这才是关键差异。

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