原生js之var let以及const的区别和作用

2023-09-21 09:06:01

ES5:var
ES6:let、const

var怪异变量

首先我们要明确,var是一个块变量也叫作用域变量,如果它放到一个函数中,在函数外调用应该是失败的,在不用var a=1,这样进行定义而变成a=2,时则这个变量就变成了全局变量,如

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			function var1() {
				var a = 3
			}

			function var2() {
				b = 4
			}
			var1()
			var2()
			console.log(b)
			console.log(a)
		</script>
	</body>
</html>

在这里插入图片描述
在上述代码中,正常定义的a是报错显示a没有被定义,但是没有定义的b=4则怪异的变成了全局变量,一方面我们可以使用严格模式来定义这个函数,则会解决这个怪异问题。‘use strict’
在这里插入图片描述
同时它还有变量提升的怪异之处,我们知道,在script当中是按顺序来进行初次加载和调用的,如果我们在script全局作用域中打印出来一个a变量,那我们一定要先定义a变量再打印才能出现结果,否则就会报错,但在怪异变量中,我们如果先打印后定义不会报错,会显示undefined,就是变量已经被定义但是没有被赋值,是因为在ES当中

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

被等价成

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

也就是把所有的变量都拉到当前作用域的顶部,此外,多次使用var声明同一个变量也没有问题。
这就是var变量的怪异之处。而正是因为这些怪异之处,导致在ES6当中,诞生了let和const两个关键词。

let关键词

let和var的区别是,它没有var那些怪异的‘处事风格’,同时它是一个块作用域,而var是一个函数作用域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			function let1() {
				if (true) {
					let a=1;
				}
				console.log(a)
			}
			function var1(){
				if(true){
					var a=1;
				}
				console.log(a)
			}
			var1();let1()
		</script>
	</body>
</html>

在这里插入图片描述

具体表现为,它在if-else,switch,for等定义的变量,在这些条件语句外则无法被调用,每个条件语句对它来说都是一个块,而var,只要在函数中任何地方定义,就可以在任何地方被调用。

同时在let中,也不会变量提升,在定义let变量前,不能被调用,也称为“暂时性死区”。

全局声明

在全局作用域中声明的let变量不会成为window对象的属性,而var定义的变量会,具体表现在,window.属性名出现具体值还是出现的是undefined。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var a=1;
			console.log(window.a)
			let b=1;
			console.log(window.b)
		</script>
	</body>
</html>

在这里插入图片描述

const常量

const在初始化时必须被赋初值且不能被修改,但如果定义的是对象,修改对象中的属性的具体值,则不会报错且能修改。因为const声明的限制只是在它指向变量的引用。而具体的属性的值在修改的时候,并没有改变属性变量所在地址,所以这种改变是被允许的,但是不能改变它的属性名。举例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			const obj = {
				a: 1
			}
			obj.a = 2
			console.log(obj.a)
			obj=JSON.parse(JSON.stringify(obj).replace(/a/g, 'b')) //data为数组,name为修改前,new_name为修改后
		</script>
	</body>
</html>

在这里插入图片描述

上述例子中,我们发现当我们在const常量对象中修改属性的内容可以被修改,如果利用正则表达式修改某个属性名,则不会被修改成功。如果把const变成let则可以修改成功。
在这里插入图片描述

在大多数时候,为了避免出现代码怪异的情况,大多数开发者会选择用let和const来代替var关键词作为定义变量的主要选择,同时这样也会提升代码质量,让代码不会出现重复定义的问题和全局/作用域问题。实际const,let,var的这些属性和特征往底层实现还是要看基础的存储空间堆栈那里,这里就不多赘述了。

更多推荐

计算机竞赛 深度学习 大数据 股票预测系统 - python lstm

文章目录0前言1课题意义1.1股票预测主流方法2什么是LSTM2.1循环神经网络2.1LSTM诞生2如何用LSTM做股票预测2.1算法构建流程2.2部分代码3实现效果3.1数据3.2预测结果项目运行展示开发环境数据获取最后0前言🔥优质竞赛项目系列,今天要分享的是🚩深度学习大数据股票预测系统该项目较为新颖,适合作为竞

SpringMVC之JSON返回&异常处理机制

