JavaScript教程-7-JavaScript中var、let、const 关键字的区别

最新推荐文章于 2022-09-15 20:49:03 发布

木易yves

最新推荐文章于 2022-09-15 20:49:03 发布

阅读量127

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_35938103/article/details/104864884

版权

javascript 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

1：介绍let关键字

-- ES6, 全称 ECMAScript 6.0 ,是 JavaScript的一个版本标准,2015.06 发布。在ES6中对let 关键做了定义。 let关键字是用来定义变量的、和var 的作用类似，但是有诸多不同。

2：let 和 var的不同点介绍

-- var 定义的变量没有块级作用域，而let定义的变量有。看示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>var、let、const关键字</title>
		<script type="text/javascript">
			
			//a1 在 代码块中定义，但是可以在代码块外访问。
			if(true){
				var a1 = 10;
			}
			//打印的结果为10
			alert(a1);
			
			
			if(true){
				let a2 = 11;
				//a2只能在代码块中访问。
				alert(a2);
			}
			//不能在这里访问a2.会报错 a2 is not defined。
			alert(a2);

		</script>
	</head>
	<body>
	</body>
</html>

-- var 定义的变量会自动添加全局window对象属性。也就是可以通过window访问var 定义的变量。而let 不可以。看示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>var、let、const关键字</title>
		<script type="text/javascript">
			var a1 = 1;
			let a2 = 3;
			
			alert(a1);//输出1
			alert(window.a1);//输出1
			alert(a2);//输出3
			alert(window.a2);//输出undefined
		</script>
	</head>
	<body>
	</body>
</html>

-- var变量会提前加载，let 变量只有执行到定义的变量的地方才会加载。示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>var、let、const关键字</title>
		<script type="text/javascript">
			//因为a1 会提前装载，相当于a1已经声明，只是没有赋值，所以输出：undefined。
			alert(a1);
			var a1 = 1;
			
			let a2;
			//a2声明没赋值  所以输出为 undefined 
			alert(a2);//undefined
			
			//a3 不会提前装载  所以报错：Cannot access 'a3' before initialization
			alert(a3);
			let a3 = 3;
		</script>
	</head>
	<body>
	</body>
</html>

-- var可以重复定义相同的变量，let不行。示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>var、let、const关键字</title>
		<script type="text/javascript">
			
			var a1 = 10;
			alert(a1);//10
			var a1 = 20;
			//可以重复定义，不建议。输出20
			alert(a1);
			
			//上面的代码执行，需要将下面重读的代码注释才可以。
			let b1 = 10;
			alert(b1);
			//这里直接报错，不能执行。 Identifier 'b1' has already been declared
			let b1 = 20;
			alert(b1);
			
		</script>
	</head>
	<body>
	</body>
</html>

-- 总结：var 的语法比较宽松，不够严格。同名的局部变量可能会污染全局的同名变量。let 定义的变量的语法更加的严格，更加接近java的定义。局部的不会污染全局的，所以建议使用let定义变量。

3：const关键字的使用

-- const定义的变量必须初始化，而且不能修改。必须先定义后使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>var、let、const关键字</title>
		<script type="text/javascript">
			//正确使用
			const a = 10;
			alert(a);
			//上面的代码需要注释掉后面的错误代码才可以执行。
			
			//报错：Missing initializer in const declaration
			const b;
			
			//报错：Cannot access 'c' before initialization
			alert(c);
			const c = "1";
			
		</script>
	</head>
	<body>
	</body>
</html>

PS：笔者有大量的学习资料：java、python、大数据、人工智能、前端等。需要的小伙伴请加群：711408961

笔者的b站中有一些教学视频分享。感兴趣的小伙伴可以关注：https://space.bilibili.com/412362068