js-var和let以及const区别

js-var、let、const区别

对技术、金融理财小说感兴趣的可以直接搜索公众号【林太白】,持久更新!

总结对比表

var、let 和 const 都是JavaScript 中用来声明变量的关键字,现代开发中,优先使用 const ,如果变量需要被重新赋值,则使用 let, var已经逐步**放弃使用了。 **

主要区别如下

特性 var let const
作用域 函数作用域 块级作用域 块级作用域
变量提升 提升 (值为 undefined) 不提升 (存在 TDZ) 不提升 (存在 TDZ)
重复声明 允许 不允许 不允许
初始化 可选 可选 必须
重新赋值 允许(默认undefined) 允许(默认undefined) 不允许
挂载到window 是 否 否

var、let、const对比

1. 作用域

**var**:函数作用域

只有在函数内部声明的 var 变量才是局部变量,在块级作用域(如 if、for、while 代码块)中声明的 var 变量会"泄露"到外部。

**let**** / **const**:块级作用域**

只在当前的代码块({} 内部)有效。这更符合其他编程语言(如 Java、C++)的习惯,能有效防止变量污染。

javascript 复制代码
// var 的例子
function testVar() {
  if (true) {
    var a = 10;
  }
  console.log(a); // 输出 10 (if 块结束后依然可以访问)
}

// let/const 的例子
function testLet() {
  if (true) {
    let b = 20;
    const c = 30;
  }
  // console.log(b); // 报错: ReferenceError: b is not defined
  // console.log(c); // 报错: ReferenceError: c is not defined
}

2. 变量提升

var:存在变量提升

在代码执行前,var 声明的变量会被提升到函数或全局作用域的顶部,但赋值不会提升。此时变量的值是 undefined。

let/const :存在"暂时性死区"

虽然它们在声明前也会被放入词法环境,但从代码块开始到变量声明语句之间,访问这些变量会直接报错。这个区域被称为"暂时性死区"。

javascript 复制代码
console.log(myVar); // 输出 undefined (变量提升,但未赋值)
var myVar = 10;

console.log(myLet); // 报错: ReferenceError: Cannot access 'myLet' before initialization (TDZ)
let myLet = 20;

3. 重复声明

var:允许重复声明

在同一作用域内,可以多次使用 var 声明同一个变量,后声明的会覆盖前面的(这很容易导致 Bug)。

let/const:不允许重复声明

在同一作用域内,重复声明同一个变量会直接报错。

javascript 复制代码
var a = 1;
var a = 2; // 合法,a 变为 2

let b = 1;
// let b = 2; 
// 报错: SyntaxError: Identifier 'b' has already been declared

4. 初始化与赋值

var** / **let

声明时可以不初始化 (不赋值),默认值为 undefined。

声明后,可以任意修改其值。

const

声明时必须初始化(必须赋值),否则会报错。

声明后,不允许重新赋值(指针不可变)

注意 :如果 const 声明的是一个引用类型(对象或数组),虽然不能修改指针指向的地址,但可以修改对象内部的属性或数组的内容。

javascript 复制代码
// let
let x;
x = 10; // 合法
x = 20; // 合法

// const
// const y; // 报错: Missing initializer in const declaration
const y = 100;
// y = 200; // 报错: Assignment to constant variable.

// const 引用类型的特例
const person = { name: "Alice" };
person.name = "Bob"; // 合法!修改的是对象属性,不是变量指向的地址
// person = {};      // 报错!试图修改变量指向的地址

5. 全局对象属性

var

在全局作用域声明的 var 变量,会自动成为 window 对象(浏览器环境)的属性。

let** / **const

在全局作用域声明的 let 和 const 变量,不会 挂载到 window 对象上,它们存在于一个新的概念"Script"作用域中。

javascript 复制代码
var a = 1;
let b = 2;
console.log(window.a); // 输出 1
console.log(window.b); // 输出 undefined

开发建议

  1. **默认使用 **const:绝大多数变量在声明后都不应该被改变,使用 const 可以让代码意图更清晰,也更安全。
  2. **其次使用 **let:只有当你明确知道变量的值会在后续代码中被修改时(如循环计数器 for (let i=0...)),才使用 let。
  3. **禁止使用 **var:为了代码的可维护性和避免潜在 Bug,现代 JavaScript 开发(ES6+)中已经不再需要 var。
相关推荐
程序员老赵4 小时前
Docker 部署 Dolibarr:轻松搭建开源 ERP/CRM 平台
运维·前端·后端
星禾元亨4 小时前
同一件事有三份资料,AI 该信哪一份?冲突判定、优先级链与处置流程
前端·人工智能
Dovis(誓平步青云)4 小时前
家里设备越来越多,如何用一张空间地图控制灯光和温度![
android·java·前端·javascript·人工智能·电脑
穆梓兰煊4 小时前
TS5.7 vs 裸JS:AI应用少3坑
前端
榆瓷4 小时前
闲着没事,我把 WebGPU 的样板代码封成了一个库
前端
136096757234 小时前
页面打不开不是 Nginx 的错
前端·后端
liangshanbo12155 小时前
高级前端面试题:package.json 常见字段
前端·json
CappuccinoRose5 小时前
输入事件进阶
前端·javascript·输入事件
ShineWinsu6 小时前
对于Redis:AOF持久化的解析
linux·数据库·redis·缓存·面试·持久化·aof
liangshanbo12157 小时前
面试题:前端工程化中 Tree Shaking的原理是什么?
前端·treeshaking