当前位置：网站首页>关于let var 和const的区别以及使用

关于let var 和const的区别以及使用

2022-08-04 05:26:00 【strongest强】

var的说明

1.可以提升自己的变量

例如：

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

输出

undefined

100

2.变量的值可以进行更改

例如：


			var a=100；
            console.log(a);
			a=200;
			console.log(a);

输出：

100

200

3.变量在全局作用域

例如：

            var a=100;
			console.log(a);
			function change(){
				if(true){
					a++;
				}
				return a;
			}
			console.log(change());

输出：

100

101

let的说明

1.不可以提升自己的变量

            console.log(b);
			let b=100;

输出：

Cannot access 'b' before initialization

2.变量的值可以进行更改

             let b=100;
			 console.log(b);
			 b=200;
			 console.log(b);

输出

100

200

3.块级作用域下的变量，在别的函数作用域下，不可以使用

            if (true) {
				let b = 100;
				console.log(b);
			}
			console.log(b);

输出：

100

b is not defined

const的说明

1.不可以提升自己的变量

            console.log(a);
			const a=15;

输出：

Cannot access 'a' before initialization

2.简单型数据变量的值不可以进行更改；当不涉及地址改变时，复杂型数据型变量的值（如数组，对象等）可以进行更改；当涉及地址改变时，复杂型数据型变量的值（如数组，对象等）不可以进行更改；

例如：

			const person=['Wei','Uzi','Xiaohu','Ming'];
			console.log(person);
			person[1]='Gala';
			console.log(person);
			
			const team={
				Lpl:'Ig',
				Lck:'Skt',
				Lec:'Fnc'
			}
			console.log(team);
			team.Lpl='Rng';
			console.log(team);
			
			person=['Cryin','Gala','Wei','Xiaohu'];
			console.log(person);
			team={
				Lpl:'fpx',
				Lck:'Dk',
				Lec:'G2'
			}
			console.log(team);

输出：

["Wei", "Uzi", "Xiaohu", "Ming"]

["Wei", "Gala", "Xiaohu", "Ming"]

{Lpl: "Ig", Lck: "Skt", Lec: "Fnc"}

{Lpl: "Rng", Lck: "Skt", Lec: "Fnc"}

Assignment to constant variable.

3.块级作用域下的变量，在别的函数作用域下，不可以使用

例如：

            if (true) {
				const a = 1999;
			}
			console.log(a);

输出：

a is not defined

关于let的更多应用，比如遍历循环时，可以用let代替var

   <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button>搜索1</button>
		<button>搜索2</button>
		<button>搜索3</button>
		<button>搜索4</button>
		<script>
			var btns = document.querySelectorAll('button');
			//错误示例
			// for (var k = 0; k < btns.length; k++) {
			// 	btns[k].onclick = function() {
			// 		for (var i = 0; i < btns.length; i++) {
			// 			btns[i].innerText = '搜索' + i;
			// 		}
			// 		btns[k].innerText = '搜索我啊，小笨蛋，(๑′ᴗ‵๑)Ｉ Lᵒᵛᵉᵧₒᵤ'
			// 	}
			// }//会先编译for循环，然后找不到btns[k=4]这个按钮，因此会报错
			//正确示例
			// 1.如立即执行函数
			for (var i = 0; i < btns.length; i++) {
				(function(e) {
					btns[e].onclick = function() {
						for (var i = 0; i < btns.length; i++) {
							btns[i].innerText = '搜索' + i;
						}
						btns[e].innerText = '搜索我啊，小笨蛋，(๑′ᴗ‵๑)Ｉ Lᵒᵛᵉᵧₒᵤ'
					}
				})(i) //i作为实参传递给形参e
			}
			//2.利用es6新语法，let变量

			for (let k = 0; k < btns.length; k++) {

				btns[k].onclick = function() {
					for (var i = 0; i < btns.length; i++) {
						btns[i].innerText = '搜索' + i;
					}
					btns[k].innerText = '搜索我啊，小笨蛋，(๑′ᴗ‵๑)Ｉ Lᵒᵛᵉᵧₒᵤ'
				}
			}

		</script>
	</body>
</html>

至于效果，就你们自己点击啦！