var、let和const的区别

一个臭屁的技术菜鸟

已于 2024-03-22 11:28:54 修改

阅读量363

点赞数 6

文章标签：前端 javascript vue.js

于 2024-02-24 22:50:59 首次发布

本文链接：https://blog.csdn.net/m0_63442426/article/details/136275830

版权

本文详细比较了JavaScript中的var、let和const在声明、作用域、可重复性、值修改以及全局范围上的差异，以及let和const特有的暂时性死区概念。

摘要由CSDN通过智能技术生成

1、相同点

var、let和const三者都是用来声明变量的

var a = 1;
let b = 2;
const c = 3;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

2、不同点

1）声明提升（变量提升）

var可以先调用在声明，但是let和const必须先声明后调用。

console.log(a); // undefined
console.log(b); // 报错
console.log(c); // 报错
var a = 1;
let b = 2;
const c = 3;

2）作用域不同

var是函数作用域，不能再函数外面使用；let和const是块级作用域不能再{}外面使用。

// 函数作用域
function fn() {
    var a = 1;
    let b = 2;
    const c = 3;
};
fn();

// 都不能输出
console.log(a);
console.log(b);
console.log(c);

// 块级作用域
if(1) {
    var a = 1;
    let b = 2;
    const c = 3;
};

// 可以输出，结果为1
console.log(a);
// 不可以输出，因为在大括号外面
console.log(b);
console.log(c);

3）可以被重复声明（变量覆盖）

var可以重复声明一个变量，后面声明的值会覆盖前面声明的值；let和const不能重复声明。

var a = 666;
var a = 888;
console.log(a); // 888

// 报错
let b = 1;
let b = 2;
console.log(b);

4)声明后可以修改变量的值

var和let声明的变量可以重新赋值；const基本类型声明的变量不可以修改，但是复杂数量类型声明变量可以修改其属性（const指针指向的地址是不可以改变的，但地址指向的内容是可以改变的）。

var a = 0;
a = 1;
let b = 2;
b = 3;
const c = 4;
c = 5;
const obj = {
    name:'小明'，
    age:18
};
obj.age = 20;
// 不报错
console.log(a); // 2
console.log(b); // 3
console.log(obj.age);  // 20

// 报错
console.log(c);

5)声明的变量在全局内有效

var是全景变量，会添加到全局对象windows上；let和const不能；

var a = 1;
let b = 2;
const c = 3;

console.log(windows.a); // 1
console.log(windows.b); // undefined
console.log(windows.c); // undefined

6）暂时性死区

var不存在暂时性死区；let和const存在暂时性死区，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

// 使用 var 不存在暂时性死区
console.log(a); // 输出 undefined
var a = 10;
console.log(a); // 输出 10

// 使用 let 存在暂时性死区
console.log(b); // 报错：Uncaught ReferenceError: Cannot access 'y' before initialization
let b = 20;
console.log(b); // 输出 20

// 使用 const 也存在暂时性死区
console.log(c); // 报错：Uncaught ReferenceError: Cannot access 'z' before initialization
const c = 30;
console.log(c); // 输出 30