在ES6(ECMAScript 2015)之前，JavaScript中只有var一种变量声明方式，这导致了许多作用域相关的问题。ES6引入了let和const两种新的变量声明方式，彻底改变了JavaScript的作用域规则。本文将深入探讨let和const的特性、优势以及它们与var的区别。

1. var的问题与ES6的解决方案

1.1 var的局限性

在ES5及之前版本中，var声明存在几个主要问题：

1. 函数作用域：var声明的变量只有函数作用域，没有块级作用域
2. 变量提升：变量可以在声明前使用，值为undefined
3. 可重复声明：同一作用域内可以重复声明同名变量
4. 全局污染：在全局作用域声明的变量会自动成为window对象的属性

1.2 ES6的解决方案

ES6通过let和const引入了：

• 块级作用域：变量只在声明所在的代码块内有效
• 暂时性死区：变量在声明前不可访问
• 禁止重复声明：同一作用域内不能重复声明同名变量
• 更合理的全局行为：全局作用域声明的变量不会自动成为全局对象的属性

2. let声明

2.1 基本用法

let声明的变量具有块级作用域：

{let a = 10;var b = 1;
}console.log(a); // ReferenceError: a is not defined
console.log(b); // 1

2.2 特点详解

1. 块级作用域：

   • let声明的变量只在它所在的代码块内有效
   • 适用于if、for、while等任何代码块

2. 不存在变量提升：

   console.log(foo); // undefined
   console.log(bar); // ReferenceErrorvar foo = 2;
   let bar = 2;
   

3. 暂时性死区(TDZ)：

   • 在代码块内，使用let声明变量前，该变量不可用
   • 这确保了变量必须先声明后使用

4. 不允许重复声明：

   let a = 1;
   let a = 2; // SyntaxError
   

2.3 经典应用：循环计数器

let解决了var在循环中的常见问题：

// var的问题
for (var i = 0; i < 3; i++) {setTimeout(() => console.log(i), 0); // 输出3次3
}// let的解决方案
for (let i = 0; i < 3; i++) {setTimeout(() => console.log(i), 0); // 输出0,1,2
}

这是因为let为每次循环创建了一个新的块级作用域。

3. const声明

3.1 基本用法

const用于声明常量，一旦声明，值不能改变：

const PI = 3.1415;
PI = 3; // TypeError: Assignment to constant variable

3.2 特点详解

1. 必须初始化：

   const FOO; // SyntaxError: Missing initializer in const declaration
   

2. 块级作用域：与let相同

3. 暂时性死区：与let相同

4. 不允许重复声明：与let相同

5. 本质是变量指向的内存地址不变：

   • 对于基本类型数据(数值、字符串、布尔值)，值就保存在变量指向的内存地址
   • 对于复合类型数据(对象、数组)，变量指向的内存地址保存的只是一个指针

3.3 const与对象

const只能保证变量名指向的地址不变，不保证该地址的数据不变：

const obj = {};
obj.prop = 123; // 可以
obj = {}; // TypeErrorconst arr = [];
arr.push('Hello'); // 可以
arr = ['Dave']; // TypeError

如果需要完全不可变的对象，可以使用Object.freeze()：

const obj = Object.freeze({});
obj.prop = 123; // 静默失败或TypeError(严格模式)

4. let、const与var的对比

特性	var	let	const
作用域	函数	块级	块级
变量提升	是	否	否
暂时性死区	无	有	有
重复声明	允许	不允许	不允许
全局属性	是	否	否
必须初始化	否	否	是
值可变	是	是	仅对象内容可变

5. 最佳实践

1. 默认使用const：

   • 除非明确知道变量需要重新赋值，否则优先使用const
   • 这可以使代码更可预测，减少意外的变量修改

2. 需要重新赋值时使用let：

   • 如循环计数器、需要重新赋值的变量等

3. 避免使用var：

   • 除非需要支持非常旧的浏览器环境
   • 现代JavaScript开发中几乎没有使用var的必要

4. 对象冻结：

   • 如果确实需要完全不可变的对象，结合Object.freeze()使用

6. 兼容性与转译

对于需要支持旧浏览器的项目，可以使用Babel等工具将ES6代码转译为ES5代码。现代浏览器和Node.js环境已普遍支持let和const。

7. 结论

ES6的let和const为JavaScript带来了更合理的变量声明方式，解决了var带来的诸多问题。通过理解它们的特点和适用场景，开发者可以编写出更安全、更易维护的代码。在实践中，建议优先使用const，必要时使用let，而避免使用var，这已成为现代JavaScript开发的共识。

掌握let和const是深入理解现代JavaScript的重要一步，它们不仅仅是新的语法糖，更是JavaScript语言设计理念进步的重要体现。