当前位置：首页 > news >正文

为什么需要let和const？

news 2026/6/14 15:13:26

var、let、const主要在作用域、可变性、变量提升等方面有主要区别，可应用于不同的需求场景
let 和 const 引入了块级作用域(block scope)，是 ES6 推荐的变量声明方式。
var 使用的是函数作用域(function scope)，存在一些容易导致错误的特性。

为什么需要let和const？

let和const的出现解决了var使用过程中的几个痛点：

解决了变量提升导致的混乱：var声明的变量会被提升到其作用域顶部（变量提升），并用undefined初始化，能在定义前访问而不报错（输出undefined），违反直觉。为解决这一问题引入了const和let，因这两者存在暂时性死区（在此区域外访问会抛出错误：ReferenceError）
提供了块级作用域：var没有块级作用域，导致在for循环或if语句中声明的变量会泄漏到外部，而let和const仅在声明他们的代码块（如for循环内或if语句内）有效，提供了更强的封装性。
引入常量：const允许声明一个值不能被重新赋值的常量，有助于提高代码的可维护性和健壮性（防止意外修改）

API与用法

var

作用域：函数作用域或全局作用域。
提升：变量提升，初始化为undefined。
重复声明：允许在同一作用域内重复声明。
可变性：可以重新赋值。

function varExample(){ console.log(a);//输出：undefined（变量提升） var a=10; console.log(a);//输出：10 if（true）{ a=20;// 覆盖了函数作用域中的a console.log(a);//输出：20 } console.log(a);//输出：20 }

let

作用域：块级作用域 ({...})。
提升：不提升（存在暂时性死区）。
重复声明：不允许在同一作用域内重复声明。
可变性：可以重新赋值。

function letExample(){ console.log(b);// 输出：ReferenceError: Cannot access 'b' before initialization (TDZ) let b = 10; console.log(b);// 输出：10 if(true){ console.log(b);// 输出：10 let b=20;// 注意：如果这里改为b=20，下面的console就都是20 console.log(b);// 输出:20，在块级作用域内可以被重新赋值 } console.log(b);// 输出：10， }

const

作用域：块级作用域({...})。
提升：不提升（存在暂时性死区）。
重复声明：不允许在同一作用域重复声明。
可变性：不能重新赋值，声明时必须出示话。

function constExample (){ const c=30; console.log(c);// 输出：30 // c=40;//TypeError: Assignment to constant variable. // const c=40;//无法重新声明块范围变量“c”。 // 注意：对于对象或数组，const 保证的是变量绑定的引用不变， // 但对象或数组自身的内容是可变的。 const obj={name:'hello'}; obj.name='你好';// 这是允许的 console.log(obj.name);// 输出：你好 }

关键注意事项：

暂时性死区：let和const声明的变量，从其作用域开始到声明语句之间是暂时性死区（TDZ）。在此区域内访问变量会抛出ReferenceError。
全局对象属性：在全局作用域下，使用var声明的变量会成为window（浏览器环境）或（Node.js环境）对象的属性。cont和let不会。
const的不变性：const保证的是变量指向的内存地址（引用）不可变，而不是该地址中的数据不可变。对于引用类型（如对象、数组），其内部属性或元素是可以修改的。
优先使用const：默认应优先使用const来声明变量，只有当确定变量需要被重新赋值时，才使用let。这能增强代码的可靠性，避免不必要的变量修改。

什么是暂时性死区？

定义：

从块级作用域开始到变量声明语句之间的区域，在此区域内访问变量会抛出ReferenceError。

暂时性死区常见陷阱：

即使外层有同名变量，内层的let声明仍会创建新的绑定和 TDZ。

let x = 'outer'; { console.log(x); // ❌ ReferenceError // 不是因为外层有 x，而是本作用域的 let x 声明导致 TDZ let x = 'inner'; }

function foo(x = y, y = 2) { return [x, y]; } foo(); // ❌ ReferenceError: Cannot access 'y' before initialization // 原因：计算 x = y 时，y 还在 TDZ 中

// 正常情况 typeof undeclaredVar; // ✅ "undefined" // TDZ 中 typeof x; // ❌ ReferenceError let x;

为什么需要暂时性死区？

// 没有 TDZ 时（假设）： var tmp = true; if (tmp) { console.log(x); // 可能期望访问外层的 x var x = 5; // 实际会变量提升，不会报错但行为混乱 } // 有 TDZ 时： let tmp = true; if (tmp) { console.log(x); // ✅ 明确报错，避免意外行为 let x = 5; // 块级作用域清晰 }