ES6 let和const的使用

最新推荐文章于 2024-12-09 14:22:58 发布

原创最新推荐文章于 2024-12-09 14:22:58 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

ES6 专栏收录该内容

8 篇文章

订阅专栏

本文深入探讨JavaScript中var、let及const的声明方式与作用域特性，包括变量提升、块级作用域、循环变量访问问题及解决方案。通过具体代码示例解析不同声明方式的差异与应用场景。

文章目录

1.var声明和提升机制

JavaScript中在函数作用域或者全局作用域中通过关键字var 声明的变量，会被提升到当前作用域的顶部声明的变量（提升机制）
例如下列代码

<script>
		function getValue(item){
			if(item){
				var value = "1";
				return value;
			}else {
				return null
			}
		}
	</script>

在else中也可以访问到value，值为undefined，这是因为在预编译环节进行了函数声明整体提升和变量声明提升，将代码修改了下面这样

<script>
		function getValue(item){
			var value;
			if(item){
				value = "1";
				return value;
			}else {
				return null
			}
		}
	</script>

变量的声明提升了，但是初始化并没有提升，因此在else中仍然可以访问到value这个变量，只是没有进行初始化，因此值为undefined。

2.块级声明

块级声明用于声明在指定块的作用域之外无法访问的变量，存在于

函数内部
块中（字符{和}之间的区域）

3.let声明

特点：

使用let声明可以将变量的作用域限制在当前代码块中
let声明不存在变量提升
变量不能重复声明
不影响作用域链

4.const声明

特点基本与let一样
特点：

使用const声明可以将常量的作用域限制在当前代码块中
const声明不存在常量提升
常量不能重复声明
不影响作用域链
不可以为const定义的常量再赋值

用const声明对象
const不允许修改绑定，但是可以修改值。对于数组和对象元素的修改，不算对常量的修改,不会报错；

<script>
		const person = {
			name:'galaxy'
		}
</script>

在这里插入图片描述

5.常见用处

使用var创建变量，在循环之外仍然能够访问

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.container{
			width: 100%;
			height: 200px;
			text-align: center;
		}
		.container .item{
			width: 20px;
			height: 20px;
			display: inline-block;
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
	</div>
	<script>
		var divs = document.getElementsByClassName('item');
		for(var i = 0; i < divs.length; i++){
			divs[i].onclick = function(){
				console.log(i);
			}
		}
	</script>
</body>
</html>

预期输出的结果可能是0~3，但是他输出的都是4，这是因为循环里面每次迭代都同时共享着变量i，循环内部创建的函数都保留着对相同变量的引用，循环结束时i的值为4，所以每次调用console.log(i);输出的都是4；

为了解决这个问题，引入了立即执行函数，利用闭包解决这个问题。

<script>
		var divs = document.getElementsByClassName('item');
		for(var i = 0; i < divs.length; i++){
			(function(i){
				divs[i].onclick = function(){
				console.log(i);
			}
		}(i))
		}
	</script>

依次点击输出结果为0,1,2,3

拥有了let声明以后，我们能够用更加简洁的代码实现这个问题

<script>
		let divs = document.getElementsByClassName('item');
		for(let i = 0; i < divs.length; i++){
				divs[i].onclick = function(){
				console.log(i);
			}
		}
	</script>