JavaScript let 和 const

JavaScriptlet和const学习笔记

ES6 (ECMAScript 2015) 引入了let和const，解决了var存在的变量提升、作用域污染和重复声明等问题。

1.核心对比表

2.let详解

基本用法

用于声明块级作用域的变量，允许重新赋值。

// 块级作用域示例if(true){letx=10;console.log(x);// 10}console.log(x);// ReferenceError: x is not defined// 循环中的经典用法for(leti=0;i<3;i++){setTimeout(()=>console.log(i),100);}// 输出：0, 1, 2 (每个循环都有独立的 i)

暂时性死区 (Temporal Dead Zone, TDZ)

在代码块中，let声明的变量在声明语句之前访问会报错。

console.log(a);// ReferenceError: Cannot access 'a' before initializationleta=5;

对比var：var会提升并初始化为undefined，而let在 TDZ 期间完全不可访问。

不允许重复声明

letx=1;letx=2;// SyntaxError: Identifier 'x' has already been declared// 函数参数也不能重复functiontest(a,a){}// SyntaxError

3.const详解

基本用法

用于声明常量，声明时必须初始化，且不能重新赋值。

constPI=3.14159;PI=3.14;// TypeError: Assignment to constant variable.// 必须初始化constx;// SyntaxError: Missing initializer in const declaration

对象和数组的“常量”陷阱

const保证的是变量指向的内存地址不变，而不是对象内容不变。

constarr=[1,2,3];arr.push(4);// ✅ 允许：修改数组内容arr=[5,6];// ❌ 报错：不能重新赋值给新数组constobj={name:'Alice'};obj.age=25;// ✅ 允许：修改对象属性obj={};// ❌ 报错：不能重新赋值给新对象

冻结对象 (Deep Freeze)

如果需要完全禁止修改对象，需使用Object.freeze()。

constfrozenObj=Object.freeze({name:'Bob'});frozenObj.name='Tom';// 静默失败 (严格模式下报错)

4.作用域对比：varvslet/const

函数作用域 vs 块级作用域

// var: 函数作用域functiontestVar(){if(true){varx=1;}console.log(x);// 1 (x 泄露到了函数外部)}// let/const: 块级作用域functiontestLet(){if(true){lety=2;constz=3;}console.log(y);// ReferenceErrorconsole.log(z);// ReferenceError}

全局作用域

vara=1;letb=2;constc=3;console.log(window.a);// 1 (var 挂载到 window)console.log(window.b);// undefined (let 不挂载)console.log(window.c);// undefined (const 不挂载)

5.常见陷阱与最佳实践

陷阱 1：循环中的闭包问题

// ❌ var 导致所有定时器共享同一个 ifor(vari=0;i<3;i++){setTimeout(()=>console.log(i),100);}// 输出：3, 3, 3// ✅ let 为每次循环创建新的绑定for(leti=0;i<3;i++){setTimeout(()=>console.log(i),100);}// 输出：0, 1, 2

陷阱 2：解构赋值

// 解构声明let[a,b]=[1,2];const{name,age}={name:'Tom',age:20};// 重新赋值[a,b]=[3,4];// ✅ 允许 (let)// { name, age } = { name: 'Jerry', age: 25 }; // ❌ 报错 (const 需加括号)({name,age}={name:'Jerry',age:25});// ✅ 允许 (加括号避免语法歧义)

最佳实践

1. 默认使用const：如果变量不需要重新赋值，优先用const。
2. 需要变化时用let：仅在变量需要重新赋值时使用let。
3. 避免使用var：除非维护旧代码，否则不再使用var。
4. 声明即初始化：const必须立即赋值。
5. 命名规范：常量通常使用UPPER_SNAKE_CASE(如MAX_COUNT)。

6.快速决策指南

// 1. 这个值以后会变吗？// 是 -> let// 否 -> const// 2. 是对象或数组吗？// 是 -> const (内容可变，但引用不变)// 否 -> const (基本类型)// 3. 需要循环计数器吗？// 是 -> let (for 循环)// 示例constMAX_USERS=100;// 常量letcount=0;// 计数器constusers=[];// 数组引用不变，内容可变constconfig={theme:'dark'};// 对象引用不变

7.总结

核心原则：“能不用let就不用let，能不用var就绝对不用var。”