JS中var、let和const的区别详解

发布时间:2026/7/9 2:16:19
JS中var、let和const的区别详解 在JavaScript中变量声明是编程的基础。ES6ES2015引入了let和const关键字为变量声明带来了新的特性和更严格的规则。本文将对比var、let和const的核心区别。一、var、let和const的基本区别1. 作用域Scopevar - 函数作用域var声明的变量具有函数作用域function scope。functionexample(){if(true){varx10;}console.log(x);// 输出: 10在if块外部仍然可以访问}let/const - 块级作用域let和const声明的变量具有块级作用域block scope。if(true){lety20;constz30;}console.log(y);// ReferenceError: y is not definedconsole.log(z);// ReferenceError: z is not defined2. 变量提升Hoistingvar - 会提升初始化为undefinedconsole.log(a);// 输出: undefinedvara5;let/const - 会提升但存在暂时性死区console.log(b);// ReferenceError: Cannot access b before initializationletb10;3. 重复声明var - 允许重复声明varx10;varx20;// 允许let/const - 不允许重复声明lety10;lety20;// SyntaxError: Identifier y has already been declared4. 全局对象属性var - 会成为全局对象的属性varglobalVarglobal;console.log(window.globalVar);// 输出: global浏览器环境let/const - 不会成为全局对象的属性letglobalLetglobal;console.log(window.globalLet);// 输出: undefined二、let和const的额外区别1. 重新赋值let - 允许重新赋值letcounter0;counter1;// 允许const - 不允许重新赋值constPI3.14159;PI3.14;// TypeError: Assignment to constant variable2. 初始化要求let - 可以不初始化letvalue;// 允许value100;const - 必须初始化constvalue;// SyntaxError: Missing initializer in const declaration3. const与对象/数组const声明的对象或数组可以修改内容但不能重新赋值。constperson{name:Alice};person.age25;// 允许修改属性constnumbers[1,2,3];numbers.push(4);// 允许修改数组// person {}; // TypeError: Assignment to constant variable三、使用场景建议优先使用const- 当变量的值不需要改变时其次使用let- 当变量的值需要改变时避免使用var- 除非在维护旧代码四、关键示例示例1循环中的变量// var的问题for(vari0;i3;i){setTimeout(()console.log(i));// 全部输出: 3}// let的正确行为for(letj0;j3;j){setTimeout(()console.log(j));// 输出: 0, 1, 2}示例2const对象操作conststudent{name:张三,score:85};student.score90;// 允许// student {}; // 不允许总结特性varletconst作用域函数作用域块级作用域块级作用域变量提升是初始化为undefined是存在TDZ是存在TDZ重复声明允许不允许不允许全局对象属性是否否重新赋值允许允许不允许必须初始化否否是最佳实践默认使用const需要重新赋值时使用let避免使用var掌握这些区别对于编写健壮的JavaScript代码至关重要。