ES6 let和const的使用

gxgalaxy

于 2020-08-06 10:49:15 发布

阅读量91

点赞数

分类专栏： ES6

本文链接：https://blog.csdn.net/gxgalaxy/article/details/107804859

版权

ES6 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

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>

每次循环的时候let声明都会创建一个新的变量i，并将其初始化值赋值为i当前的当前值，每个循环内的函数就都拥有了属于自己的i值。

gxgalaxy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6 let和const的使用

文章目录1.var声明和提升机制2.块级声明3.let声明4.const声明1.var声明和提升机制JavaScript中在函数作用域或者全局作用域中通过关键字var 声明的变量，会被提升到当前作用域的顶部声明的变量（提升机制）例如下列代码<script> function getValue(item){ if(item){ var value = "1"; return value; }else { return null } } &
复制链接

扫一扫