一.什么是SpringMVC之JSON返回&异常处理机制二.Json处理导入pom.xml依赖导入Spring-Mvc.xml编写JsonController编写Sql语句测试结果json转换的注解测试结果(@JsonIgnore)三.全局异常处理机制为什么要全局异常处理异常处理思路​编辑自写一个错误代码​编辑输出结果

【vue组件】使用element-ui table 实现嵌套表格 点击展开时获取数据

应用场景是这样主表格的数据是所有的学校然后点击展开的时候,获取学校下相应班级的数据并且班级要能选择后生成图表,但所有的班级最多选择5个首先是嵌套表格<div><el-table:data="tableDisplayData"id="chartTableExpand"style="width:100%"ref="char

基于SpringBoot的点餐系统

基于SpringBoot+Vue的点餐系统、食堂餐厅点餐系统、前后端分离开发语言:Java数据库:MySQL技术:SpringBoot、Vue、MybaitsPlus、ELementUI工具:IDEA/Ecilpse、Navicat、Maven【主要功能】角色:管理员、用户管理员:菜品管理、桌位管理、菜品管理、类别管理

侯捷老师C++课程:C++2.0 新特性

C++2.0新特性第一讲:语言variatictemplates参数包在类模板中,模板参数包必须是最后一个模板形参.而在函数模板中则不必!!!这个之前提过了,就不细谈了下面那三个分别对应:typename...Types//模板参数包constTypes&...args//函数参数类型包print(args...)//

Java中运用BigDecimal对字符串的数值进行加减乘除等操作

系列文章目录SpringBoot+Vue3实现登录验证码功能Java实现发送邮件(定时自动发送邮件)换个角度使用Redis去解决跨域存取Session问题Redis缓存穿透、击穿、雪崩问题及解决方法SpringCache的使用–快速上手篇List<HashMap<String,String>>实现自定义字符串排序(ke

HTML5 游戏开发实战 | 推箱子

经典的推箱子是一个来自日本的古老游戏,目的是在训练玩家的逻辑思考能力。在一个狭小的仓库中,要求把木箱放到指定的位置,稍不小心就会出现箱子无法移动或者通道被堵住的情况,所以需要巧妙地利用有限的空间和通道,合理安排移动的次序和位置,才能顺利地完成任务。推箱子游戏功能如下:游戏运行载入相应的地图,屏幕中出现一个推箱子的工人,

我想设计一套游戏的奖励系统,有什么值得注意的?

游戏上:游戏成就系统的价值游戏中的成就可以延长游戏时间,让玩家不仅仅是将游戏通关,而是必须完成游戏内所有挑战及发现秘密,这些成就可以与游戏本身的目标一致,也可以独立于游戏的主要或次要目标之外,玩家必须以特别的方式完成游戏才能取得。具体而言:增加游戏收益:与打BOSS掉装备一样,徽章、坐骑、小宠物和称号等成就奖励,需要玩

C++布隆过滤器

一、前提引入思考如下的题目将长度为10的字符串保存在哈希表中,需要多少空间对于每个字符来说,都有256中可能(即ASCII的理论字符数量,常用ASCII编码只有128个),因此一个长度为10的字符串有种比特组合因此将字符串转换成整型,是从大范围转换到小范围。也就是多对一,因此将其映射到哈希表中,一定会产生冲突可能出现如

基于SSM+Vue的网上拍卖系统

末尾获取源码开发语言:JavaJava开发工具:JDK1.8后端框架:SSM前端:采用Vue技术开发数据库:MySQL5.7和Navicat管理工具结合服务器:Tomcat8.5开发软件:IDEA/Eclipse是否Maven项目:是目录一、项目简介二、系统功能三、系统项目截图前台功能模块买家后台功能模块卖者后台功能模

李航老师《统计学习方法》阅读笔记

第1章1.1统计学习统计学习的特点统计学习:计算机基于数据构建概率统计模型并运用模型对数据进行预测与分析现在人们提及机器学习时,往往指统计机器学习,所以可以认为本书介绍的是机器学习方法统计学习的对象统计学习研究的对象是数据(data),统计学习关于数据的基本假设是同类数据具有一定的统计规律性,这是统计学习的前提。e.g

热文推荐