JS中的var和let的區別

ES6 新增了let命令，用來聲明局部變量。它的用法類似於var，但是所聲明的變量，只在let命令所在的代碼塊內有效，而且有暫時性死區的約束。

let和var之間一共有4處區別：

01-作用域只侷限於當前代碼塊
02-使用let生命的變量作用域不會被提升
03-在相同作用域下不能聲明相同的變量
04-for循環體現let的父子作用域

我們會做幾個例子來驗證這這四處不同：

在這之前我們需要佈局一下頁面：

		<button>按鈕1</button>
		<button>按鈕2</button>
		<button>按鈕3</button>
		<button>按鈕4</button>
		<button>按鈕5</button>

此時頁面上顯示着五個按鈕：

01-作用域只侷限於當前代碼塊

當我們在一個作用域裏分別創建兩個變量，然後在作用域外面再調用的時候

			{
				var str="張三";
				console.log(str);
				
				let str1="李四";
				console.log(str1);
				
			}
			//發現這時候能輸出出來張三
			console.log("var的"+str)

			//這時候就報錯了
			//str1 is not defined
			console.log("let的"+str1)

此時，頁面上顯示：在作用域外面str1就沒有被定義

02-使用let中聲明的變量作用域不會被提升

當我們在一個作用域內裏，聲明變量之前打印這個變量的話會有不同的結果

{
				//輸出的是undefined
				console.log(str)
				var str="張三"

				//而let不會，會顯示這個變量壓根就沒有被定義，在es6中就不存在這種作用域提升了

				//如果輸出的話會在當前作用域的前面去找，如果沒有找到會報錯
				console.log(str1)
				let str1="李四"
			}

此時，頁面上顯示：

03-在相同作用域下不能聲明相同的變量

當我們在同一個作用域內聲明瞭相同的變量時，都知道如果是var聲明的話會被覆蓋，而let聲明的就不是這樣了

			{
				
				var str="張三"
				var str="李四"
				//這時候會輸出李四，後邊的會把前面的覆蓋掉
				console.log(str)

				let str1="王五"
				let str1="趙六"
				//這時候報錯了
				//在這裏不會做任何的執行，會直接報錯
				console.log(str1)
			}

此時打印出來的是：
str被打印出來了
而str1顯示報錯

04-for循環體現let的父子作用域

首先，我們先獲取下頁面上的按鈕並添加個點擊事件
當我們用var定義變量並且循環的時候呢，

		var btns=document.querySelectorAll("button")
			for(var i=0;i<btns.length;i++){
				//console.log(i)
				btns[i].onclick=function(){
				console.log("點擊了第"+i+"個按鈕")
				//alert("hhhh")
			}
		}

不管在頁面上點擊哪個按鈕都會顯示：
點擊了第5個按鈕

但是在es6中就不是這樣的
直接把上面的var改成let

			let btns=document.querySelectorAll("button")
				for(let i=0;i<btns.length;i++){
				//console.log(i)
					btns[i].onclick=function(){
					console.log("點擊了第"+i+"個按鈕")
					//alert("hhhh")
				}
			}

這時候顯示的就是：

以上屬於個人筆記總結，如有疑問以及錯誤，歡迎私信或者評論區留言，一起交流進步~