JS中var、let和const的区别详解

亦凉 2023-10-05 12:27 7阅读 0赞

# **目录** #

一、概述

二、var

1、作用域

说明：

代码演示：

运行结果：

2、提升

定义：

三、let

说明：

代码演示：

运行结果：

一个大大的疑问：

一个经典的关于 var 和 let 的一个例子：

四、const

1、const定义的变量不可修改

说明：

代码演示：

运行结果：

2、真的不可以修改吗

代码演示：

运行结果：

五、总结

六、参考资料

--------------------

# 一、概述 #

在ES5中，声明变量只有var关键字，声明函数只有function关键字；

因为var声明的变量，内层变量可能覆盖外层变量的问题以及用来计数的循环变量泄露为全局变量；

在ES6之后，声明的方式有 var 、 let 、 const 、 function 、 class，我们来重点讨论var、let和const的区别；

# 二、var #

## 1、作用域 ##

### 说明： ###

使用var声明一个变量，如果在函数之内，则作用域在当前函数之内；如果在函数之外，则作用域在全局；

### 代码演示： ###

<template>
    	<div>
    		<h1>学习测试！</h1>
    	</div>
    </template>
    
    <script>
    	var a = 1;//此时a在函数外，是全局变量
    	export default{
    		data() {
    			return {
    				
    			}
    		},
    		created() {
    			//页面创建之后，分别调用两个函数进行测试
    			this.init();
    			this.initEnd();
    		},
    		methods:{
    			init(){
    				var b = 2;//此时b在函数体之内，作用域仅在当前函数体内
    				console.log("A" + a);//这里能输出
    				console.log("B" + b);//这里能输出
    			},
    			initEnd(){
    				console.log("A" + a);//这里能输出
    				console.log("B" + b);//这里会报错：ReferenceError: b is not defined
    			}
    		}
    	}
    </script>
    
    <style lang="less" scoped>
    </style>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

## 2、提升 ##

### 定义： ###

函数声明和变量声明总是被JavaScript解释器隐式地提升(hoist)到包含他们的作用域的最顶端；

**无论 var 出现在一个作用域的哪个位置，这个声明都属于当前的整个作用域，在其中到处都可以访问到；**

只有变量声明才会提升，对变量赋值并不会提升；

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

**该代码段跟下列代码段是一样的逻辑：**

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

**而如果对未声明过的变量进行操作，就会报错：**

console.log(b);//假设b未声明过，Uncaught ReferenceError: b is not defined

# 三、let #

### 说明： ###

let是块级作用域，函数内部使用let定义后，对函数外部无影响；

let 声明的变量不存在变量提升**（?）**，换一种说法，就是 let 声明存在**暂时性死区**（TDZ）；

### 代码演示： ###

<template>
    	<div>
    		<h1>学习测试！</h1>
    	</div>
    </template>
    
    <script>
    	let a = 100;
    	export default{
    		data() {
    			return {
    				
    			}
    		},
    		created() {
    			//页面创建之后，分别调用两个函数进行测试
    			this.init();
    			this.initEnd();
    		},
    		methods:{
    			init(){
    				let a = 1;
    				console.log("A" + a);//1
    			},
    			initEnd(){
    				console.log("A" + a);//100
    			},
    		}
    	}
    </script>
    
    <style lang="less" scoped>
    </style>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1][]

### 一个大大的疑问： ###

**网上都说let声明的变量不存在变量提升，但是我在vue中声明的let变量就存在变量提升！**

**未声明演示：**

<template>
    	<div>
    		<h1>学习测试！</h1>
    	</div>
    </template>
    
    <script>
    	export default{
    		data() {
    			return {
    				
    			}
    		},
    		created() {
    			//页面创建之后，分别调用两个函数进行测试
    			this.init();
    		},
    		methods:{
    			init(){
    				let a = 1;
    				console.log("A" + a);
    				console.log("B" + b);//未声明b
    			},
    		}
    	}
    </script>
    
    <style lang="less" scoped>
    </style>

**未声明运行结果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2][]

