面试题：var、let、const三者之间的区别

最新推荐文章于 2024-04-15 16:20:18 发布

前端报刊

最新推荐文章于 2024-04-15 16:20:18 发布

阅读量800

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_36995521/article/details/115991160

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

区别：

（1）var是ES5提出的，let和const是ES6提出的。

（2）var声明的变量存在变量提升现象，let和const声明的变量不存在变量提升现象（遵循：“先声明，后使用”的原则，否则会报错）。

解析：var声明的变量存在变量提升现象：将变量提升到当前作用域的顶部，即变量可以在声明之前调用，值为undefined。

let和const声明的变量不存在变量提升现象：即它们所声明的变量一定要在声明后使用，否则会报错（ReferenceError错）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			console.log('a',a);//undefined
			var a = 1;
			
			console.log('b',b);//ReferenceError: Cannot access 'b' before initialization
			let b = 2;
			
			console.log('c',c);//ReferenceError: Cannot access 'c' before initialization
			const c = 3;
		</script>
	</body>
</html>
（3）var允许重复声明同一个变量，let和const在同一作用域下不允许重复声明同一个变量。

（4）var声明的变量会挂载到window上，let和const声明的变量则不会。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var a = 1;
			console.log('a',window.a);// 1
			
			let b = 2;
			console.log('b',window.b); // undefined
			
			const c = 3;
			console.log('c',window.c);// undefined
		</script>
	</body>
</html>
（5）var声明的变量不存在块级作用域（是函数级作用域），let和const声明的变量存在块级作用域并且声明的变量只在所声明的块级作用域内有效。

【补充】（1）块级作用域是指{}内有效的作用域

（2）var声明变量会有一定的缺点问题---

（a）内层变量可能会覆盖外层变量的问题
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var a = 2;
			function fun() {
				console.log('a', a);// undefined
				if(false){
					var a = 3;// 变量提升带来的，尽管存在块级作用域，但是var声明的变量会跨越这个域
				}
			}
			fun();
		</script>
	</body>
</html>
（b）用来计数的循环变量会泄露为全局变量
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var b = 'hello';
			for(var i = 0;i < b.length; i++){
				console.log(b[i]);
			}
			console.log(i);// 5， i循环结束后，泄露成了全局变量
		</script>
	</body>
</html>
（6）var不存在暂时性死区，let和const存在暂时性死区。

解析：只要块级作用域内存在let命令，那么它所声明的变量就会绑定到这个区域，不再受外部的影响。

（7）var、let声明的变量可以修改；const声明的变量一般是不可以修改的，一旦声明就必须立即初始化，不能留到以后赋值，这种情况主要是针对于基础类型（基本数据类型），而对于引用类型的变量是可以修改的。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">	
			const obj={
				name:'小明',
				age:12
			}
			obj.age = 20;
			console.log('age',obj);//{name: "小明", age: 20}
			console.log('age',obj.age);// 20
		</script>
	</body>
</html>

前端报刊

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
2
评论
面试题：var、let、const三者之间的区别

区别：（1）var是ES5提出的，let和const是ES6提出的。（2）var声明的变量存在变量提升现象，let和const声明的变量不存在变量提升现象（遵循：“先声明，后使用”的原则，否则会报错）。解析：var声明的变量存在变量提升现象：将变量提升到当前作用域的顶部，即变量可以在声明之前调用，值为undefined。 let和const声明的变量不存在变量提升现象：即它们所声明的变量一定要在声明后使用，否则会报错（ReferenceError错）...
复制链接

扫一扫