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。
相关推荐
chunyublog12 分钟前
HDFS 上传文件名空格问题排障教程
前端·javascript·npm
?abc!18 分钟前
(贪心)621. 任务调度器
java·前端·c#
萧瑟余晖35 分钟前
Spring Data Redis详解
spring·面试
摸鱼仙人~1 小时前
校招帮简历字段匹配架构分析报告
java·前端·架构
陈随易1 小时前
副业搞钱点子之赛事与活动
前端·后端·程序员
电梯界知识分子1 小时前
景德镇老房重新设计阶段规划楼梯与电梯,1.7m×1.6m空间装400kg观光电梯,棕色框架茶色玻璃适配中式装修
大数据·服务器·前端·网络·家用电梯
Shell运维手记1 小时前
Shell 脚本入门课堂讲解
前端·chrome
Profile排查笔记1 小时前
有哪些开源指纹浏览器项目?先核对客户端、内核与许可证
前端·人工智能·后端·自动化
CodeGL2 小时前
16、Python Web开发
开发语言·前端·python
王中阳Go2 小时前
面试官问什么,取决于你简历上写了什么:后端转 Agent 岗的项目准备法
后端·面试·agent