var、let、const的区别以及用法

J伍叁

已于 2022-03-18 23:53:23 修改

阅读量6.5k

点赞数 13

文章标签： javascript 开发语言 ecmascript

于 2022-03-18 00:12:16 首次发布

本文链接：https://blog.csdn.net/weixin_61994154/article/details/123515475

版权

以写博客的形式记录学习JavaScript高级程序设计的过程，也就是自己的笔记，以及理解。若有错请及时纠正我！

var关键字：

定义变量可以使用var，后面跟变量名，如var a = 1；这样就是将1赋值给a；当然a可以保存任何类型的值。我们还可以改变a保存的值，也可以改变值的类型，如var a=1；==> a ='hello'；

var的作用域

在使用var定义一个变量的时候，它会成为包含它的函数的局部变量，

如：

function txt(){
    var a = 1;//局部变量
}
txt();
console.log(a)//会报错

若想将var定义的变量成为全局变量，则可以这样：

function txt(){
    a =1;//全局变量
}
txt();
console.log(a)//1

在去掉var关键字之和，a就成为了全局变量，只要调用了txt()这个函数，就会定义这个变量，并且会在外部访问到。

（注：虽然可以通过省略var来实现定义全局变量，但不推荐这么做，因为这在维护起来会很难维护，容易看代码的时候看迷。而且在严格模式下，这样省略就会造成给为声明的变量赋值，就会报错。）

如果你觉得你定义多个变量的时候就要写多次var，其实你可以这样：

var a=1,b=2,c=3;

这样你就一次性定义了三个变量。

var声明提升

function foo() { 
 console.log(age); 
 var age = 26; 
} 
foo(); // undefined

这样写是不会报错的，因为在使用这个关键字声明的变量会自动提升到函数作用域的顶部，也就是这样：

function foo() { 
 var age; 
 console.log(age); 
 age = 18; 
} 
foo(); // undefined

这个变量提升也就可以实现多次使用var声明同一个变量也没啥问题，通常可以说最后声明的变量将前面的变量覆盖掉了，如：

function foo() { 
 var age = 16; 
 var age = 9; 
 var age = 18; 
 console.log(age); 
} 
foo(); // 18

let关键字

let和var的作用是差不多的，都是用来声明变量的，最大的区别就是，let声明的范围是块级作用域，而var是函数作用域。

（注：块级作用域：即在 {}花括号内的域，由 { }包括，比如if {}块、for () {}块。函数作用域：变量在声明它们的函数体以及这个函数体嵌套的任意函数体都是有定义的。）

如：

if (true) { 
 var name = '伍叁'; 
 console.log(name); // 伍叁 
} 
console.log(name); // 伍叁

if (true) { 
 let age = 21; 
 console.log(age); // 21
} 
console.log(age); // Error: age 没有定义

这里的age在if块外了，所以不能被引用。

var可以声明一个变量多次，而let就不行了，let是不允许在同一个块级作用域中出现冗余声明的哈。如：

var name; 
var name; 

let age; 
let age; // Error；标识符 age 已经声明过了

但是JavaScript引擎会记录用于变量声明的标识符及其所在的块级作用域，所以嵌套使用相同的标识符不会报错，这是因为在块级作用域中没有重复声明。如：

var name ='伍叁';
consloe.log(name); //伍叁

if(true){
var name='嗨嗐';
console.log(name);//嗨嗐
}
//-----------

let age =18;
consloe.log(age)//18
if(true){
let age = 21;
consloe.log(age)//21
}

对申明冗余报错不会因为混用let和var而受影响，这两个声明的并不是不同的变量，它们只是指出变量在作用域中是如何存在的。如：

 let name = "111"
    var name = 'aaa'
    console.log(name)

暂时性死区

上面说了var会有变量提升，而let却没有。如：

// name 会被提升
console.log(name); // undefined 
var name = '伍叁'; 

//------------------
// age 不会被提升
console.log(age); // ReferenceError：age 没有定义
let age = 18;

这就说明了，在log的时候，age还没有声明，这就会出现暂时性死区。

全局变量

在使用var这个关键字的时候，它会成为window对象的属性，而let则不会。如：

var name = '伍叁'; 
console.log(window.name); // '伍叁' 

//------------
let age = 18; 
console.log(window.age); // undefined

虽然let也是在全局声明的，但是为了避免出现error，所以要确保整个页面不能重复声明同一个变量。（注：要知道函数作用域和块级作用域的区别）

for循环中的let

在let没有出现之前，for循环定义的迭代变量会渗透出去，也就是渗透到循环体外部。如：

for (var i = 0; i < 5; ++i) { 
 // 循环逻辑 
} 
console.log(i); // 5

在let出现之后这个问题就没了，因为let有块级作用域，如：

for (let i = 0; i < 5; ++i) { 
 console.log(i)// 会输出 0、1、2、3、4
} 
console.log(i); // ReferenceError: i 没有定义

const声明

const与let基本相同，区别是const是用来定义常量的，尝试修改const声明的变量会导致运行上报错。const也不可以重复声明，const也是块级作用域。如：

//赋值
const name = '伍叁'
name='阿巴阿巴'//error

//重复声明
// const 也不允许重复声明
const name = 'tt'; 
const name = 'Nice'; // Error

//块级作用域
const name = '伍叁'; 
if (true) { 
 const name = '嘿哈'; 
} 
console.log(name); // 伍叁

const变量如果引用的是一个对象，修改这个对象内部的属性则不会报错。

const data = {}; 
data.name = '伍叁'; // 没问题的啦老铁

但const不能像let一样用来声明迭代的变量，如for循环，因为迭代的变量会自增。当然这样对于for...in和for...of这种循环意义就不一样了。如：

for (const key in {a: 1, b: 2}) { 
 console.log(key); 
} 
// a, b 


for (const value of [1,2,3,4,5,6,7,8]) { 
 console.log(value); 
} 
// 1, 2, 3, 4, 5, 6, 7, 8