块级作用域在循环中的应用

块级作用域的基本概念

ECMAScript 6引入了let和const关键字，它们带来了真正的块级作用域。与var的函数作用域不同，let和const声明的变量只在当前代码块内有效。块级作用域由一对花括号{}界定，常见于if语句、for循环、while循环等结构中。

{
  let x = 10;
  var y = 20;
}
console.log(x); // ReferenceError: x is not defined
console.log(y); // 20

循环中的变量提升问题

在ES5中，使用var声明循环变量会导致变量提升，所有迭代共享同一个变量：

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i); // 输出5次5
  }, 100);
}

这种现象是因为var没有块级作用域，循环结束后i的值变为5，所有定时器回调都引用同一个i。

let在循环中的行为

ES6的let为每次迭代创建新的绑定，相当于为每次循环创建新的作用域：

for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i); // 输出0,1,2,3,4
  }, 100);
}

实际上，JavaScript引擎在内部为每次循环创建新的词法环境：

{
  // 第一次循环
  let i = 0;
  setTimeout(function() { console.log(i); }, 100);
}
{
  // 第二次循环
  let i = 1;
  setTimeout(function() { console.log(i); }, 100);
}
// ...以此类推

for循环的特别之处

for循环头部的let声明有一个特殊行为：每次迭代都会初始化一个新的变量，但会使用上一次迭代结束时的值来初始化：

let i = 100;
for (let i = 0; i < 3; i++) {
  console.log(i); // 0,1,2
}
console.log(i); // 100

const在循环中的应用

const在循环中的行为取决于循环类型。在普通的for循环中，const不能用于计数器变量，因为需要修改：

for (const i = 0; i < 5; i++) { // TypeError: Assignment to constant variable
  // ...
}

但在for...of和for...in循环中可以使用const，因为每次迭代都会创建新的绑定：

const arr = [1, 2, 3];
for (const item of arr) {
  console.log(item); // 1,2,3
}

循环中的闭包问题解决

块级作用域彻底解决了循环中的闭包问题。不再需要立即执行函数(IIFE)来创建作用域：

// ES5解决方案
for (var i = 0; i < 5; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j);
    }, 100);
  })(i);
}

// ES6解决方案
for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 100);
}

块级作用域与异步代码

块级作用域在处理异步操作时特别有用，可以确保回调函数访问正确的变量值：

function fetchData(urls) {
  for (let i = 0; i < urls.length; i++) {
    fetch(urls[i]).then(response => {
      console.log(`Response ${i}:`, response); // 正确的索引
    });
  }
}

循环中的暂时性死区

let和const存在暂时性死区(TDZ)，在循环中也要注意：

for (let i = 0; i < 3; i++) {
  console.log(i); // 正常
  let i = 10; // SyntaxError: Identifier 'i' has already been declared
}

嵌套循环中的作用域

嵌套循环中，每个循环都有自己的块级作用域：

for (let i = 0; i < 2; i++) {
  for (let j = 0; j < 2; j++) {
    console.log(i, j); // 0 0, 0 1, 1 0, 1 1
  }
}

循环中的块级函数

ES6允许在块级作用域中声明函数，其行为类似于let声明的变量：

for (let i = 0; i < 3; i++) {
  function log() {
    console.log(i);
  }
  setTimeout(log, 100); // 0,1,2
}

性能考虑

使用块级作用域的循环变量可能比var有轻微的性能开销，因为需要为每次迭代创建新的词法环境。但在大多数情况下，这种差异可以忽略不计，而代码的可读性和正确性更为重要。

实际应用场景

1. 事件处理：为多个元素添加事件监听器时，确保每个处理器访问正确的索引
2. 异步操作：在循环中发起多个异步请求时，确保回调函数使用正确的循环变量
3. 模块化代码：避免循环变量污染外部作用域

// 动态创建按钮并添加事件处理器
const container = document.getElementById('container');
for (let i = 0; i < 5; i++) {
  const button = document.createElement('button');
  button.textContent = `Button ${i}`;
  button.addEventListener('click', () => {
    console.log(`Clicked button ${i}`);
  });
  container.appendChild(button);
}

与其他特性的结合

块级作用域可以与解构赋值、默认参数等ES6特性结合使用：

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

for (const { id, name } of users) {
  console.log(`${id}: ${name}`);
}

浏览器兼容性考虑

虽然现代浏览器都支持块级作用域，但在旧版浏览器中可能需要转译：

// Babel转译后的代码
var _loop = function _loop(i) {
  setTimeout(function() {
    console.log(i);
  }, 100);
};

for (var i = 0; i < 5; i++) {
  _loop(i);
}