揭秘 JavaScript 中for循环中var和let的奥妙

JavaScript 中的 for 循环

for 循环是一种用于重复执行某段代码的语句。它在 JavaScript 中有两种常见的形式：

// 使用 var
for (var i = 0; i < 10; i++) {
  // 代码块
}

// 使用 let
for (let i = 0; i < 10; i++) {
  // 代码块
}

var 和 let 的作用域

在 JavaScript 中，变量的作用域决定了它在代码中的可见性。var 声明的变量具有函数作用域，而 let 声明的变量具有块级作用域。

// 全局作用域
var globalVariable = 10;

// 函数作用域
function myFunction() {
  var functionVariable = 20;

  // 块级作用域
  if (true) {
    let blockVariable = 30;
  }

  // console.log(blockVariable); // 报错：blockVariable 未定义
}

console.log(globalVariable); // 10
console.log(functionVariable); // 20
// console.log(blockVariable); // 报错：blockVariable 未定义

在上面的代码中，globalVariable 是一个全局变量，它的作用域是整个程序。functionVariable 是一个函数作用域变量，它的作用域是 myFunction 函数。blockVariable 是一个块级作用域变量，它的作用域是 if 语句块。

for 循环中的 var 和 let

在 for 循环中，使用 var 声明的变量的作用域是整个 for 循环，而使用 let 声明的变量的作用域是循环的每次迭代。

// 使用 var
for (var i = 0; i < 10; i++) {
  console.log(i); // 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
}

console.log(i); // 10

// 使用 let
for (let i = 0; i < 10; i++) {
  console.log(i); // 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
}

// console.log(i); // 报错：i 未定义

在上面的代码中，使用 var 声明的变量 i 在 for 循环结束后仍然存在，并且它的值是 10。这是因为 var 声明的变量的作用域是整个 for 循环。使用 let 声明的变量 i 在每次迭代后都会被销毁，因此在 for 循环结束后，它就不存在了。

闭包问题

在 JavaScript 中，闭包是指一个函数可以访问其父函数作用域中的变量。当在 for 循环中使用 var 声明的变量时，可能会出现闭包问题。

// 使用 var
for (var i = 0; i < 10; i++) {
  setTimeout(function() {
    console.log(i); // 10, 10, 10, 10, 10, 10, 10, 10, 10, 10
  }, 1000);
}

在上面的代码中，setTimeout 函数是一个异步函数，它会在 1 秒后执行。当 setTimeout 函数执行时，i 的值已经变为 10 了。因此，setTimeout 函数每次执行时都会输出 10。这是因为 var 声明的变量 i 在 for 循环结束后仍然存在，并且它的值是 10。

为了避免闭包问题，可以在 for 循环中使用 let 声明变量。

// 使用 let
for (let i = 0; i < 10; i++) {
  setTimeout(function() {
    console.log(i); // 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
  }, 1000);
}

在上面的代码中，使用 let 声明的变量 i 在每次迭代后都会被销毁，因此 setTimeout 函数每次执行时都会输出一个不同的值。

总结

在 for 循环中，使用 var 声明的变量的作用域是整个 for 循环，而使用 let 声明的变量的作用域是循环的每次迭代。为了避免闭包问题，建议在 for 循环中使用 let 声明变量。