js关键字 let 和var、querySelector方法和getElementBy方法的比较

Monsters_Skipper

已于 2022-05-21 16:44:08 修改

阅读量559

点赞数

文章标签： javascript 开发语言 ecmascript

于 2022-05-18 20:18:22 首次发布

本文链接：https://blog.csdn.net/jwl18236975853/article/details/124848874

版权

二:document.querySelector方法和getElementById()方法：

2.1通过getElementBy家族获得的DOM元素对象会随着DOM元素的更新自动更新

2.1通过querySelector家族获得的DOM元素对象不会自动更新需要手动更新

一：let 和var的比较

1.1语法规范

名称	区别
var	允许对同一个变量名进行重复声名
let	不允许对同一个变量名进行重复声名

我们执行如下代码

       <script type="text/javascript">
			var b = 10
			var b = 10
			let a = 10
			let a = 15
		</script>

得到的反馈结果为： 'a' has already been declared

实际开发的时候每个变量都应该是相互独立的内存空间，所以重复声名是不合理的

1.2变量提升

关键字	变量提升
var	有
let	无

变量提升:函数声明和变量声明总是会被解释器悄悄地"提升"到方法体的最顶部。

所以使用var定义的全局变量有变量提升,先使用后声名虽然不会报错。但是因为js是一类弱数据类型的语言，所以在赋值之前该变量的值都会被定义为NAN，这不符合我们的使用习惯。而使用let声名的变量要先声名，后使用，如果在声名之前使用，会直接报错。

       <script type="text/javascript">
			var b = a + 3
			var a = 10
			console.log(`a+3的值为${a+3}`)
			console.log(`b的值为${b}`)
			let c = d+3
			let d = 10	     
		</script>

控制台反馈结果如下：

可以看到使用let先使用后定义一个变量的时候，控制台会直接抛出错误提示，使用var先使用后定义一个变量的时候，控制台虽然没有给出错误提示，但是它的值在被赋值之前一值都是NAN，这会造成使用异常。

1.3作用域问题

var	let
函数作用域,全局作用域	函数作用域,全局作用域,块级作用域
没有块级作用域	有块级作用域

下面通过一个实例来验证他们造成的影响

给出如下代码

    <body>
		<button type="button">1</button>
		<button type="button">2</button>
		<button type="button">3</button>
		<script type="text/javascript">
		var btnArr = document.querySelectorAll("button")
		  for(var i = 0;i<btnArr.length;i++){
			  console.log(i)
			  btnArr[i].onclick=function(){
				  console.log(i)
			  }
		  }	  
		</script>
	</body>

在调用了三个按钮的点击事件以后，得到如下结果

可以看到我们打印出来的三次i的值全为3,这是因为i在循环结束以后被当作全局变量保存下来，然后在点击事件里被重新调用了的结果

把关键字var改为let以后打印输出的结果如下，这是因为这里的i是个块级作用域，只在档次循环有效

显然第二种方式更符合我们的需求

二:document.querySelector方法和getElementById()方法：

2.1通过getElementBy家族获得的DOM元素对象会随着DOM元素的更新自动更新

	    div id="box">
			<div class="index"></div>
		</div>	
	
		<script type="text/javascript">
		let box = document.getElementById("box")		
		//得到所有名字为index的类
		let indexArr = document.getElementsByClassName("index")
		// 打印类名为index的数组对象
		 console.log(indexArr)
		//新生成一个类名为index的div，并把它插入DOM文档
		 let index1 = document.createElement("div")
		 index1.className="index"
		 box.appendChild(index1)
		//打印类名为index的数组对象
		 console.log(indexArr)
		</script>

两次的打印结果为

可以看到我们存放类名为index的数组对象自动更新了，前后两次的打印结果不一样

2.1通过querySelector家族获得的DOM元素对象不会自动更新需要手动更新

执行如下代码

        <div id="box">
			<div class="index"></div>
		</div>		
		<script type="text/javascript">
		let box = document.querySelector("#box")		
		//得到所有名字为index的类
		let indexArr = document.querySelectorAll(".index")
		// 打印类名为index的数组对象
		 console.log(indexArr)
		//新生成一个类名为index的div，并把它插入DOM文档
		 let index1 = document.createElement("div")
		 index1.className="index"
		 box.appendChild(index1)		 
		//打印类名为index的数组对象
		 console.log(indexArr)
		</script>

它得到的结果为