在JavaScript的发展历程中，变量声明方式经历了从var到let/const的重要演变。这一变化不仅影响了代码的编写风格，更关系到程序的安全性和可维护性。本文将通过经典示例深入解析var、let和const的区别，并给出最佳实践建议。
一、var的特性与问题
1. 函数作用域
var声明的变量具有函数作用域，即变量只在声明它的函数内部有效，在函数外部无法访问。
functiontest(){vara=10;console.log(a);// 输出：10}test();console.log(a);// 报错：a is not defined2. 变量提升
var声明的变量会发生变量提升，即变量可以在声明之前使用，值为undefined。
console.log(b);// 输出：undefinedvarb=20;3. 可重复声明
var允许在同一作用域内重复声明同一个变量，后声明的会覆盖前面的。
varc=30;varc=40;console.log(c);// 输出：404. 经典问题：for循环中的setTimeout
let.js文件中的示例展示了var的典型问题：
for(vari=0;i<5;i++){setTimeout(()=>{console.log(i);},0);}// 输出：5 5 5 5 5问题分析：
- var声明的i是函数作用域，在for循环外部也可访问
- 由于变量提升，整个for循环共享同一个i变量
- setTimeout是异步执行，当回调函数执行时，for循环已经结束，i的值为5
- 因此5个回调函数都打印出5
二、let的特性与优势
let是ES6引入的新声明方式，旨在解决var的各种问题。
1. 块级作用域
let声明的变量具有块级作用域，即变量只在声明它的代码块（用{}包裹）内有效。
{letd=50;console.log(d);// 输出：50}console.log(d);// 报错：d is not defined2. 无变量提升
let声明的变量不存在变量提升，必须先声明后使用，否则会抛出ReferenceError。
console.log(e);// 报错：Cannot access 'e' before initializationlete=60;3. 不可重复声明
let不允许在同一作用域内重复声明同一个变量，否则会抛出SyntaxError。
letf=70;letf=80;// 报错：Identifier 'f' has already been declared4. 解决for循环问题
使用let修复let.js中的示例：
for(leti=0;i<5;i++){setTimeout(()=>{console.log(i);},0);}// 输出：0 1 2 3 4解决方案分析：
- let声明的i是块级作用域，每次循环都会创建一个新的i变量
- 每个setTimeout回调函数捕获的是当前循环迭代的i值
- 因此回调函数执行时，会打印出对应的0、1、2、3、4
三、const的特性与注意事项
const也是ES6引入的新声明方式，用于声明常量。
1. 块级作用域
const声明的变量同样具有块级作用域。
{constg=90;console.log(g);// 输出：90}console.log(g);// 报错：g is not defined2. 无变量提升
const声明的变量不存在变量提升，必须先声明后使用。
console.log(h);// 报错：Cannot access 'h' before initializationconsth=100;3. 不可重复声明
const不允许在同一作用域内重复声明同一个变量。
consti=110;consti=120;// 报错：Identifier 'i' has already been declared4. 不可修改？
const声明的变量基本类型值不可修改，但引用类型的属性可以修改。
// 基本类型constj=130;j=140;// 报错：Assignment to constant variable// 引用类型constobj={name:'张三',age:20};obj.age=21;// 允许修改属性console.log(obj);// 输出：{ name: '张三', age: 21 }obj={name:'李四'};// 报错：Assignment to constant variable注意：const保证的是变量指向的内存地址不变，而不是内存地址中的内容不变。
四、三者的核心区别对比
| 特性 | var | let | const |
|---|---|---|---|
| 作用域 | 函数作用域 | 块级作用域 | 块级作用域 |
| 变量提升 | 有 | 无 | 无 |
| 重复声明 | 允许 | 不允许 | 不允许 |
| 修改值 | 允许 | 允许 | 基本类型不允许，引用类型属性允许 |
| 暂时性死区 | 无 | 有 | 有 |
五、最佳实践建议
优先使用const：对于不需要修改的值，优先使用const，提高代码的安全性和可读性。
合理使用let：对于需要修改的值，使用let，避免var的作用域问题。
尽量避免使用var：除非需要兼容旧版浏览器，否则应避免使用var，减少作用域相关的bug。
const用于引用类型：对于对象和数组等引用类型，使用const可以防止变量被重新赋值，但仍可修改其属性或元素。
for循环中的变量：在for循环中，优先使用let声明循环变量，避免闭包问题。
函数参数：函数参数默认是const，不要尝试修改函数参数的引用。
六、经典示例的三种实现对比
1. 使用var（有问题）
for(vari=0;i<5;i++){setTimeout(()=>{console.log(i);},0);}// 输出：5 5 5 5 52. 使用let（推荐）
for(leti=0;i<5;i++){setTimeout(()=>{console.log(i);},0);}// 输出：0 1 2 3 43. 使用const（不适合动态变量）
// const不适合用于需要递增的循环变量for(consti=0;i<5;i++){// 报错：Assignment to constant variable}// 但可以用于遍历数组constarr=[1,2,3,4,5];for(constitemofarr){setTimeout(()=>{console.log(item);},0);}// 输出：1 2 3 4 5七、总结
var、let和const的引入反映了JavaScript语言的不断完善和发展。从var的函数作用域到let/const的块级作用域，从允许重复声明到严格的变量管理，这一演变体现了 JavaScript 对安全性和可维护性的追求。
在实际开发中，我们应该根据变量的具体用途选择合适的声明方式：
- 对于不会改变的值，使用const
- 对于需要改变的值，使用let
- 尽量避免使用var
通过合理使用这三种声明方式，我们可以写出更安全、更可靠、更易维护的JavaScript代码。
八、扩展阅读
- MDN Web Docs：let
- MDN Web Docs：const
- ECMAScript 2015 (ES6) 规范
希望本文能帮助你深入理解var、let和const的区别，并在实际开发中做出正确的选择。如果你有任何疑问或建议，欢迎在评论区留言讨论！