**声明为let变量演示：**

<template>
    	<div>
    		<h1>学习测试！</h1>
    	</div>
    </template>
    
    <script>
    	export default{
    		data() {
    			return {
    				
    			}
    		},
    		created() {
    			//页面创建之后，分别调用两个函数进行测试
    			this.init();
    		},
    		methods:{
    			init(){
    				let a = 1;
    				console.log("A" + a);
    				console.log("B" + b);
    				let b = 2; //声明let b
    			},
    		}
    	}
    </script>
    
    <style lang="less" scoped>
    </style>

**声明为let变量演示结果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3][]

**结语：我不知道这是为什么，可能是vue的原因吧，我是个前端初学者；**

### 一个经典的关于 var 和 let 的一个例子： ###

for (var i = 0; i < 10; i++) {
        setTimeout(function(){
            console.log(i);
        },100)
    };

该代码运行后，会在控制台打印出10个10，如果修改为（使用let，**暂时性死区**）：

for (let i = 0; i < 10; i++) {
        setTimeout(function(){
            console.log(i);
        },100)
    };

则该代码运行后，就会在控制台打印出0-9；

# 四、const #

## 1、const定义的变量不可修改 ##

### 说明： ###

const除了具有let的特征外，**const**定义的变量，一旦**定义**必须立即赋值，且之后不可修改，也就是**常量**；

### 代码演示： ###

<template>
    	<div>
    		<h1>学习测试！</h1>
    	</div>
    </template>
    
    <script>
    	let a = 100;
    	export default{
    		data() {
    			return {
    				
    			}
    		},
    		created() {
    			//页面创建之后，分别调用两个函数进行测试
    			this.init();
    		},
    		methods:{
    			init(){
    				const a = 1;
    				console.log("A" + a);//1
    				a = 2;
    				console.log("A" + a);
    			},
    		}
    	}
    </script>
    
    <style lang="less" scoped>
    </style>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4][]

## 2、真的不可以修改吗 ##

### 代码演示： ###

<template>
    	<div>
    		<h1>学习测试！</h1>
    	</div>
    </template>
    
    <script>
    	let a = 100;
    	export default{
    		data() {
    			return {
    				
    			}
    		},
    		created() {
    			//页面创建之后，分别调用两个函数进行测试
    			this.init();
    		},
    		methods:{
    			init(){
    				const obj = {a:1,b:2};
    				console.log(obj.a);//1
    				obj.a = 3;
    				console.log(obj.a);//3
    			},
    		}
    	}
    </script>
    
    <style lang="less" scoped>
    </style>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5][]

准确的说，是 const 声明创建一个值的只读引用。但这并不意味着它所持有的值是不可变的，只是变量标识符不能重新分配；

# 五、总结 #

var 声明的变量属于函数作用域，let 和 const 声明的变量属于块级作用域；

var 存在变量提升现象，而 let 和 const 没有此类现象；

var 变量可以重复声明，而在同一个块级作用域，let 变量不能重新声明，const 变量不能修改；

# 六、参考资料 #

（不分先后顺序，感谢这些文章的作者！）

[https://blog.csdn.net/weixin\_40920953/article/details/80355255][https_blog.csdn.net_weixin_40920953_article_details_80355255]

[https://blog.csdn.net/qq\_36784628/article/details/80966826][https_blog.csdn.net_qq_36784628_article_details_80966826]

[https://blog.csdn.net/qq\_30216191/article/details/81042842][https_blog.csdn.net_qq_30216191_article_details_81042842]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201026084925137.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201026092106401.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201026091337827.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201026091536769.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2020102609365332.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201026093919433.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_weixin_40920953_article_details_80355255]: https://blog.csdn.net/weixin_40920953/article/details/80355255
[https_blog.csdn.net_qq_36784628_article_details_80966826]: https://blog.csdn.net/qq_36784628/article/details/80966826
[https_blog.csdn.net_qq_30216191_article_details_81042842]: https://blog.csdn.net/qq_30216191/article/details/81042842