JS 中 var、let、const 的核心区别-拓冰建站

在 JavaScript 变量声明中，var、let、const 是三种核心声明方式。其中 var 是 ES5 及之前的旧语法，let、const 是 ES6 新增的块级作用域声明语法。

本文将从变量提升、重复声明、赋值特性、三大核心维度拆解，搭配可运行代码案例

一、核心区别速览

特性	var	let	const
变量提升	支持，初始值为 undefined	支持，存在暂时性死区	支持，存在暂时性死区
重复声明	允许	不允许（同作用域）	不允许（同作用域）
重新赋值	允许	允许	不允许（只读常量）
初始赋值	可声明不赋值	可声明不赋值	必须初始化赋值

二、详细特性拆解（附代码案例）

变量提升与暂时性死区
JS 代码执行分为编译阶段和执行阶段，变量提升发生在编译阶段。

var：变量提升后默认赋值为 undefined，声明前访问不会报错。
let / const：存在变量提升，但禁止声明前访问，形成暂时性死区（TDZ），直到声明语句执行完毕，死区结束。

// var 变量提升// var 变量提升console.log(a);// undefinedvara=10;// let/const 暂时性死区console.log(b);// Uncaught ReferenceError: Cannot access 'b' before initializationletb=20;console.log(c);// 同上报错constc=30;

重复声明规则

var：允许在同一作用域重复声明同名变量，会覆盖之前的值，无任何报错，极易引发隐蔽 bug。
let / const：同一作用域内禁止重复声明同名变量，直接报错，代码更严谨。

// var 重复声明// var 重复声明varnum=1;varnum=2;console.log(num);// 2（无报错，直接覆盖）// let 重复声明letcount=1;letcount=2;// Uncaught SyntaxError: Identifier 'count' has already been declared// const 重复声明同理报错conststr="test";conststr="demo";// 语法报错

赋值与修改特性

var / let：属于可变变量，声明后可任意重新赋值。
const：属于只读常量，必须声明时初始化赋值，且不允许整体重新赋值。
重点误区：const 并非完全不可变，它仅保证变量的内存地址不变。如果是引用类型（数组、对象），可以修改内部属性和元素。

// 1. const 必须初始化consttest;// Uncaught SyntaxError: Missing initializer in const declaration// 2. 基本类型不可重新赋值constscore=100;score=99;// 报错：Assignment to constant variable// 3. 引用类型可修改内部数据constobj={name:"李四"};obj.age=20;// 合法：修改对象属性obj.name="王五";// 合法console.log(obj);// {name: '王五', age: 20}constarr=[1,2,3];arr.push(4);// 合法：修改数组内容console.log(arr);// [1,2,3,4]