var与let、const的区别以及代码总结

最新推荐文章于 2022-04-14 12:27:57 发布

原创最新推荐文章于 2022-04-14 12:27:57 发布 · 179 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #web #java

css3 专栏收录该内容

18 篇文章

订阅专栏

本文详细探讨了JavaScript中var、let和const在声明变量时的差异，包括是否会挂载在window上、是否存在变量提升、块级作用域、重复声明、暂时性死区以及变量的可修改性。通过实例代码展示了它们各自的行为特点。

一、声明的变量是否会挂载在window上？

var声明的变量会挂载在window上，而let和const声明的变量不会

代码如下：

var a = 100;
console.log(a,window.a);    // 100 100

let b = 10;
console.log(b,window.b);    // 10 undefined

const c = 1;
console.log(c,window.c);    // 1 undefined

二、是否存在变量提升？

var声明变量存在变量提升，let和const不存在变量提升

代码如下：

console.log(a); // undefined  ===>  a已声明还没赋值，默认得到undefined值
var a = 100;

console.log(b); // 报错：b is not defined  ===> 找不到b这个变量
let b = 10;

console.log(c); // 报错：c is not defined  ===> 找不到c这个变量
const c = 10;

三、是否存在块级作用域？

let和const声明形成块作用域，var声明不存在块级作用域

代码如下：

if(1){
    var a = 100;
    let b = 10;
}

console.log(a); // 100
console.log(b)  // 报错：b is not defined  ===> 找不到b这个变量

if(1){

    var a = 100;
        
    const c = 1;
}
 console.log(a); // 100
 console.log(c)  // 报错：c is not defined  ===> 找不到c这个变量

四、是否允许重复声明变量？

同一作用域下let和const不能声明同名变量，而var可以

代码如下：

var f = 4;
var f = 5;
console.log(5) //5

let g = 6;
let g = 7;
console.log(7) //SyntaxError: Identifier 'g' has already been declared

const h = 8;
const h = 9;
console.log(h) //SyntaxError: Identifier 'g' has already been declared

五、是否存在暂时性死区？

let和const存在暂时性死区。即只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。

代码如下：

var tmp = 123;
if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}
//以上代码if后面{}形成了块级作用域，由于使用let声明了tmp，则这个变量就绑定了块区域，在声明之前使用，会报错。

六、是否能修改声明的变量？

var和let可以。
const声明一个只读的常量。一旦声明，常量的值就不能改变。const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

const f = 10;
// f= 11;
// console.log(f) //报错 不能进行重复声明

const obj = {
    name: '小明',
    age: 18
}
obj.age = 20
console.log(obj) //{ name: '小明', age: 20 }  
//const声明常量，不允许对变量重新赋值。对于引用类型的值而言，只要在栈内存保存的地址值不变即可。