for循环使用var和let声明变量的区别

for循环

使用var声明变量

for循环使用 var 声明变量 i，最后输出的是 10。

var arr = [];
for (var i = 0; i < 10; i++) {
  arr[i] = function () {
    console.log(i);
  };
}
arr[6](); // 10

变量 i 是 var 命令声明的，在全局范围内都有效，所以全局只有一个变量 i。每一次循环，变量 i 的值都会发生改变，而循环体内被赋给数组 arr 的函数内部的 console.log(i) ，里面的 i 指向的就是全局的i。也就是说，所有数组 arr 的成员里面的 i，指向的都是同一个 i，所以运行时输出的是最后一轮的 i 的值10。

使用let声明变量

for循环使用 let ，声明变量 i，声明的变量 i 仅在块级作用域内有效，最后输出的是 6。

var arr = [];
for (let i = 0; i < 10; i++) {
  arr[i] = function () {
    console.log(i);
  };
}
arr[6](); // 6

变量 i 是 let 声明的，当前的 i 只在本轮循环有效，所以每一次循环的 i 其实都是一个新的变量，所以最后输出的是6。

如果每一轮循环的变量 i 都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？

这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量 i 时，就在上一轮循环的基础上进行计算。

设置循环变量和循环体是两个作用域

for 循环设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

代码正确运行，输出了 3 次 abc。这表明循环体内部的变量 i 与设置循环变量 i 不在同一个作用域，有各自单独的作用域（同一个作用域不可使用 let 重复声明同一个变量）。