ES6 let 关键字完整指南

1. 块级作用域

1.1 let vs var 作用域对比

// var - 函数作用域
function varExample() {var x = 1;if (true) {var x = 2;  // 同一个 xconsole.log(x);  // 2}console.log(x);  // 2
}// let - 块级作用域
function letExample() {let x = 1;if (true) {let x = 2;  // 不同的 xconsole.log(x);  // 2}console.log(x);  // 1
}

1.2 循环中的块级作用域

// var 在循环中的问题
for (var i = 0; i < 3; i++) {setTimeout(() => console.log(i), 1);  // 3, 3, 3
}// let 在循环中的正确行为
for (let i = 0; i < 3; i++) {setTimeout(() => console.log(i), 1);  // 0, 1, 2
}

2. 不允许重复声明

2.1 同一作用域重复声明

// var 允许重复声明
var x = 1;
var x = 2;  // 正常工作// let 不允许重复声明
let y = 1;
let y = 2;  // SyntaxError: Identifier 'y' has already been declared// var 和 let 也不能重复声明
var z = 1;
let z = 2;  // SyntaxError: Identifier 'z' has already been declared

2.2 不同作用域的声明

// 不同块级作用域可以声明同名变量
let x = 1;
if (true) {let x = 2;  // 正常工作console.log(x);  // 2
}
console.log(x);  // 1

3. 没有变量提升

3.1 var 的变量提升

console.log(x);  // undefined
var x = 1;// 等同于
var x;
console.log(x);
x = 1;

3.2 let 的非提升特性

console.log(x);  // ReferenceError: Cannot access 'x' before initialization
let x = 1;// 函数中也是一样
function example() {console.log(x);  // ReferenceErrorlet x = 1;
}

4. 暂时性死区（TDZ）

4.1 基本概念

// 在声明之前使用变量会导致 TDZ 错误
{console.log(x);  // ReferenceErrorlet x = 1;
}

4.2 复杂场景中的 TDZ

// 函数参数中的 TDZ
function example(x = y, y = 2) {return [x, y];
}
example();  // ReferenceError: y is not defined// 条件语句中的 TDZ
if (true) {console.log(x);  // ReferenceErrorlet x = 1;
}

5. 不与顶层对象挂钩

5.1 var 与顶层对象的关系

// 浏览器环境
var x = 1;
console.log(window.x);  // 1// Node.js 环境
var y = 1;
console.log(global.y);  // 1

5.2 let 与顶层对象的隔离

// 浏览器环境
let x = 1;
console.log(window.x);  // undefined// Node.js 环境
let y = 1;
console.log(global.y);  // undefined

6. 实际应用场景

6.1 循环中的闭包

// 使用 var 的问题
const buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {buttons[i].addEventListener('click', function() {console.log('Button ' + i + ' clicked');  // 总是显示最后一个 i});
}// 使用 let 的解决方案
for (let i = 0; i < buttons.length; i++) {buttons[i].addEventListener('click', function() {console.log('Button ' + i + ' clicked');  // 正确显示当前按钮的索引});
}

6.2 模块封装

// 使用 let 创建私有变量
{let privateData = 'secret';function doSomething() {console.log(privateData);}// 外部无法访问 privateDatawindow.api = { doSomething };
}

7. 最佳实践

7.1 推荐用法

// ✅ 使用 let 声明可变变量
let count = 0;
count++;// ✅ 在循环中使用 let
for (let i = 0; i < array.length; i++) {// ...
}// ✅ 在块级作用域中使用 let
if (condition) {let temp = calculate();// ...
}

7.2 避免的模式

// ❌ 避免在声明前使用变量
function wrong() {console.log(x);  // 避免 TDZ 错误let x = 1;
}// ❌ 避免重复声明
let x = 1;
let x = 2;  // 语法错误// ❌ 避免与 var 混用
var y = 1;
let y = 2;  // 语法错误

8. 与 const 的对比

8.1 基本区别

// let 允许重新赋值
let x = 1;
x = 2;  // 正常工作// const 不允许重新赋值
const y = 1;
y = 2;  // TypeError: Assignment to constant variable

8.2 对象属性

// let 和 const 都允许修改对象属性
let obj1 = { a: 1 };
obj1.a = 2;  // 正常工作const obj2 = { a: 1 };
obj2.a = 2;  // 正常工作
obj2 = {};   // TypeError: Assignment to constant variable