js中var、let、const的区别详解

不知道是不是有小白跟我一样习惯的所有定义变量的时候都用var… 知道真相的我眼泪掉下来系列。接下来我就将这三个详细通过代码来描述一下。

1、var 定义的变量挂载在window上

.通过var定义的变量是挂在windos上的，而let与const并不会。

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

打印出来：

2、var a = 1 与 a = 1 的区别

首先他们俩都是挂载在window上的但是不同的是:

var a = 1;是挂在window上的变量，而 a = 1; 是挂载在window上的属性；
因此导致 a = 1 可以用delete删除，而var a = 1 不能用delete删除。

var a = 1;
b = 2;
console.log("deleteBeforeA",a,window.a);	// deleteBeforeA 1 1
console.log("deleteBeforeB",b,window.b);	// deleteBeforeB 2 2
console.log("deleteA",delete a);			// deleteA false
console.log("deleteB",delete b);			// deleteB true
console.log("deleteBefore",a,window.a);		// deleteBefore 1 1
console.log("deleteBefore",b,window.b);		// Uncaught ReferenceError: b is not defined

3、var 定义的变量存在变量提升

.通过var定义的变量存在变量提升，而let与const并不会。

console.log(a);		// undefined
console.log(b);		// 报错 Cannot access 'b' before initialization
console.log(c);

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

4、let和const声明形成块作用域

if(1){
	var a = 1;
	let b = 2;		// b 的作用域范围处于{}里
}
console.log(a);		// 1
console.log(b);		// 报错  b is not defined

if(1){
 	var a = 1;
    const b = 2;	// b 的作用域范围处于{}里
}
console.log(a);		// 1
console.log(b);		// 报错  b is not defined

5、var 可重复声明，let与const不可以

var a = 1;
var a = 2;
console.log(a);		// 2

let b = 1;
let b = 2;
console.log(b);		// 报错 Identifier 'b' has already been declared

const c = 1;
const c = 2;
console.log(c);		// 报错 Identifier 'c' has already been declared

6、var、let 可以重复赋值，const不可以

var a = 1;
a = 2;
console.log(a);		// 2

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

const c = 1;
c = 2;
console.log(c);		// 报错 Uncaught TypeError: Assignment to constant variable

需要注意的是，如果const定义的是引用类型的话，是可以更改值的。

const a = {
   name:"张三",
    age:19
}
a.name = "李四";
a.age = 20;
console.log(a);   

打印出来：