JavaScript变量三兄弟：var、let、const的终极选择指南

一、变量世界的三大规则

在JavaScript的江湖里，var、let、const如同三兄弟，各自掌握着不同的作用域法则。老大哥var带着”变量提升”的绝技统治ES5时代，而let和const则带着块级作用域的新规则改写ES6后的编码生态。理解它们的核心差异，是每个开发者写出健壮代码的必修课。

二、作用域差异深度解析

1. 作用域类型对比

var的函数作用域：
“`javascript
function testVar() {
if(true) {
var count = 10;
}
console.log(count); // 正常输出10
}
“`

let/const的块级作用域：
“`javascript
function testLet() {
if(true) {
let count = 10;
const MAX = 99;
}
console.log(count); // 报错：count is not defined
console.log(MAX); // 报错：MAX is not defined
}
“`

2. 变量提升与暂时性死区

var的变量提升：
“`javascript
console.log(name); // undefined
var name = “Dora”;
“`

let的暂时性死区：
“`javascript
console.log(name); // 报错：Cannot access ‘name’ before initialization
let name = “Dora”;
“`

3. 函数提升的特殊规则

“`javascript
console.log(sayHi); // 输出函数定义
function sayHi() {}
var sayHi = “hello”;
“`

三、变量三兄弟的选择策略

1. 声明优先级原则

黄金法则：
① const优先 → ② let次之 → ③ var特殊场景使用

2. 具体使用场景

3. 避坑指南

典型错误案例：
“`javascript
for(var i=0; i<3; i++){ setTimeout(() => console.log(i), 100); // 输出3次3
}

for(let j=0; j<3; j++){ setTimeout(() => console.log(j), 100); // 正确输出0,1,2
}
“`

四、现代编码最佳实践

1. 严格模式强制规范

“`javascript
“use strict”;
// 未声明变量直接使用会报错
test = 123; // ReferenceError
“`

2. 对象冻结技术

“`javascript
const config = Object.freeze({
apiUrl: ‘https://api.example.com’,
timeout: 5000
});
“`

3. 循环中的优化策略

“`javascript
// 缓存数组长度优化
const items = [/ 大数据数组 /];
for(let i=0, len=items.length; i五、从ES6看变量声明演进

发展路线图：
var(ES5) → let/const(ES6) → 模式匹配(ES2020提案)

总结

掌握变量三兄弟的核心差异，本质上是理解JavaScript从”函数作用域”到”块级作用域”的进化历程。在现代开发中，const声明应成为默认选择，let处理需要变化的变量，var则退居二线成为历史代码的见证者。这种选择策略不仅能避免90%的作用域陷阱，还能显著提升代码的可维护性和可读性。