js中const,let,var的区别及作用域

电玩女神 2022-04-08 12:53 98阅读 0赞

要说他们的区别，首先需要了解作用域的概念

作用域永远都是任何一门编程语言中的重中之重，因为它控制着变量与参数的可见性与生命周期。首先理解两个概念：块级作用域与函数作用域。

**1.块级作用域**

任何一对花括号 \{\} 中的语句集都属于一个块，在这之中定义的所有变量在代码块外都是不可见的，我们称之为块级作用域。比如if()\{\} ,for()\{\}中的花括号都是块级作用域

**2.函数作用域**

很明显是function()\{\}的形式，定义在函数中的参数和变量在函数外部是不可见的

而三个变量中 var是忽视块级作用域的，也就是说在块级作用域中用var定义，在外部是可以访问到变量值得，var只有在函数作用域中声明外部才不能访问。而且var声明的变量会被声明提前，被提升到作用域顶部，并被赋值为undefinded

const和let是有块级作用域概念的，也就是说在块级作用域中用const或者let定义，外部无法访问变量！且不可以声明提前

具体的区别和案例我在下面列举

### 1.const ###

const就是一个定义的常量，在声明的时候就必须要赋值，且这个值不能再被改变，否则会报错。

重点：

1）当声明时不赋值报错

const a;

![20181214102901220.png][]

2） 当试图改变const常量时报错

const a=1;
    a=2;

![20181214103123440.png][]

3）在同一作用域中重复定义报错

const a=1;
    const a=2;

![20181214103208459.png][]

4）不会被声明提前（与var有区别）

console.log(a)
    const a=2;

![20181214103527915.png][]

5）可以声明块级作用域的变量，块级作用域外无法访问内部变量！

if(true){
    	const a=1;
    }
    console.log(a)

![20181214103738762.png][]

### 2.let ###

let和var比较相似，区别就是let不能被声明提前且可以声明块级作用域的变量，还有就是不能被重复声明

1）可以声明时不赋值

let a;
    a=1;
    console.log(a)

2）在同一作用域中不可以重复定义

let a;
    let a=1;
    console.log(a)

或

let a=1;
    var a=1;
    console.log(a)

都报错

![20181214105309107.png][]

3）不会被声明提前（与var有区别）

console.log(a)
    let a=1;

![20181214110344435.png][]

4）可以声明块级作用域的变量，块级作用域外无法访问内部变量！

if(true){
    	let a=1;
    }
    console.log(a)

for(let a=0;a<10;a++){
    	
    }
    console.log(a)

let a=1;
    if(true){
    	let a=2;
    }
    console.log(a) //1

![2018121410583688.png][]

###  3.var ###

var我们最熟悉了，就是声明变量用的，但它不能定义块级作用域变量，且会被声明提前

1）可重复定义

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

2) 声明时可以不赋值

var a;
    console.log(a) //undefined

3）js程序在正式执行之前，会将所有var 声明的变量和function声明的函数，预读到所在作用域的顶部，但是对var 声明只是将声明提前，赋值仍然保留在原位置

console.log(a)  //undefined
    var a=10; 
    console.log(a) //10

相当于变成了这样

var a;
    console.log(a)  //undefined
    a=10; 
    console.log(a) //10

4）无法定义块级作用域变量，在块级作用域中定义相当于定义了一个全局变量

for(var a=0;a<10;a++){
    	
    }
    console.log(a)  //10

console.log(a) //undefined
    if(true){
    	var a=1;
    }
    console.log(a) //1

小结：建议多使用let，毕竟for中的i一般不想被泄露出来，而且if中定义的变量一般只想在条件成立时才定义，实现这些都需要用let，而且let没有变量被声明提前的困扰，其他两者没有太大区别，所以还是改成用let声明变量吧~

[20181214102901220.png]: /images/20220405/c59dfd49d5ce43e1be9b217d037284cf.png
[20181214103123440.png]: /images/20220405/18ae84d1c58540bea7e692d5e76874ec.png
[20181214103208459.png]: /images/20220405/b54a7a01f1e84364963f658404e90885.png
[20181214103527915.png]: /images/20220405/5f67e341e42947a486966de499a67484.png
[20181214103738762.png]: /images/20220405/089b1266288d4837924d9611b5e578eb.png
[20181214105309107.png]: /images/20220405/dbf37f91e2c14926b00b2982b3f3f7b6.png
[20181214110344435.png]: /images/20220405/71ac7efc41304df89ea8cb9174f03b1c.png
[2018121410583688.png]: /images/20220405/b542f9a4a31347c29fc4bea253e2afd6.png